Immagine sfondo body non intera

**Magenda** · 08-04-2014, 10:52

Salve,
nel body della home ho provato a mettere una immagine come sfondo, in px 850x800, come la dimensione del body, in formato .gif, ma si interrompe e appare solo ai margini laterali, vedo che dietro compare solo il background che avevo pure inserito esadecimale, il tutto in un foglio di stile esterno. Ho provato con altre immagini più piccole in .png che invece compaiono su tutto lo sfondo perchè lo vedo anche dal margine in alto. Non mi spiego perchè i due comportamenti diversi, forse se metto una immagine intera non devo mettere altro sfondo?
Grazie

**KillerWorm** · 09-04-2014, 00:16

Ciao, personalmente non ho capito quale sia il problema che descrivi. Sarebbe utile se tu postassi il codice in questione.

**Magenda** · 09-04-2014, 03:13

codice:

body { background:#9eaf3e url('img/sfondo61a.png'); }

Ho fatto molte prove cercando di creare una immagine che corrispondesse alle misure del body, ma non posso. Mi è riuscito di creare una immagine in png trasparente al centro con due motivi laterale, e ho dovuto provare fino a quando queste parti piene sono diventate visibili come voglio io a destra e a sinistra del div contenitore della pagina. Non so se è il caso di mettere una immagine come sfondo, non so come orientarmi con le dimensioni, pensavo che bastasse mettere quelle che ho dato al body. Non ho interesse invece per una immagine che si ripete, cosa che ho capito come si fa.
Ti ringrazio KillerWorm

**KillerWorm** · 09-04-2014, 04:03

Non ho capito se hai risolto o se il problema continua a persistere... e sinceramente continuo a non capire quale sia.

Tieni comunque conto che se non hai applicato una larghezza fissa per il body, normalmente questo si ridimensiona in base alla finestra del browser, mentre lo sfondo resta ancorato in alto a sinistra (se non ci sono altre regole che ne stabiliscano un diverso comportamento), quindi generalmente è sempre utile verificare la resa della pagina su diverse grandezze della finestra per applicare al meglio le eventuali regole css. Ma non capendo quale sia il problema e non vedendo il resto del relativo codice css e html, non è facile aiutarti.. sempre che tu non abbia già risolto.

**Magenda** · 09-04-2014, 16:01

Il body non ha una larghezza stabilita, dentro vi ho messo un contenitore che è 950px per 800px, ma in un primo momento ho sbagliato e ho confuso i due livelli quando ho fatto la richiesta. Mi riferisco ad una immagine da mettere come sfondo al contenitore che vorrei flottasse mentre il body sta fisso. A questo punto ho provato diverse grandezze in pixel dello sfondo, un pò più grandi di 850px, anche se non so quanto è bene contenere il peso della immagine. Non ho ancora risolto, non riesco a mettere uma immagine in jpg piuttosto che in gif al fine di ottenere che la stessa immagine resti intera.

Posto tutto il codice, spero che non sia troppo.

codice:

@charset "utf-8";
/* CSS Document */

div { margin:0; padding:0 }
h1 {  margin:0; padding:0 }

body { background:#9eaf3e url('img/sfondo61a.png'); }

.sinistra { float:left; }

#contenitore { background:#E18687; padding:5px; width:950px; margin:0 auto; }

#testata { background:#644646; padding:10px; }

#menu { background:#644646; padding:10px; margin-top:2px; }

#nav { margin:0; padding:0; list-style:none; }
 
#nav li { float:left; margin:0 20px; }

#nav li a { color:#000; text-decoration:none; }
#nav li a:hover { color:#f00; text-decoration:underline; }

#col-sx { width:208px; height:800px; margin-top:2px; margin-right:2px; padding:5px; background:#F1DDDD; }
#col-cen { width:500px; height:800px; margin-top:2px; margin-right:2px; padding:5px; background:#F1DDDD; } 
#col-dx { width:208px; height:800px; margin-top:2px; padding:5px; background:#F1DDDD; }

#footer { background:#644646; padding:5px; margin-top:2px; text-align:center; }

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Mio sito</title>
 <link rel="stylesheet" type="text/css" href="stile.css" />
</head>

<body>
      
  <div id="contenitore">
  
     <div id="testata">
       <h1>Galleria d'Arte   <br>
          di Anna Maugeri</br></h1></div>
     
      <div id="menu">
        <ul id="nav">
           <li><a href="#">Home</a></li>
           <li><a href="#">Autori</a></li>
           <li><a href="#">Chi sono</a></li>
           <li><a href="#">Contatti</a></li>
        </ul>
        <div style="clear:both;"></div>
      </div>
    
    <div id="col-sx" class="sinistra">colonna sinistra</div>
    <div id="col-cen" class="sinistra">contenuto principale</div>
    <div id="col-dx" class="sinistra">colonna destra</div>
    
    <div style="clear:both;"></div>
    <div id="footer">Crediti Copyright Galleriadartesicilia 2014</div>
    
  </div>


</body>
</html>

Metto anche l'html:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Mio sito</title>
 <link rel="stylesheet" type="text/css" href="stile.css" />
</head>

<body>
      
  <div id="contenitore">
  
     <div id="testata">
       <h1>Galleria d'Arte   <br>
          di Anna Maugeri</br></h1></div>
     
      <div id="menu">
        <ul id="nav">
           <li><a href="#">Home</a></li>
           <li><a href="#">Autori</a></li>
           <li><a href="#">Chi sono</a></li>
           <li><a href="#">Contatti</a></li>
        </ul>
        <div style="clear:both;"></div>
      </div>
    
    <div id="col-sx" class="sinistra">colonna sinistra</div>
    <div id="col-cen" class="sinistra">contenuto principale</div>
    <div id="col-dx" class="sinistra">colonna destra</div>
    
    <div style="clear:both;"></div>
    <div id="footer">Crediti Copyright Galleriadartesicilia 2014</div>
    
  </div>


</body>
</html>

**Magenda** · 09-04-2014, 19:34

Ho risolto, perlomeno ho compreso. L'immagine si ripeteva due volte perchè il file non era abbastanza grande. Ora invece è della grandezza adeguata ma i soggetti non più visibili lateralmente nella loro interezza. Quindi si tratterà solo di provare man mano le varie soluzioni.
Ormai ho postato il codice, ovviamente ho seguito passo una guida, ma mi riesce di capire questo linguaggio in html 5. Accetto eventuali suggerimenti se c'è qualcosa che potrebbe esser fatto meglio. Ringrazio per l'aiuto, buona serata

Discussione: Immagine sfondo body non intera

Strumenti discussione

Ricerca discussione

Visualizza

Immagine sfondo body non intera

Permessi di invio