Bg plaatje Schermvullend

Hallo,

Hoe krijg ik d.m.v CSS een Achtergrond schermvullend?

Ik zocht op google maar kan niet zoveel vinden.

Mvg,

CSS:

Spoiler tonen

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

#wrapper {
  position: relative;
  width: 800px;
  min-height: 400px;
  margin: 100px auto;
  color: #333;
}

Index.html

Spoiler tonen

<body>
  <img alt="Lorem ipsum del loro" src="/background.jpg" id="full-screen-background-image" /> 
  <div id="wrapper">
    <p>Tekst</p>
  </div>
</body>

Werkt niet, nu is het plaatje veel te groot.

Laat het plaatje eens zien. Dus je wilt dat het zich uitstrekt?

Waarom zo moeilijk?

CSS:

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(../Images/background.jpg); /* URL naar je achtergrond */
    background-size: 100%;
}

Sanderc schreef:

Laat het plaatje eens zien. Dus je wilt dat het zich uitstrekt?

Jepz..

http://www.solidos.nl/opdrachten/comite/

toevoeging op 11 juni 2012, 21:22:54:

Peeters schreef:

Waarom zo moeilijk?

CSS:

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(../Images/background.jpg); /* URL naar je achtergrond */
    background-size: 100%;
}

Werkt ook niet, plaatje wordt veels te groot...

Je wou het schermvullend?
Nou dat is het.
Anders moet je het plaatje centreren en een achtergrondkleur pakken. Ik denk dat je dat bedoeld.

Peeters schreef:

Je wou het schermvullend?
Nou dat is het.
Anders moet je het plaatje centreren en een achtergrondkleur pakken. Ik denk dat je dat bedoeld.

Het plaatje wordt nu veels te groot zeg ik, ik zie de helft van het plaatje maar.

Je hebt ook niet gedaan wat ik zei he.

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(../Images/background.jpg); /* URL naar je achtergrond */
    background-size: 100%;
}

Peeters schreef:

Je hebt ook niet gedaan wat ik zei he.

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(../Images/background.jpg); /* URL naar je achtergrond */
    background-size: 100%;
}

helpt niks zei ik.. had ik allang gedaan.

Heb je die van mij al geprobeerd dan? ..

Jochems schreef:

Heb je die van mij al geprobeerd dan? ..

ook al, helpt ook niet.. wordt net zo als nu.

CSS:

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(http://www.solidos.nl/opdrachten/comite/plaatje.png); /* URL naar je achtergrond */
    background-position: 0 100%;
    background-size: 100%;
}

Peeters schreef:

CSS:

* {
    padding: 0px;
    margin: 0px;
}

html {
    height: 100%;
}

body {
    background-image: url(http://www.solidos.nl/opdrachten/comite/plaatje.png); /* URL naar je achtergrond */
    background-position: 0 100%;
    background-size: 100%;
}

En nu is ie goed! Super bedankt!

Geen probleem! Al had je beter de resolutie van het plaatje wat groter kunnen maken.