background doesn't stretch

Question

I have a jsfiddle included. This is really just fooling around, but i can't get this background to stretch the entire viewport. I think it has to do with the background being 1000px wide stated in the jQuery script, which would make sense. But setting the divs to 100% w/h is not working to stretch that image.

jsfiddle

Just a heads up: there is basically a large gradient i want that is scrolling the page and restarting (the jquery does that) and there is an overlay on top of it that gives it a nice effect.

Div overlay is quite simple:

<div id="wrapper">
    <div id="container">
        <div id="overlay" class="png-fix">
        </div>
    </div>
</div>

Thanks a lot crowd!

Upload images to some hosting and correct links to images in your code. — Sharikov Vladislav, Apr 26 '14 at 21:56

score 1 · Accepted Answer · edited May 23 '17 at 12:05

1

Please check Background images: how to fill whole div if image is small and vice versa

There are a lot of ways to do this. I recommend you research before asking a question.

edited May 23 '17 at 12:05

Community

1
1

answered Apr 26 '14 at 21:59

Hozikimaru

1,144
1
9
20

Embarrassing really lol. So easy i knew the answer, i need sleep. Thanks for the help.. – Corey Apr 26 '14 at 22:09

score 0 · Answer 2 · answered Apr 26 '14 at 22:19

0

This is also a simple and dynamic solution:

background: url(yourimagepath) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

answered Apr 26 '14 at 22:19

Steven Vanden Broucke

139
6

background doesn't stretch

2 Answers2