complexe achtergrond voor header

[Baljuin]

Ik zit met een uitdaging waar ik even geen raad mee weet.

Mijn vormgever heeft het volgende gemaakt voor bovenaan de site als achtergrond:

De rest van de website heeft en witte achtergrond.

Maar het bovenste gedeelte moet over de gehele breedte deze achtergrond hebben. Zoals je ziet bestaat het uit 3 lagen (zwart, 2x oranje). Als dat alleen zo was: geen probleem. Gewoon repeat x.

Maar er zit ook een diagonaal lijntje overheen dat bovenin ook nog eens verdwijnt. In photoshop heeft hij het zo gedaan:

• laag met zwarte balk en schaduw
• gradient laag om de strepen te laten verdwijnen
• half gradient witlaag voor de wit oranje waas daaronder
• oranje vlak met diagonale lijn pattern.

Ik weet hoe ik die diagonale lijn kan laten repeaten, maar ik weet niet hoe ik het geheel zo krijg met Div's en CSS moet opbouwen, zodat het over de gehele breedte van de site goed komt. iemand die mij op weg kan helpen? En dat het ook nog eens nette code oplevert?

 

[AndreazZz]

Kan je niet proberen te zorgen dat die afbeelding iets van 2000 pixels breed wordt en dat die automatisch "bijsnijdt" aan de grootte van de viewer?
edit: bedoel je niet dat je een DIV maakt met een achtergrond, en dat je die zo groot maakt als de hele site?
dan krijg je zoiets:

#div
{
position: absolute;
top: 0;
left: 0;
width: BREEDTE WEBSITE;
height: HOOGTE WEBSITE;
z-index: -5;
background-image: url(../IMG/MOEILIJK.jpg) repeat x;
}

 

[csshunter]

Hoi Baljuin,
Als je een tekenprogramma hebt waarin je met laagjes kan werken (en dan een partje van een afbeelding links-rechts boven een andere laag met dezelfde afbeelding kunt schuiven), dan kan je een verticaal strookje maken waarin de lijntjes op elkaar aansluiten.

• Je vormgever kan dat zeker!

Dan ben je verder gered met de repeat-x.

• Test: www.bliksekaters.nl/tests/knipstrook.htm

De nette css hierbij is:

html {
   background: url(images/knipstrook.png) repeat-x;
   }

Mocht er een grens aan de pagina-breedte zitten (in de body of in een #wrapper), waar de afbeelding niet mag komen, dan zet je het bg-img in de body of #wrapper.

• NB: een bg-img in een body met opgegeven breedte loopt als je niets doet toch over de volle breedte van het scherm. Dat kan verholpen worden door de html ook een background(-kleurtje) te geven.

Of moeten de zwarte / oranje banen ook nog in hoogte kunnen variëren (bv. n.a.v. de tekst die er in gemonteerd gaat worden)?
Dat kan ook, maar dan zijn er 2 of 3 images nodig die onafhankelijk van elkaar kunnen opereren, en gekoppeld worden aan de <div>'s waar die inhoud in zit.

Met vriendelijke groet,
CSShunter

 

[Baljuin]

Hartelijk dank allen! Ik ben geholpen. Ik had niet gedacht dat het zo simpel was, dus ging ik te moeilijk denken. Maar idd, Een plaatje die de diagonalen laten aansluiten in herhaling zijn prima te doen. Dacht alleen dat het niet zou lukken en dus niet meer geprobeerd. stomme ik.