Spademanns Leksikon:Redigering for øvede/Den med hvordan man fikser et baggrundsbillede

Billeder som baggrund

Lad os starte med begyndelsen:

MediaWiki accepterer ikke ikke propertien background-image i style-taggen.

En ganske almindeligt brugt property har man ekskluderet...og det er jo tit man har lyst til at skrive på billederne...!?

Hvorfor er det vigtigt?!Fordi man kan bruge det som baggrund. Nå men selvfølgelig kan man snyde ved at bruge div-på-div-metoden.

Div-på-div-metoden

Her er mit billede:	Her er min tekst
	Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger forskellige hudpræparater altid har en meget tør hud.

Koden ser så sådan ud:

 <div style="position:relative">[[Billede:Den_lilla_havfrue.jpg|300px]]
 <div style="position:absolute;top:0px;left:0px;width:200px;">
 Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger 
 forskellige hudpræparater altid har en meget tør hud.
 </div>
 </div>

Position:relative

...postionerer din div der hvor du var kommet til i teksten

Position:absolute;top:0px;left:0px;

...positionerer din div der hvor du ønsker den skal være på hele siden eller inden i den anden div.

Pas på med den sidste - hvis den ikke er inden i en position-relativ-div, kommer teksten til at stå oppe i overskriften på siden.

og vupti....

Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger forskellige hudpræparater altid har en meget tør hud.

Du kan nu prøve at ændre på placering af top og left

Centrering af div med position:absolute

Når man laver lagkage på den her måde sker det at man gerne vil kunne centrere sin div.

Man kan ikke bruge align=center i den div som indeholder den centrerede div.

Man kan heller ikke bruge "margin-right:auto;margin-left:auto" fordi man med position jo opgiver en foruddefineret position.

Derfor kan man bruge det her lille trick (Vi bruger her havfruen):

<div style="position:relative;height:500px;">
<div style="position:absolute;top:0px;left:50%;margin-left:-130px;">
[[Billede:Den_lilla_havfrue.jpg|300px]]
<div style="position:absolute;top:0px;left:0px;width:200px:">
Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger 
forskellige hudpræparater altid har en meget tør hud.
</div>
</div>
</div>

giver

Den lilla havfrue er byens grimmeste kælling, som på trods af at hun bruger forskellige hudpræparater altid har en meget tør hud.

Vi indfører en ekstra div med position:absolute, sætter left til 50% og justerer med en negativ margin-left-værdi.