Fixed background ends when scrolling

Question

I have a problem. I want to make a full-page-size background but I always face the same problem:

Here it is

As you can see my page is higher than 100% and when I scroll my background ends.Background is added on div id=wrapper here is a part of my code

HTML (JQ):

<body>
<div id='wrapper'>
    <!--content-->
</div>
<script>
$(document).ready(function() {
    $('#wrapper').fadeIn(1000);
})
</script>

CSS:

html,body {
  height:100%;
}
body {
  min-height: 100%;
}
#wrapper {
    background: url(../bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:100%;
    display:none;
    background-attachment: fixed;
}

I was searching for an answer and read questions in Stackoverflow (f.e. https://stackoverflow.com/a/6654996/3726786 ) but nothing really helped. Thanks for your help!

Hi user, first of all welcome, do you have a Fiddle or link for an example? — dutchsociety, Apr 11 '17 at 07:54
Do you need those `height: 100%` declarations for html, body, #wrapper and `min-height: 100%` for body? If you remove them, it will work. — vbulant, Apr 11 '17 at 08:00
@dutchsociety https://jsfiddle.net/jv0ygnzq/ here :) something like that — user3726786, Apr 11 '17 at 08:01
@vbulant if I remove them, I have white space where my content ends — user3726786, Apr 11 '17 at 08:03
I think I have fixed, thanks, all I did was I set wrappers `height:100%` to `min-height:100%` allowing it to dynamically expand. — user3726786, Apr 11 '17 at 08:11

score 1 · Answer 1 · answered Apr 11 '17 at 08:04

1

In your codes image won't go above 100%, that's because it's already taking height of 100% assigned to body, now you could see scroll-bar at y-axis and that's because you haven't changes the default margin property which is 8px to 0px.

body{
  margin:8px; /*Default margin set that to 0px*/
}

See this two jsFiddle

https://jsfiddle.net/samxrcmz/

https://jsfiddle.net/samxrcmz/1/

answered Apr 11 '17 at 08:04

frnt

8,455
2
22
25

Your solution works, but the like specified in my answer, the ```margin:8px;``` is a default value that varies per browser. – yarwest Apr 11 '17 at 08:06
1

@yarwest might be, but already setting it to 0px get's you same output on other browsers too. – frnt Apr 11 '17 at 08:08
I agree, like I, it works, it is just a specific detail. – yarwest Apr 11 '17 at 08:10

yarwest · Answer 2 · 2017-04-11T08:07:43.883

0

Each browser has it's own default values for margin and padding on various elements. So unless you explicitly set the values there will be default spacing. You can do this for example using the following CSS:

body {
    margin:0;
    padding:0;
}

What's more annoying is that each different browser will have different default values for padding and margin on divs (for example Firefox might have 10px margin and IE may have 8px margin)

It is common practice to reset the values at the top of your stylesheet.

You can do this manually by setting all these values to 0 or you can use something like CSS reset

EDIT: This website does not require you to sign up to a newsletter to get the CSS.

edited Apr 11 '17 at 08:07

answered Apr 11 '17 at 08:01

yarwest

873
8
19

It doesn't really work :/ i use bootstrap so margins and paddings i think are reset, because there is no top margin – user3726786 Apr 11 '17 at 08:05
I tried messing with your fiddle and setting the margin of the body to 0 seemed to work. So the problem does lie in the default values. – yarwest Apr 11 '17 at 08:07
I think I have fixed, thanks, all I did was I set wrappers `height:100%` to `min-height:100%` allowing it to dynamically expand. – user3726786 Apr 11 '17 at 08:09
@user3726786 that does not work in the fiddle that you provided but if it works for you I guess it is alright. For anyone that reads this, setting the ```body { margin:0; }```` is a working solution. – yarwest Apr 11 '17 at 08:12

Fixed background ends when scrolling

2 Answers2