achtergrond website

[markvelde]

Hallo,

als achtergrond wil ik graag een afbeelding plaatsen in mijn body.
Als ik de afbeelding invoeg via mijn css rekt deze met de breedte van de site mee en wordt te groot weergegeven.
De site maak ik als dynamisch rasterlayout.
Is het de bedoeling dat ik de body een vaste breedte geef in pixels, zodat mijn afbeelding niet te groot maar wel helder wordt weergegeven?

Dit is mijn css code:


<style type="text/css">
body {
background-image: url(art-2695991_960_720.jpg) ;
background-size: cover;
background-attachment: fixed;
}
</style>

Alvast bedankt

 

[maulem]

Jazeker. Dat de afbeelding de hele pagina beslaat komt doordat background-size op cover staat. Vervang dit bijv. door background-size:1280px 960px;

zie CSS3 background-size property

 

[markvelde]

Dank je wel!!!!

 

[Rubensky]

Je kan de afbeelding toch ook maar dynamisch maken door hem niet een vast aantal pixels te geven maar een percentage.

 

[gouwepeer]

Je kan de afbeelding responsive maken zonder te laten uitrekken:

img {
    max-width: 100%;
    height: auto;
}

Deze instelling zorgt ervoor dat, zolang de schermbreedte dit toelaat, de afbeelding op zijn oorspronkelijke formaat word weergegeven. Bij een kleiner scherm wordt de afbeelding dan netjes geschaald.

Stel je liever vaste waarden in? Gebruik dan de @media tag in het css:

@media screen and (max-width:600px) {
.css instellingen voor schermen t/m 600 pixels
}

@media only screen and (min-width :601px) {
.css instellingen voor schermen vanaf 601 pixels
}