PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact

Background repeat vanaf x pixels

Door - Ricardo - op 23-10-2010 16:45
2.335 views
Hallo allemaal,

Ik wil een div maken van bijv. 500 px hoog, met een background repeat-y. Maar in de bovenste 200px van de div moet de background niet komen, wat je normaal kan instellen met background-position, maar met repeat-y wordt hij daarboven natuurlijk ook ge-repeated, wat dus niet de bedoeling is.

Is het uberhaupt mogelijk om dit te bereiken? En zoja, hoe ?

Alvast bedankt!
Ricardo
Marc rc is as
23-10-2010 17:05
Ik denk dat je 2 div's zal moeten maken. Of je moet een div over een div heen laten schuiven. Dat laatste geeft waarschijnlijk wel wat problemen met de verschillen in browsers
Jasper DS
23-10-2010 18:38
maak een div van 200px hoog en een van 300 px hoog , in de laatste repeat je je afbeelding
- Ricardo -
23-10-2010 18:51
PHP jasper op 23/10/2010 18:38:11

maak een div van 200px hoog en een van 300 px hoog , in de laatste repeat je je afbeelding


Als het zo simpel was was ik er zelf ook wel op gekomen :). De div moet 1 blijven. Ik heb het nu inderdaad opgelost door er 2 over elkaar te zetten, maar dat is niet optimaal, met een paar trucjes is het gelukt.

Raar dat er geen andere oplossing is.
Marc rc is as
23-10-2010 19:04 gewijzigd op 23-10-2010 19:07
Als het zo simpel was was ik er zelf ook wel op gekomen :). De div moet 1 blijven. Ik heb het nu inderdaad opgelost door er 2 over elkaar te zetten, maar dat is niet optimaal, met een paar trucjes is het gelukt.

Raar dat er geen andere oplossing is.



Dit kan een oplossing zijn, maar misschien had je die zelf al ontdekt?


<div id="container">
<div id="achtergrond">
<div id="content">Hier komt de content</div>
</div>
</div>


En dit is de css

#container {
padding-top:200px;
}

#achtergrond {
	background-repeat:repeat-y;
	background-image: url(plaatje.jpg);
	height: 300px;
}

#content {
position:relative;
top:-200px;
}


De css is niet compleet, maar het is maar een voorbeeld.
Joakim Broden
24-10-2010 12:12 gewijzigd op 24-10-2010 12:12
begin nou niet te kloten met positions! Waarom zo moeilijk doen,

maak 2 divs (in elkaar).


<div id="content-wrapper">
	<div id="content-inner">
		Hier de content
	</div>
</div>


Op de content-wrapper zet je de repeat afbeelding, en op de content-inner een afbeelding van 200 pixels hoog die position top heeft. en voila

Reageren

Inloggen om te reageren