Altijd centreren van backgound-image (Header)

donderdag 3 maart 2011 17:05

Acties:

0 Henk 'm!

Topicstarter

Dag iedereen,
Ik ben bezig met een site te maken maar nu stoot ik op het probleem van "altijd" centreren.
Ik heb al van alles geprobeerd en ge-googled maar geen succes.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>

<div id="header_img"></div>

</body>
</html>

Cascading Stylesheet:

#header_img{    
    width: 1600px; 
    height: 224px;
    background: url("img/header.png") no-repeat center;
    background-position:center;

}

body{
    background-color:#020026;
    margin: 0px; 
    padding:0px;
}

Dus als ik mijn scherm resize moet deze in het midden, blijven maar volledig tegen de top vanboven.
Om dit te controleren verander ik altijd de size van de pagina in firefox.

Een voorbeeld is bv. deze pagina. Alles blijf lekker mooi in het midden.

Wie-o-wie kan me helpen ?

donderdag 3 maart 2011 17:07

Acties:

0 Henk 'm!

posttoast

Dit is wel heel basic en het verbaast me dat je niets kunt vinden. Je moet je header_img een vaste breedte geven en vervolgens een auto-margin op links en rechts.

omniscale.nl

donderdag 3 maart 2011 17:17

Acties:

0 Henk 'm!

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

Css
Html

Als je code post, gebruikt dan code tags a.u.b. in plaats van [q]

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 3 maart 2011 17:25

Acties:

0 Henk 'm!

glenn123

Topicstarter

posttoast schreef op donderdag 03 maart 2011 @ 17:07:
Dit is wel heel basic en het verbaast me dat je niets kunt vinden. Je moet je header_img een vaste breedte geven en vervolgens een auto-margin op links en rechts.

Enorme dank.
De vaste grootte van de image had ik.
Op die margin-left : auto; & margin-right : auto; was ik niet gekomen.
Had wel al met 50% gewerkt maar was niet wat ik wou.

Solved dus !

vrijdag 4 maart 2011 09:45

Acties:

0 Henk 'm!

danslo

Hier stond niks.

[ Voor 96% gewijzigd door danslo op 04-03-2011 09:46 ]

Onderwerpen