Keskustelu: Nettisivujen teko: Div:n taustakuva 100%

Onko olemassa CSS:n keinoa saada div:n taustakuva venymään div:n koon mukana? Eli kun div levenee tekstin tms vaikutuksesta taustakuva levenee kanssa. Div sisältää otsikkotekstin(siksi venyminen). Löysin ohjeita..

#div {
background-image: url('images/blaablaa.jpg');
height: 100%;
width: 100%;
}

ei toiminut

#div {
background-image: url('images/blaablaa.jpg');
background-size: 100%;
}

ei toiminut

Kiitos etukäteen jos keino löytyy...

Mod. lisäsi kooditagit.

Jälkimmäinen tapa on oikea, mutta se vaatii tuen CSS:n versiolle 3, joka on vasta kehitteillä ja jonka tuki selaimissa vaihtelee. Jos viritelmä täytyy saada toimimaan vanhemmillakin selaimilla, ei jää juuri muuta neuvoa kuin laittaa kuva sivulle tavallisena kuvana jotenkin tähän tapaan:

div {
  position: relative;
}
div img.bg {
  position: absolute;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
}

<div>
  <img class="bg" src="images/blaablaa.jpg" alt="" />
  <p>Plaa.</p>
</div>

Hetkinen! Div sisältää otsikkotekstin?

<h2><img alt="Otsikko" src="otsikko.png" /></h2>

Parempi näin, eikä tyylittelykään ole ongelma jos h2:lle antaa position: relativen.

Jos kuvassa on otsikon teksti, sen venyttäminen ennalta tuntemattomaan kokoon olisi aika typerää, vai mitä? Oletan siis, että kyseisessä kuvassa on todella pelkkä taustakuva.

Mutta kuten Merri yllä sanoo, otsikko toki kuuluu asianmukaiseen hX-elementtiin (sivun pääotsikko h1, alaotsikot h2 jne.), joten jos mainittu div ei sisällä muuta kuin otsikon, on luultavasti viisainta vaihtaa divin tilalle suoraan se sopiva hX-elementti. Aivan samat CSS-tyylit ovat siinäkin käytössä.

Kyseessä on siis taustakuva jonka päälle tulee otsikkoteksti.