CODEWITHSUNDEEP
htmlcssimagebackground-imagestretch
dannyrizal
dannyrizal

Reputation: 59

stretching background image

I have a background image with size 1x947 px,

the problem is it's a gradient color, so i only use repeat-x, but when the page height over 947 px, it shows it background color,

background-image:url(bg.gif);
background-repeat:repeat-x;

how to stretch it?

enter image description here

here's the code example on fiddle http://jsfiddle.net/K9cUd/1/

Upvotes: 2

Views: 3846

Answers (2)

Arif Burhan
Arif Burhan

Reputation: 505

If you don't want to use percentages use:

    background-size: cover;

Upvotes: 0

Jason Gennaro
Jason Gennaro

Reputation: 34863

Hard to tell without the code or an example.

You could use CSS3's

background-size: 100%;

which should stretch it to the entire page size.

You might need to do

background-size: 0 100%; or background-size: 0% 100%;

so the width does not change.

You can read more here: http://webdesign.about.com/od/styleproperties/p/blspbgsize.htm

And the spec: http://www.w3.org/TR/css3-background/#the-background-size

Upvotes: 5

Related Questions