CODEWITHSUNDEEP
htmlcss
user3726786
user3726786

Reputation: 9

Fixed background ends when scrolling

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!

Upvotes: 0

Views: 223

Answers (2)

yarwest
yarwest

Reputation: 990

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.

Upvotes: 0

frnt
frnt

Reputation: 8795

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/

Upvotes: 1

Related Questions