With Repeat None, how can i make footer background to fit 100% width

Question

I have one footer div which is 100% and I would like to apply the background in it. The background image width is 1350px, this is the background image

https://dl.dropbox.com/u/69217301/bg.png

As you can see, image is a curve one, so when the screen size is larger than 1350px, my background image will be repeat, but if i set repeat none, it will not fill the 100% as well.

So what I would like to know is, is there some way that I can set a footer background to 100% fill whatever the screen size is and doesn't repeat?

Please kindly help me out. Any solution is acceptable, CSS or Javascript, no matters. Thank you.

score 2 · Accepted Answer · edited May 23 '17 at 10:32

2

Did you try background-position: center? This will make it align to center so if you stretch the page the background image will still be in the middle.

Also: Stretch and scale CSS background

edited May 23 '17 at 10:32

Community

1
1

answered Feb 06 '13 at 02:02

Halcyon

57,230
10
89
128

Hello yes, I do, that solved the problem of repeating. But when the screen is larger than my image, it doesn't work. It repeats awful. – knightrider Feb 06 '13 at 02:04
1

Set `background-repeat: no-repeat` then. – Halcyon Feb 06 '13 at 02:05

score 1 · Answer 2 · answered Feb 06 '13 at 02:04

1

you can use background-size property for this. Write like this:

#footer{
 background-size:100% auto;
 -moz-background-size:100% auto;
 -webkit-background-size:100% auto;
}

Rad this for more http://www.css3.info/preview/background-size/

answered Feb 06 '13 at 02:04

sandeep

91,313
23
137
155

score 1 · Answer 3 · answered Feb 06 '13 at 02:04

1

Stretch the background image to completely fill the content area (CSS3):

div
{
background:url(image.png);
background-size:100% 100%;
background-repeat:no-repeat;
}

answered Feb 06 '13 at 02:04

luke2012

1,724
1
13
20

score 1 · Answer 4 · answered Feb 06 '13 at 04:00

The best way to do this is set the background-size to cover:

CSS:

.cover{
    background-image: url("https://dl.dropbox.com/u/69217301/bg.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 126px;
}

This is hard to see in a jsFiddle because the result window is so small, but if you expand it as much as it will go you can zoom out and get a general idea. Put this on a separate page to really see it in action.

With Repeat None, how can i make footer background to fit 100% width

4 Answers4