RISOLTO CSS / HTML - adattare sfondo al contenitore div

Roky88

Nuovo Utente
57
1
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:

cdtux

Utente Èlite
1,829
911
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
Gigabyte GTX1060 6GB
Monitor
Dell U2412M
PSU
Seasonic Focus Plus 650
Case
Corsair Graphite 760T
OS
Debian / Ubuntu
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:

Roky88

Nuovo Utente
57
1
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.

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?
 

cdtux

Utente Èlite
1,829
911
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
Gigabyte GTX1060 6GB
Monitor
Dell U2412M
PSU
Seasonic Focus Plus 650
Case
Corsair Graphite 760T
OS
Debian / Ubuntu
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.
 
M

Mursey

Ospite
Ad esempio, se imposti l'altezza del container a 100px e l'header a 50% , l'header avrà un'altezza di 50px.

Segnalo la funzione calc, molto utile per gestire il resize degli elementi in pagina.
width:calc(50% - 10px); ad esempio imposta la width togliendo 10px alla meta' della width del padre.
 

Roky88

Nuovo Utente
57
1
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.

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:

cdtux

Utente Èlite
1,829
911
CPU
I7 3770
Scheda Madre
Asrock Z77 Extreme 4
HDD
Samsung 850 pro 250GB
RAM
Corsair Vengeance LP 16GB
GPU
Gigabyte GTX1060 6GB
Monitor
Dell U2412M
PSU
Seasonic Focus Plus 650
Case
Corsair Graphite 760T
OS
Debian / Ubuntu
Puoi anche impostare l'altezza dell'header in vh, che serve impostare l'altezza in funzione della viewport.
Le dimensioni in vh sono percentuali: 100vh = 100% della viewport
 
  • Mi piace
Reazioni: Mursey e Roky88

Entra

oppure Accedi utilizzando
Discord Ufficiale Entra ora!

Discussioni Simili