Suncross Posted October 14, 2012 Share Posted October 14, 2012 I seem to be having problems positioning my background image and colors. body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x; } That is the current code. Right there in chrome and firefox, the image "blinder1.png" is normal. However, as we all know, this is just going to repeat across the top of the page from left to right. Whenever I add the following stipulation background-position:bottom; it seems to warp the image to a fraction of its' size, let alone not align to the "bottom" of the page. Using the left, it still warps the image but not as much. The latent function, the image warping, is really not a main issue for me right now. I am really wondering how to properly align my image across the bottom of the page. I have used the search function, and searched for about an hour or more today but I havent seen any documentation anywhere about this happening. Can anyone help? Link to comment Share on other sites More sharing options...
dsonesuk Posted October 14, 2012 Share Posted October 14, 2012 body height is determined by content, with no content, but maybe a break in html code as in <body> </body> instead of <body></body> result in the break being the height of font-size used( if none stated reverts to 16px). therefore you must make html, and body tag the height of browser window, by using height: 100%; body, html {margin:0; padding:0; height:100%;}body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x;background-position: left bottom;} 1 Link to comment Share on other sites More sharing options...
Suncross Posted October 14, 2012 Author Share Posted October 14, 2012 body height is determined by content, with no content, but maybe a break in html code as in <body> </body> instead of <body></body> result in the break being the height of font-size used( if none stated reverts to 16px). therefore you must make html, and body tag the height of browser window, by using height: 100%; body, html {margin:0; padding:0; height:100%;} body{background-color:#8e97a4;background-image:url(wi/bliner1.png);background-repeat:repeat-x;background-position: left bottom;} Sir that worked. Thank you. We learn something new every day. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now