CSS Background-Size and Background-Position Issue
Question
Alright, so I have some issues with an HTML page that I'm coding. The page (so far) only has a table on it that's 700px wide and 50px tall. I want to use a gradient for the background that rises from the bottom of the page to the center of the page (50%).
On my stylesheet, I have the following set under the body tag:
body {
background-image: url('./bg.png');
background-position: bottom;
background-repeat: repeat-x;
background-color: white;
background-size: auto 50%;
}
Unfortunately, background-size counts for how much space is taken up by HTML elements, so the size would be 50% of the height from the top of the page to the bottom of my 50px tall table. So, the background ends up being about 30px tall.
Also, the background does not position itself at the bottom of window. Instead, it positions itself at the end of the page content (at the bottom of my table).
I've been rattling my brain around this for the past few hours. I'm redesigning a website I did a few years ago in hopes of bringing it back (the old design was decent, but the code was pretty messy).
All help would be appreciated. Thanks!
I'm using Chrome v31.0.1650.57 m.
3 answers
solution1
2 2013-11-16 22:32:46
Have you considered using a gradient generator as opposed to an image? It might make your life a little bit easier :) You wont have to worry about repeat/background size, etc
solution2
1 2013-11-16 22:41:19
Your body inherits the size of its only parent element, html , so you have to set the size of both in order to get what you're looking for:
html {
width: 100%; # of the browser window
height: 100%; # of the browser window
}
body {
width: 100%; # of html
height: 100%; # of html
}
Then, as Digiguin said, just use a CSS3 gradient background to get what you want, perhaps like this:
body {
width: 100%;
height: 100%;
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #2989d8 50%, #1e5799 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#ffffff), color-stop(50%,#2989d8), color-stop(100%,#1e5799)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#ffffff 50%,#2989d8 50%,#1e5799 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}
Alternatively, you could set the above styles on html instead of body .
What it looks like:
solution3
0 ACCPTED 2013-11-16 22:42:30
Change it to the <html> background and add height: 100% :
html {
background-image: url('./bg.png');
background-position: bottom;
background-repeat: repeat-x;
background-color: blue;
background-size: auto 50%;
height: 100%;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.