...

View Full Version : Sizing background image



nick2price
05-23-2012, 07:54 PM
I have decided to try a different approach to what I attempted before. I have a website design which is made up of a single image with like a center container for the content, a bit like http://sonofamortician.deviantart.com/art/web-background-120471137 My design is more complicated than that image, but just like in that image, most of the content will be within the center square.

At this moment in time, I am just positioning the background image on the page. I am using the following css

body {
-webkit-font-smoothing:antialiased;
background:#efefef url(images/bground.png) top center no-repeat;
color:#404040;
font-family: "Arimo", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:1.5em;
text-rendering:optimizeLegibility;
}

When I use the above css, it displays my image as the background. The problem I have is that the width of set image is perfect, however the height cuts some of the image off at the bottom. I have a responsive layout which should automatically size the background image to the resolution. As i say, this is working on the width, but not on the height. If I try setting the background-size to 100% 100%, once again the width is perfect, but this time the height is to short. The original image has a dimension of 1417x1490 px.

Am I missing something obvious here?

Cheers

Nick

Lerura
05-24-2012, 03:40 AM
Though the backgroundimage by default will cover the entire wievport, it's size is only calculated to what is needed to render it's content, and nothing more.
So if your document contains only an image e.g. sized 100x100, the the body's size would be calculated as 100px high.
unless you have specified a height of the body.

setting the height of the body to 100%:

body {height:100%}
makes the body's height being calculated to be 100% of the size of the viewport.

I guess
body {
height:100%;
-webkit-font-smoothing:antialiased;
background:#efefef url(images/bground.png);
background-size:100% 100%;
color:#404040;
font-family: "Arimo", Helvetica, Arial, sans-serif;
font-size:14px;
line-height:1.5em;
text-rendering:optimizeLegibility;
}
would solve your problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum