Avatar billede rossoneris Nybegynder
13. oktober 2010 - 17:02 Der er 8 kommentarer

centreret baggrunds billede

Jeg har et baggrundsbillede til min hjemmeside som jeg har placeret i en div, som jeg vil have stående centreret. Og det kan bare ikke lykkes.

Her er min html


<html>

<head>
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>test</title>
</head>

<body>

<div id="wrapper">

<div id="menu">menu</div>

<div id="content">content</div>

</div>

</body>

</html>

min css


#wrapper {
background-position: center center;
background-repeat:no-repeat;
background-image:url(../grafik/baggrund.jpg);
height:937px;
width:1000px; 
}

Billedet er 937px og 1000px. Uanset hvad jeg gør holder billedet sig til venstre.
Avatar billede Slettet bruger
13. oktober 2010 - 17:03 #1
tilføj dette til din wrapper CSS:

margin: 0 auto;
Avatar billede claes57 Ekspert
13. oktober 2010 - 17:11 #2
hvis den skal være øverst/centreret, så
  background-image:url('../grafik/baggrund.jpg');
  background-repeat:no-repeat;
  background-position:center;
  background-position:top;

helt midt på (top/bund og højre/venstre), så
  background-image:url('../grafik/baggrund.jpg');
  background-repeat:no-repeat;
  background-position:center;
Avatar billede rossoneris Nybegynder
13. oktober 2010 - 17:15 #3
hmm - har prøvet forslagene - billedet rykker sig ikke ud af stedet
Avatar billede Slettet bruger
13. oktober 2010 - 17:30 #4
hvis browser vinduet er mindre end 1000px i bredden så vil det stå venstrejusteret.
Avatar billede claes57 Ekspert
13. oktober 2010 - 17:38 #5
kører fint på min med

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title></title>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<style type="text/css">
body {
  background: #e0e0e0;
  text-align: left;
}
#wrapper {
  color:#000000;
  background-color:#C0C0C0;
  background-repeat:no-repeat;
  background-position:center;
  background-image:url(connecting.gif);
height:937px;
width:1000px;
}
</style>
</head>
<body>
<div id="wrapper">

<div id="menu">menu</div>

<div id="content">content</div>

</div>
</body>
</html>

jeg har kun skiftet billede (til en mindre - som jeg har liggende)
Avatar billede Slettet bruger
13. oktober 2010 - 17:47 #6
hvis dit billede har samme størrelse som din div så bør billedet heller ikke rykke sig ud af flækken uanset hvilken justering du vælger.

Med et mindre billede som Claes nævner så vil du kunne se at billedet bliver centeret i div'en.
Avatar billede rossoneris Nybegynder
14. oktober 2010 - 08:02 #7
Hvis jeg vil have en div hvor alt min inhold i hjemmesiden er "pakket" ind i - hvordan får jeg så sat den centreret på siden?
Avatar billede claes57 Ekspert
14. oktober 2010 - 12:43 #8
fx
<body>
<div align="center">
<div style="background-color:#C0C0C0; display:inline; width:100px; height:100px;">
Kurt<br>
Peter
</div>
</div>
</body>

den ydre div centrerer den indre div (det ses på farven) - i den indre div kan du lave dit design.
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester