[css / xhtml] Background A repeat-x B repeat-y mogelijk?

[Four]

Ik ben met XHTML en CSS bij de w3 school bezig geweest. Ik ben nu een "test page" aan het maken, maar ik heb het volgende probleem.

Ik heb een background img op X zich laten herhalen. Maar wil nu een 2e bg img zich op Y laten herhalen. Ik begrijp dat dit mogelijk moet zijn, maar kan niet vinden hoe. Ik vermoed dat het mbv marges en images moet gaan werken. Maar ook dat weet ik niet zeker. Het zou ideaal zijn als het gewoon een bg img kan zijn.

En is het eventueel nog mogelijk een vergelijkbaar iets te doen aan de rechter zeide van het scherm? Of moet je dan met img's met bepaalde afmetingen gaan werken (zodat ze samen i.e. 800x600 worden)?

linkjes:
mijn css
mijn test page

[drm]

Kun je even een schetsje laten zien van je probleem? Ik begrijp het niet echt, namelijk

[Four]

Mijn excuses. Het is lastig met text een virtueel probleem te omschrijven.



Ik wil een gradient aan de boven on linker zeides.

Hiervoor gebruik ik momenteel een Background img, waar de top gradient in gebruikt wordt.
Ik plak over de linker boven hoek een img, welk de gradient ook een hoek van 90'' laat nemen. (zie plaatje)

Nou heb ik eigelijk nog in de linker zeide een gradient bg nodig. Om zo een nette gradient van links onder naar rechts boven door te laten stromen

[ Voor 3% gewijzigd door Four op 06-09-2005 12:54 ]

[OnTracK]

Kun je niet een div'je in de hoek positioneren, 100% breed, zoveel pixels hoog en die dan als achtergrond de horizontale background gebruiken. Dan zet je in de body-background de verticale gradient.

[drm]

Wat ik in zo'n geval zou doen is de afbeelding voor de linkerzijde in de body laten repeaten en de afbeelding aan de bovenzijde in een ander element, bijvoorbeeld in een wrapper of in je div#title (wat overigens beter een h1 element kan zijn)

[Verwijderd]

Gebruik anders www.lipsum.com voor voorbeeldtekst

[Four]

OnTracK schreef op dinsdag 06 september 2005 @ 12:57:
Kun je niet een div'je in de hoek positioneren, 100% breed, zoveel pixels hoog en die dan als achtergrond de horizontale background gebruiken. Dan zet je in de body-background de verticale gradient.

drm schreef op dinsdag 06 september 2005 @ 12:58:
Wat ik in zo'n geval zou doen is de afbeelding voor de linkerzijde in de body laten repeaten en de afbeelding aan de bovenzijde in een ander element, bijvoorbeeld in een wrapper of in je div#title (wat overigens beter een h1 element kan zijn)

Volgens mij zegt u beiden het zelfde
Als ik dit goed begrijp, kan ik binnen me div#title een aparte background creeren? En deze weer laten repeaten? Goed plan! dus dit is gewoon binnen me #title een "background-image: url('./img/b.jpg')"
en een "background-repeat: repeat-x;" zetten?

En tevens mijn l.jpg verticaal te laten repeaten?

<edit> lipsum = cool </edit>

[ Voor 5% gewijzigd door Four op 06-09-2005 13:06 ]

[Johnny]

Je bent een ; vergeten achter "background-image: url('./img/l.jpg')"

Maar je kan beter je vertikale achtergrond op de body zetten, want dan weet je zeker dat hij altijd mooi tot aan de onderkant van het venster loopt.

De horizontale achtegrond kan je gewoon op een element zetten dat een breedte van 100% heeft, ik heb hier je #title daarvoor gebruikt:

Cascading Stylesheet:

body 
{
margin:0;
padding:0;
color: black;
background-color: white;
background-image: url('img/l.jpg');
background-repeat:  repeat-y;

font-size: 16px;
}

#title
{
color: blue;
text-align: right
margin:0px;
font-size: 35px;
font-weight: bold;
margin-right: 70px;
background-image: url('img/b.jpg') ;
background-repeat:  repeat-x;
height:120px;
width:100%;
text-align:center;
padding-top: 80px;
padding-left:210px;
}

#frame {
position: absolute;
color: black;
top: 210px;
left:0px;
width:300px;
}

[Four]

Perfect, dank je wel.

Deze kan wel dicht Ik begrijp nou dat je een bg aan een div kan mee geven

<edit>* Four moet nog wel ff de padding na zoeken </edit>

Merci!

[ Voor 33% gewijzigd door Four op 06-09-2005 13:22 ]

[drm]

Je moet nog wel even naar mij luisteren

drm:
(...) of in je div#title (wat overigens beter een h1 element kan zijn)

[Four]

excuses, had ik idd al voor lief genomen, en veranderd in een h1