Ben tegen een probleem gestoten tijdens het omzetten van ontwerp naar xHtml/CSS.

Ik heb een afbeelding gemaakt in Photoshop, en deze zou als vaste achtergrond op de webpagina moeten staan. Bij scrollen moet de image dus niet mee verplaatsen.

Nu wil ik dat onderkant van image altijd onderaan in beeld staat en bovenkant er dus eventueel afvalt. Nu is dit steeds omgekeerd. Bij een kleine resolutie zal onderkant van image niet in beeld zijn.

Code:

body {
	position: fixed;
	background-color: #2d2d2d;
	background-image: url(../img/bg_fowa.jpg);
}

Wie kan me helpen?

background: #2d2d2d url(../img/bg_fowa.jpg) no-repeat;

Dat zou denk ik moeten werken.

En bottom: 0; toevoegen volgens mij!

Geen van beide wil werken :-(

Heeft u ergens een voorbeeld online staan?

De image zelf zit in de bijlage. Het probleem is dus dat de silhouetten onderaan niet zichtbaar zijn voor de kleinere resoluties...

Dit heef wellicht te maken met het feit dat je afbeelding te groot is voor die resoluties?! Hoe groot is de afbeelding?

background-position:bottom; zal denk ik wel werken.

body {
background-color: #2d2d2d;
background-image: url(../img/bg_fowa.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

Origineel gepost door Stefan Visser

body {
background-color: #2d2d2d;
background-image: url(../img/bg_fowa.jpg);
background-repeat: repeat-x;
background-position: bottom;
}

Als ik dit doe krijg ik enkel de kleur te zien, niet de image.

@Stefan

Hopelijk werk jij niet in al je CSS files op deze manier? Dat is dan een hele waslijst vol met css denk ik dan :)

body {
background: #2d2d2d url('../images/bg_fowa.jpg') repeat-x bottom;
}

@Kevin

Als jij een vaste background wil, dan moet je geen background aan de body geven (deze rekt tevens uit naarmate er meer content is..

Wat een oplossing is voor jou.. is een absolute fixed position geven die aan de bottom zit.. (deze zit altijd vast aan de onderkant, of je nou scrollt of niet.)

Origineel gepost door gast17649

Als jij een vaste background wil, dan moet je geen background aan de body geven (deze rekt tevens uit naarmate er meer content is..

Wat een oplossing is voor jou.. is een absolute fixed position geven die aan de bottom zit.. (deze zit altijd vast aan de onderkant, of je nou scrollt of niet.)

Dus het grijze als repeat bg nemen en de silhouetten als image in een divje. Hoe moet ik deze dan juist aan de bottom zetten?

Alvast bedankt!

Je kan het eventueel ook met jQuery oplossen. Deze plugin geeft automatisch 100% width + height aan je achtergrond afbeelding:

PHP Code:


$(function() {        var theWindow = $(window),     $bg              = $("#bg"),     aspectRatio      = $bg.width() / $bg.height();                                              function resizeBg() {         if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {             $bg             .removeClass()             .addClass('bgheight');         } else {             $bg             .removeClass()             .addClass('bgwidth');         }                                 }                                                theWindow.resize(function() {         resizeBg();     }).trigger("resize");         }); 


In je body zet je dan het volgende:

PHP Code:


<img src="images/background_bestand.jpg" id="bg" alt="title"> 


Nou stel dat je dus een div hebt..
Dan moet je deze een position: absolute; geven... en bottom: 0; (nu staat de div tegen de onderkant aan van je browser)... En ik begrijp dat je het als achtergrond wil gebruiken dus een z-index is ook belangrijk (z-index op 1 zetten en je container dan bijv op 2)

Hopelijk heb je hier wat aan, anders wil ik het nog wel even uitgebreider uitleggen, maar het moet lukken denk ik zo!

Origineel gepost door Huig van der Waal

Je kan het eventueel ook met jQuery oplossen. Deze plugin geeft automatisch 100% width + height aan je achtergrond afbeelding:

PHP Code:


$(function() {        var theWindow = $(window),     $bg              = $("#bg"),     aspectRatio      = $bg.width() / $bg.height();                                              function resizeBg() {         if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {             $bg             .removeClass()             .addClass('bgheight');         } else {             $bg             .removeClass()             .addClass('bgwidth');         }                                 }                                                theWindow.resize(function() {         resizeBg();     }).trigger("resize");         }); 


In je body zet je dan het volgende:

PHP Code:


<img src="images/background_bestand.jpg" id="bg" alt="title"> 


Nog niet zo ver gedacht. Maar toch liever met css want JavaScript staat ook niet bij iedereen aan hé.
Aanvullend bericht:

Origineel gepost door gast17649

Nou stel dat je dus een div hebt..
Dan moet je deze een position: absolute; geven... en bottom: 0; (nu staat de div tegen de onderkant aan van je browser)... En ik begrijp dat je het als achtergrond wil gebruiken dus een z-index is ook belangrijk (z-index op 1 zetten en je container dan bijv op 2)

Hopelijk heb je hier wat aan, anders wil ik het nog wel even uitgebreider uitleggen, maar het moet lukken denk ik zo!

Oké, bedankt! Ik ge dit testen.
Aanvullend bericht:
@gast17649

Het werkt, tnx!