Archief - CSS: dubbel background image

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
E

El_L4mor

Legacy Member
Ik wil in een div 2 background images hebben:
één image die bovenaan de div horizontaal herhaald wordt
één image die in de rest van de div horizontaal en vertikaal herhaald wordt

kan dit met css? en zo ja, hoe? Of moet ik splitsen in 2 divs?
f

frenzal

Legacy Member
was het maar waar :) gaat spitjig genoeg niet dus zal je anders moeten oplossen
g

grooverider

Legacy Member
gaat idd niet, een div binnen een div is hier de oplossing, zou niet zo moeilijk moeten zijn.
E

El_L4mor

Legacy Member
ik probeer het nu als volgt op de lossen:

<div class="1"></div>
<div class="2">Hier komt alle inhoud in.</div>

Div1 heeft al background de image die bovenaan horizontaal herhaald wordt. Deze background image is 100px lang, dus moet de background van Div2 100px naar beneden worden verschoven (gezien div1 en div2 boven elkaar liggen, want de inhoud moet uiteraard over de twee background images lopen). Dit probeer ik op te lossen door:

div.2 {
...
background-image: url(img.jpg);
background-position: 0px 100px;
}

maar er gebeurt echter niets nu :s. Het resultaat is dat div1 (en dus diens achtergrond) niet zichtbaar is, en dat de achtergrond van div2 over de hele layer wordt getoond. Maw de background-position heeft geen effect... Iemand een idee?

ps: ik geef die twee div's ook alletwee een positie, mssn heeft dat er iets mee te maken:

position: absolute;
left: 50%;
margin-left: -301px;
margin-top: 125px;
X

Xavez

Legacy Member
height en width nog instellen ;). Een div wordt standaard maar zo groot als z'n (x)html-inhoud.
E

El_L4mor

Legacy Member
die height heeft er niets aan veranderd :o, even mijn volledige css code posten:

HTML: 
div.content_top {
	width: 602px;
	height: 100px;
	position: absolute;
	left: 50%;
	margin-left: -301px;
	margin-top: 125px;
	background-image: url(content_top.jpg);
}
div.content {
	width: 602px;
	position: absolute;
	left: 50%;
	margin-left: -301px;
	margin-top: 125px;
	background-image: url(content_bg.jpg);
	background-position: 0px 200px;
}


en de code van de pagina zelf


<div class="content_top"></div>
<div class="content">Inhoud<br />
X

Xavez

Legacy Member
Kan je mssn even alles uploaden en de url posten? :). Gracias!
E

El_L4mor

Legacy Member
tis al gelukt ondertussen. Mijn fout was dat ik de twee layers boven elkaar wou zetten. In plaats van dat te doen heb ik nu de ene layer in de andere gezet. Hierdoor zijn de twee layers automatisch even lang als de inhoud. M'n code:

HTML: 
<div class="content_bg">
<div class="content">Hier komt de inhoud</div>
</div>


en de css


div.content_bg {
	width: 602px;
	position: absolute;
	left: 50%;
	margin-left: -301px;
	margin-top: 106px;
	background-image:url(content_bg.jpg);
}
div.content {
	background-image: url(content_top.jpg);
	background-repeat:no-repeat;
}

merci :)
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan