Background repeat vanaf x pixels
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
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.
Quote:
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.
Raar dat er geen andere oplossing is.
Dit kan een oplossing zijn, maar misschien had je die zelf al ontdekt?
Code (php)
1
2
3
4
5
2
3
4
5
<div id="container">
<div id="achtergrond">
<div id="content">Hier komt de content</div>
</div>
</div>
<div id="achtergrond">
<div id="content">Hier komt de content</div>
</div>
</div>
En dit is de css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
#container {
padding-top:200px;
}
#achtergrond {
background-repeat:repeat-y;
background-image: url(plaatje.jpg);
height: 300px;
}
#content {
position:relative;
top:-200px;
}
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.
Gewijzigd op 23/10/2010 19:07:26 door Marc rc is as
maak 2 divs (in elkaar).
Code (php)
1
2
3
4
5
2
3
4
5
<div id="content-wrapper">
<div id="content-inner">
Hier de content
</div>
</div>
<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
Gewijzigd op 24/10/2010 12:12:35 door Joakim Broden