dynamic background

[jeel2008]

hoe kan ik in css een dynamic background maken?
ik denk aan een layer waar ie in moet, want ik wil er ook nog tekst overheen zetten.
dus dat wordt iets van layer (van de background) en daarop een layer (van de content) neem ik aan.
maar de image in de background is nu 800 bij 600. echter, iemand die een veel groter scherm heeft, moet de background image ook helemaal uitgevuld zien.

ik snap eigenlijk niet dat dit niet werkt:

#apDiv1 {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	background-image: url(plaatje.jpg);
	margin-top: 0px;
	margin-left: 0px;
	background-repeat: no-repeat;
	text-align: center;
	vertical-align: top;
}

en daarop zou dan de tekstlaag moeten komen

maar ik heb plots wel een vermoeden dat het niet werkt: mn plaatje is maar 800 bij 600 dus 100% blijft 800 bij 600
oplossing zou zijn een plaatje in te laden van bijvoorbeeld 1200 bij 1000 zodat je alle schermresoluties wel denkt
maar kan dat niet anders.

de vraag is dan:
kun je de css niet zeggen: ik heb een plaatje van 800 bij 600 maar als iemand een beeldscherm van 1200 bij 1000 heeft, maak het dan schermvullend!?

 

[csshunter]

Ja, dat kan wel, maar niet als je plaatje een achtergrond-img is. Daarvan kan je namelijk het formaat niet met css beïnvloeden.

Je kan het plaatje (met id="rekhem") in een laag als voorgrond-image zetten. Dan gaat #rekhem {width: 100%;} het plaatje tot 100% schermbreedte uitrekken. Géén hoogte opgeven: dan wordt deze automatisch meegeschaald, en blijven de verhoudingen kloppen.

Vervolgens moet er een laag overheen gezet worden waar de content in komt.
Maar het schalen van een image door browsers geeft matige kwaliteit van de vergroting/verkleining, want ze zijn daar niet echt voor gemaakt (zoals tekenprogramma's).
Wat ook uitkijken is bij deze methode, is dat bij een bepaalde resolutie de tekst niet uit de achtergrond gaat lopen.
Vaak kan je beter een herhaling van de achtergrondafbeelding plaatsen, of een kleurtje aan de zijkant, of een andere oplossing zoeken: want het is in de praktijk erg lastig in de hand te houden.

Met vriendelijke groet,
CSShunter

 

[jeel2008]

rekhem

ok, bedankt.

 

[Naarling]

Ja, dat kan wel, maar niet als je plaatje een achtergrond-img is. Daarvan kan je namelijk het formaat niet met css beïnvloeden.

Tegenwoordig, met CSS3, kan dat wel (zie ook artikel) Maar ja, dat werkt uiteraard weer niet in IE dus de door jou aangegeven methode is helaas nog praktischer.