RISOLTO CSS / HTML - adattare sfondo al contenitore div

Pubblicità
R

Roky88

Nuovo Utente
Messaggi
57
Reazioni
1
Punteggio
24
allora ho un contenitore div che occupa il 100% della pagina in larghezza (width), gli ho impostato un'immagine di sfondo, e vorrei che questa immagina occupo il 100% del contenitore (width). Ora il punto è che al ridimensionamento della pagina vorrei mi si ridimensionasse anche l'immagine, il problema ce l'ho con l'altezza. Questa e il codice interessato:
Codice: 
<style type="text/css">
 #conteiner #header {
 background-image: url(img.JPG);
 background-size: 100% auto;
 color: #FFF;
 background-repeat: no-repeat;
 }
</style>
gentilmente nelle risposte scrivete il codice, cosi è tutto più chiaro e semplice. Il mio non va , o meglio, per la larghezza e ok, ma l'altezza non la modifica, resta una striscia sottile che contine giusto una parola "header".
 
Ultima modifica da un moderatore:
Devi utilizzare il valore cover per il background-size:
"Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area"

PHP: 
<style type="text/css">
#conteiner #header {
  background: url(img.JPG) no-repeat;
  background-size: cover;
  color: #FFF;
}
</style>

EDIT:
NB. L'altezza del div non è influenzata dalla grandezza dell'immagine di sfondo.
 
Ultima modifica:
cdtux ha detto:
Devi utilizzare il valore cover per il background-size:
"Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area"

PHP: 
<style type="text/css">
#conteiner #header {
  background: url(img.JPG) no-repeat;
  background-size: cover;
  color: #FFF;
}
</style>

EDIT:
NB. L'altezza del div non è influenzata dalla grandezza dell'immagine di sfondo.
Clicca per espandere...

infatti è questo il problema, come faccio a risolvere? cioè ho impostato il width al 100% cosi mi si adatta alla pagina qnd si riduce, ma con l'altezza come faccio? metti che la imposto io, poi come faccio a farla diminuire qnd si riduce la pagina?
 
Devi impostare l'altezza in percentuale del div "header", però devi anche impostare l'altezza del div che lo "contiene".
Da come hai scritto le regole css, immagino che tu abbia una situazione di questo tipo:

PHP: 
<div id="container">
   <div id="header"></div>
</div>

in questo caso, l'altezza del div "header" sarà in funzione dell'altezza del div "container".
Ad esempio, se imposti l'altezza del container a 100px e l'header a 50% , l'header avrà un'altezza di 50px.
 
cdtux ha detto:
Devi impostare l'altezza in percentuale del div "header", però devi anche impostare l'altezza del div che lo "contiene".
Da come hai scritto le regole css, immagino che tu abbia una situazione di questo tipo:

PHP: 
<div id="container">
   <div id="header"></div>
</div>

in questo caso, l'altezza del div "header" sarà in funzione dell'altezza del div "container".
Ad esempio, se imposti l'altezza del container a 100px e l'header a 50% , l'header avrà un'altezza di 50px.
Clicca per espandere...

si diciamo di si...ho un container con vari div:
PHP: 
<div id="container">
<div id="header">header</div>
<div id="bla">bla</div>
<div id="blabla">blabla</div>
</div>

quindi dovrei imposta un altezza al container? mmmmh e io che speravo di non impostarla e di lasciarla libera.....per ora sembra la migliore soluzione xke altre erano troppo macchinose....hai altre idee cmq?
 
Ultima modifica:
Pubblicità
Pubblicità
Indietro
Top