Jump to content

Suncross

Recommended Posts

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

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;}

  • Like 1
Link to comment
Share on other sites

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...