Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    May 2009
    Posts
    165
    Thanks
    77
    Thanked 1 Time in 1 Post

    Sizing background image

    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.co...ound-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
    Code:
    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

  • #2
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    947
    Thanks
    0
    Thanked 130 Times in 129 Posts
    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%:
    Code:
    body {height:100%}
    makes the body's height being calculated to be 100% of the size of the viewport.

    I guess
    Code:
    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.

  • Users who have thanked Lerura for this post:

    nick2price (05-24-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •