CODEWITHSUNDEEP
htmlcss
NIKNAIZ
NIKNAIZ

Reputation: 59

background-size: cover; makes page scrollable to sides

I am testing out the parallax scrolling effect, in which there is a background picture and by scrolling, you can see different parts of the picture. The problem is, when I zoom out the page, the picture repeats, which is ugly. I have tried no-repeat; and it only makes the picture stay in one corner, and I have tried background-size: cover; which makes the page scrollable to sides which I don't need.

How to deal with this?

EDIT: I'm sorry for forgetting to post the code.

HTML & CSS:

.parallax {
    background: url("http://s1.picswalls.com/wallpapers/2014/02/19/latest-space-wallpaper_110926700_30.jpg") center fixed;
}

.parallax-inner{
    padding-top: 10%;
    padding-bottom: 10%;
}
     <section class="parallax">
    
        <div class="parallax-inner">
      
              <h2>My First Heading</h2>
        </div>
    
    </section>

Example: http://prntscr.com/9jv8d4

Zoomed out: http://prntscr.com/9jv8sd

No-repeat; http://prntscr.com/9jv94p

Cover and on 1920x1080 screen, default 100% zoom; http://prntscr.com/9jv9ur (page is scrollable to the far right side)

Upvotes: 0

Views: 77

Answers (2)

Srinivasan Lakshmanan
Srinivasan Lakshmanan

Reputation: 433

just use 

body{
    margin: 0;
    padding:0;
}

Upvotes: 0

mustafa-elhelbawy
mustafa-elhelbawy

Reputation: 530

try to change your css code to be as following:

body {
    margin: 0;
}
.parallax {
    background: url(latest-space-wallpaper_110926700_30.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.parallax-inner{
    padding-top: 10%;
    padding-bottom: 10%;
}

i tested it on my own and works fine, hope this will help you.

resource will be useful for you: https://css-tricks.com/perfect-full-page-background-image/

Upvotes: 0

Related Questions