Alright, so few days ago I had to set up the big background to my xhtml page. As always I put this code:
body {
background: url('img/bg_body.jpg') no-repeat top center;
display: table;
width: 100%;
}
And what I've noticed, that if I scale the window of browser to the smaller width then a wrapper, wchih is 950px, my background is moving and spoils all the design. I've searched about this issue and suprisingly there was no way to manage this. This tutorial also did not help me, nor this one "Large CSS background moves on resize, in IE 8". I figured, there must be a way to manage this hell. After about hour of tests I finally found an answer, how to set the large (1920px wide) background to the page that is centered and stays in the same position no matter the size of window browser.
First, do not style the background in your body tag nor the html tag. This will not do the job. After body tag in your xhtml file put a div with some id (eg. container), like this:
Now as for style for this one just put a code:
#container {
background: url('img/bg_body.jpg') no-repeat top center;
display: table;
width: 100%;
min-height: your height;
}
This is the accurate way to accomplish the purpose you want.
As far as the content just put a div inside the container div and style it as always:
#wrapper {
width: 950px;
margin: 0 auto;
}
That's all. I've checked this solution in FF, Opera, Safari, IE8, Chrome. Works like charm :)
Website is pretty cool
Website is pretty cool looking, I wasted some time here reading and looking around
Cool webpage you have got
Cool webpage you have got there.
Lovely Site, Thx! Maintain
Lovely Site, Thx! Maintain the great work.
Fantastic Webpage, Keep up
Fantastic Webpage, Keep up the very good job. thnx.
Great Web page, Continue the
Great Web page, Continue the great work. thnx.
Lovely Website, Thx! Keep up
Lovely Website, Thx! Keep up the great work.
Post new comment