CODEWITHSUNDEEP
csselement
MatTheCat
MatTheCat

Reputation: 18721

background-size doesn't fit element

I've tried to make a background to fit page’s height using CSS3 background-size but it works only for width, but not height.

I intended to make this background image fit 100% of page’s width and height even while breaking its ratio, I don’t see the problem since I use background-size:100% 100%; and

The percentage is relative to the width or height of the area given by 'background-origin'

(Any value for background-origin changes nothing)

I need some hints about why can't I make the background height to fit <body>? And how could I do that?

Here's a part of my css:

html {
    height:100%;
    min-height:100%;
}
body {
    min-height:100%;
    margin:0;
    padding:0 2em;
    background:#474747 url(../images/bg.jpg) 100% 0 no-repeat;
    background-size:100% 100%; /* raaaaaah */
    font-family:Cambria,serif;
    min-width:910px;
    position:relative;
}

Thanks in advance!

EDIT: you can test on http://matthecat.com/v2/blog.html

Upvotes: 0

Views: 1578

Answers (2)

zdkroot
zdkroot

Reputation: 308

I think you are over complicating. I don't know what all the other css code is for. I don't think some those even do anything. 

body {
    background:#474747 url(http://www.cssplay.co.uk/layouts/rabbit.jpg);
    background-size:100% 100%;
}

this code works perfect for me.

I'm not really sure why you would want to do this anyway. There are much better ways to set the background of your page. You could use background-repeat:repeat-y for an bg slice to fill the top portion, and use a gradient image that blends into the bg color (#474747). Or if it is a texture, you could just do a full repeat. What kind of image are you trying to use this with?

Upvotes: 1

Jmoney38
Jmoney38

Reputation: 3304

Check out the source from this page... http://www.cssplay.co.uk/layouts/background.html

Upvotes: 0

Related Questions