Med CSS3 har du mulighed for at lave det der bliver kaldt “Multiple backgrounds” det er også en mulighed i CSS2 i nogle browser som Firefox, Safarie, Chrome og Oprea men ikke IE8 og ældre.
Det første du gør er at lave 3 billedere med følge info.
Top: multiple-background-top.gif ( 100x10px )
Midt: multiple-background-middle.gif ( 100x1px )
Bund: multiple-background-top.gif ( 100x10px )
bemærk at bund og top billedet ikke må have transaperant i sig, da billedet i midten vil være baggrunden.
Prøv at skriv et div tag hvor i du angiver en class med navnet multiple-backgrounds som dette
1
2
3
4
5
| <div class="multiple-backgrounds">
<div class="box-content">
Dit indhold her i boxen.
</div>
</div> |
Næst tilføjer du nu dette til din CSS fil.
1
2
3
4
5
6
7
8
9
10
11
12
13
| .multiple-backgrounds
{
background: url(multiple-background-top.gif) top left no-repeat,
url(multiple-background-bottom.gif) bottom left no-repeat,
url(multiple-background-middle.gif) center left;
width: 100px;
min-height: 250px;
}
.box-content
{
padding: 15px;
} |
Grunden til jeg ligger en padding 15px inden i er fordi at top og bund billederen er hver 10px høj så for ikke at gå i disse top billeder vælger jeg at lave lidt luft og naturligvis også give lidt luft i højer og venstre side.
hvordan du til passe netop din box er nået du selv vælger ;)
Hvis du har evt. kommentar tips/tricks til denne metode høre jeg gerne hvad du har på hjertet.