> Så altså, bare for at samle tingene sammen, jeg har en body
> baggrund der går vertikalt, og kunne tænke mig en baggrund der
> går horisontalt hen af siden øverst.
Nu kan det kun lade sig gøre at lave én baggrund på <body> og hvis du
vil være frit stillet mht. design, så skal du enten lave et stort
billede som fylder vanvittigt meget eller være kreativ.
Min side et eksempel på, hvordan du kan omgå den begrænsning, der er i
mulighederne for at lave baggrund. Jeg kan desværre ikke tage æren for
teknikken, men det er teknik, du støder på mange steder. Og det giver
dig en idé om, hvordan du kan løse dit problem.
Min side er her:
http://mark.gazel.dk/
I korte træk består den af følgende bokse:
#page
En boks, der omkranser al sidens indhold. Den boks er præcis 950px bred
og centreret i browserens viewport, uanset hvad størrelse browseren
måtte have.
Inde i den ligger:
#header
Sidens sidehovede.
#content og #sidebar
Disse ligger ved siden af hinanden under #header.
#footer
Sidens sidefod.
Det er blokelementerne. Meget standardagtigt.
Baggunden på min 'body' er her:
http://mark.gazel.dk/wp-content/themes/spinme_truecolors/images/bgdown.jpg
En simpel graduering. Den behøver faktisk ikke være mere end 1 pixel
bred. Min css til 'body' ser således ud:
body {
font-size: 62.5%; /* Resets 1em to 10px */
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
background: #25abc9 url('images/bgdown.jpg') repeat-x;
color: #333;
text-align: center;
}
Som du ser i tredje linje, så er der en baggrundsfarve og et
baggrundsbillede, der gentages vandret (repeat-x). Baggrundsfarven
(#25abc9) er præcis den samme, som i de nederste pixels i billedet. Der
hvor gradueringen slutter. Den glider så at sige over i selve sidens
html-baggrundsfarve, som ikke er et billede.
Så har jeg en header med et baggrundsbillede, som ses her:
http://mark.gazel.dk/wp-content/themes/spinme_truecolors/images/header.jpg
Som du ser passer den graduering, der er i baggrunden, perfekt til
gradueringen i body-baggrunden. Når header-baggrunden lægges ovenpå kan
du ikke se, at der faktisk er et billede oven på et andet.
Så er der lavet en midterbaggrund, som kan ses her:
http://mark.gazel.dk/wp-content/themes/spinme_truecolors/images/bg.jpg
Se godt efter for den *er* meget smal, men behøver faktisk ikke være
højere. Den passer perfekt til det nederste af headeren.
Nu bliver det interessant. Den baggrund gentages lodret i #page-boksen:
#page {
background:
url("
http://mark.gazel.dk/wp-content/themes/spinme_truecolors/images/bg.jpg")
repeat-y top; }
Nederst er så #footer, som også har en baggrund:
http://mark.gazel.dk/wp-content/themes/spinme_truecolors/images/footer.jpg
Og denne passer naturligvis til #page-baggrunden, som jo gentages lodret.
Hele dette baggrundspuslespil virker, fordi baggrunden på 'body' ligger
helt nederst. Så kommer #page oven på med en lodret gentaget baggrund.
Header og footer ligger oven på #page og passer perfekt til baggrunden,
hvorfor det ser ud som om, der er ét billede, der ligger bagved det
hele, men i virkeligheden er de fire billeder, der er sat sammen. Og det
er et design, der kan tåle at vokse i både højden og bredden.
Det var en længere smøre. Jeg ved ikke om det gav mening eller det synes
helt banalt, men det er en meget almindelig måde at lave lækker baggrund
på en side, inden for de muligheder, der er rent formatteringsmæssigt i
html/css.
Med venlig hilsen
Mark