Positioning - Why does it mess up the resolution?

StackOverflow https://stackoverflow.com/questions/21687596

  •  09-10-2022
  •  | 
  •  

Domanda

I've tried changing the pixels to percentages and nothing seems to work. If I make it in 1920x1080 and then switch to a lower resolution the website looks all cluttered and weird.

Here's the CSS code:

body
{
    margin: 0px;
    padding: 0px;
    background: url("images/Background.png")
}

#header
{
    position: absolute;
    top: -160;
    left: 420;
    right: 0;
}

.headerImage1 
{
    margin: 0px;
    padding: 0px;
    position: absolute;
    width:100%;
    height:100%;
    background-repeat:no-repeat;
}

Here is what it looks like on a different resolution: (The correct way would be centered)

http://puu.sh/6RgHg.jpg

EDIT: HTML part:

<body>
<div id="header">
    <div class="headerImage1">
        <img src="images/Header.png">
    </div>
È stato utile?

Soluzione

I think it's cause your ratio gets off when you use:

width:100%;
height:100%;

Try this instead:

width: 100%;
height: auto;

That way the ration doesn't mess up, if you want the background to not mess up, try this:

background: url("images/Background.png") no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

EDIT:

If you mean centering the image, absolute poitioning is the absolute size of the browser, the full screen. While relative is the current position of the brower. I would use relative for cross-device purposes.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top