Archief - CSS: in de knoei met background

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.
B

Borrrr

Legacy Member
Ik zit een beetje in de problemen met css (ik heb hier 0.0 ervaring mee, en ik heb al menig sites afgeschuimd maar nergens vind ik een antwoord)

situatie gaat alsvolgt:
ik wil een bg krijgen zoals hier: http://borrrr.nimio.info/designbackup/Untitled-1.gif
maar ik weet niet precies hoe ik 2 bg-afbeeldingen moet gebruiken (om het geheel door te laten lopen naar beneden toe en het niet te laten herhalen)
ik heb nu dit: http://borrrr.nimio.info/designbackup/html/slice.html

gebruikte afbeeldingen:
http://borrrr.nimio.info/designbackup/html/img/bg.jpg

http://borrrr.nimio.info/designbackup/html/img/bg_top.jpg

alvast bedankt :)
Z

Zero Grav

Legacy Member
Een afbeelding met een gradient wordt als volgt gemaakt:

background: #kleur url("afbeelding") repeat-x;

Dan maak je je gradient en #kleur is hetzelfde als de onderste kleur van je afbeelding.
B

Borrrr

Legacy Member
welja maar het probleem is dat ik de streep er graag zou in laten blijven, dus dat het niet uitfade naar een kleur
Z

Zero Grav

Legacy Member
2 achtergrondafbeeldingen gaat naar mijn weten niet (mogelijk wel met javascript maar dat is zever).
B

Bram

Legacy Member
nen nieuwen div maken in de achtergrond?
dus iets als

HTML: 
<div id="background">
<div id="container">
blablabla hoop code
</div>
</div>
en dan voor de css
Code: 
body {
background: url(afbeelding van het patroon zonder de streep);
}
div#background {
width: 100%;
height: hoogtevandeafbeeldingmetgradient;
background: url(afbeelding van het patroon met de gradient) repeat-x;
}
div#container {
width: bla;
margin: 0 auto;
......
}

that should do the trick... da gebruik ik toch op m'n eigen site

edit: ah nee, op m'n eigen site doe ik het zo:
HTML: 
<div id="upbg"></div>
<div id="container">
blablabla hoop code
</div>
en voor de css
Code: 
#upbg {
	position: absolute;
	width: 100%;
	height: 200px;
	left: 0;
	top: 0;
	background: url(images/bg2.gif) repeat-x;
	z-index:0;
}
#container {
	position: absolute;
	left: 50%;
	width: 900px;
	margin: 30px -450px; /* schoon int midden zitten, 450 zijnde de helft van 900, de breedte */
	z-index: 1;
}
B

Borrrr

Legacy Member
SveltestSword zei:
nen nieuwen div maken in de achtergrond?
dus iets als
Klik om te vergroten...

werkt perfect! merci! hiervoor nog nooit met divs gewerkt en dat ziet er wel interessant uit
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