Having Brainfart.. Making site look the same on all screen sizes

HTML & CSS
1

Hey all,

I know I am missing something super simple but for some reason today I just cant figure it out. I have done this several times in the past but today it has slipped my mind.

Basically I have 4 images. (bg, header, slogan, link) and I cannot make the page look the same on different screen sizes. You can see what I mean by my screenshots.

I did a “cover” style on the bg so it looks the same on both, I just cannot get the images looking right. I get it perfect on one, it looks bad on the other.

Thanks in advance.

Smaller Screen
http://puu.sh/bWuzk/b5617dba47.jpg

Bigger Screen
http://puu.sh/bWuBt/493776f0ea.jpg

html

<body>

<div class="top"><img src="top.png"></div>

<div class="main">
<div class="saying"><img src="saying.png"></div>

<div class="sign"><a href="#"><img src="sign.png"></a></div>
</div>

CSS

body {
    background:url(bg.jpg)no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    }
    
.main {
    width:1070px;
    height:auto;
    margin:0 auto;
    }
    
.top {
    width:871px;
    height:199px;
    margin:0 auto;
    }
    
.saying {
    width:653px;
    height:179px;
    float:right;

    }
    
.sign {
    width:426px;
    height:233px;
    float:right;
    margin-top:15px;
    }
2

You won’t be able to align elements consistently over a background image at the best of times, but there’s no hope when using something like background-size: cover. It’s just not a very good idea to try this at all on the web. But if you must have it, you’ll have to link the elements more tightly to the background image.