Title says most of it. I have a div container that holds all the site divs, and a background. I'm just trying to make the background "stretch" correctly if you take the screen out of max or if it is on a different monitor size/pixels (there is a computer at work that doesn't fill the screen, but my widescreen and MOST others it does). Also, if you take out of max screen it cuts off parts of the site, and I don't know why.
Relevant CSS:
body {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
text-decoration: none;
color: lightsteelblue;
font-size: 14px;
background-image: url("../images/hardcoregames-bg-final.png");
-webkit-background-size: 100%; /*for webKit*/
-moz-background-size: 100%; /*Mozilla*/
-o-background-size: 100%; /*opera*/
background-size: 100%; /*generic*/
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
}
#maindiv {
position: relative;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
#navigation {
position: absolute;
top: 50px;
/*left: 360px;
margin: 0px;*/
left: 50%;
margin-left: -325px;
z-index: 10000;
width: 650px;
height: 100px;
padding: 50px 20px;
background-color: transparent;
float: left;
}
And my markup is simple:
<body>
<div id="maindiv">
<div id="navigation">
<img src="images/hardcoregames-logo1.png"></img>
</div>
<div id="other divs just like navigation but positioned in different spots">
stuff
</div>
</div>
<body>
to see it in action: Site I've tried using 100% for both width and height in background-size, but that made it worse with height not on auto. I've tried putting the main div as absolute. I've tried using background-size to cover. To add, I've seen other things on here for this, but none of the ideas I've read worked so far, and I don't want the background fixed, the image is as large as the main page is so I want it that way.
P.S. Please as a reminder the "maindiv" is also being cut when getting out of maximize screen on IE at least as well. I added that issue with the background one because I think they both have to do with my width/height, but then again I really don't know. The code I posted works correctly, until you size the screen small enough, then scroll right. Also in about the same size IE screen, you can't go all the way left on the site anymore, its cut off.
Images showing scrolled all the way right and left. Scrolled right, it cuts off a good 1/3 of the page. Scrolled right, the bg doesn't fill in all the way and it looks dumb. pics
This setup is what fixed the "cut off" of the web page when taking out of maximum screen. Fixed Thanks @Mr. Alien
For the background; on my research, and should have been obvious, you can't "dynamically" change the background as the person changes the window size of, say, IE in just CSS. This fixed the background to work per initial screen size as far as I can see.
html, body {
height: 100%;
width: 100%;
background-image: url("../images/hardcoregames-bg-final.png");
-webkit-background-size: 100% auto; /*for webKit*/
-moz-background-size: 100% auto; /*Mozilla*/
-o-background-size: 100% auto; /*opera*/
background-size: 100% auto; /*generic*/
background-repeat: no-repeat;
background-position: top left;
background-color: #222;
}
If I'm wrong on this, please correct me. But the best I can get it to do is size the background initially and that's it. I suppose some javascript or, better yet, jquery can fix this as it's an issue with it working dynamically. I'll keep this answer open for now and comment please if I'm wrong. Don't want the wrong message going out.