0

This is my css that adds images for parallax scrolling. It works fine, but when it comes to the mobile view, the image is showing but not as the responsive full image.

#parallax-world-of-ugg .parallax-two {
    padding-top: 200px;
    padding-bottom: 200px;
    overflow: hidden;
    position: relative;
    width: 100%;
    background-image:url(../img/sri-lanka.jpg);
    background-attachment: fixed;
    background-size: contain;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

This is mt html:

<div id="parallax-world-of-ugg">
    <section>
        <div class="title">
            <h3>Let's Find out about</h3>
            <h1>Trip GO Sri Lanka</h1>
        </div>
    </section>

    <section>
        <div class="parallax-one">
            <h2></h2>
        </div>
    </section>

    <section>
        <div class="block">
            <p>
                <span class="first-character sc">S</span>ri Lanka is a well known
                beauty spot,where people are blindly attracted to visit this
                splendid little island,because of its natural,social,cultural &
                political background.
            </p>
            <p class="line-break margin-top-10"></p>
            <p class="margin-top-10">
                So the Trip Go Sri lanka is here to provide you with all
                Facilities to soothe your journey. We help you to explore all
                natural,cultural, social destination with best hospitality,
                comfort, safety and guidance at the very best based on ECO
                tourism
            </p>
        </div>
    </section>
</div>
wazz
  • 4,953
  • 5
  • 20
  • 34
Danura Selaka Senan
  • 75
  • 1
  • 2
  • 10

3 Answers3

2

I think due to mobile device's significantly smaller screen sizes, default images used in a parallax effect targeting desktops will often be too large in their smaller counterparts, both in terms of dimensions and file size.

One way to fix this is by using Media-Query's and have some smaller versions of your background image.

Use the Media-Query's to change to a smaller size of the background image if the screen becomes smaller than ... pixels for instance.

You would get something like:

@media screen and (max-device-width: 860px){

body{
background-image: url(deepsea_small.jpg);
}
Luca
  • 296
  • 2
  • 19
1

You haven't specified which web browser or operating system you are testing for mobile sized screens.

If, by chance, you are using an iOS device; there is a known issue with iOS devices having trouble displaying images that have both background-attachment: fixed and background-size: cover

caniuse.com cites an existing StackOverflow question as a resource for this:

Background size on iOS

Alex Mulchinock
  • 2,119
  • 1
  • 18
  • 25
0

I found the perfect answer for this matter and thank you for your helping..if you had this problem just visit this link..thank you..

https://inkplant.com/code/responsive-parallax-images

Danura Selaka Senan
  • 75
  • 1
  • 2
  • 10
  • Opened this example up on my phone, and it was definitely not working in mobile safari. – jfunk Apr 29 '20 at 00:58
  • and the sample from your link is not actually parallax. It doesn't work for mobile, and when you size it to desktop, it "works" but the effect is not parallax. – carrabino Oct 05 '20 at 04:38