Problems of parallax effect

Published on : April 27, 2026

Author: wahid

Category: Uncategorized

In my last article I described one of the problems when you want to add parallax effect on your website. Today I am going to describe a complex problem when you add parallax effect on your website and try to make it responsive.

Problem: CSS property background image cover does not work on ipad or iphone.
Description
If you follow my last article I think you already understand how to add background images in your website.

Html Code

[sourcecode]
<section id="section1" data-type="background" data-speed="10" class="pages">
</section>
[/sourcecode]

CSS Code

[sourcecode]
#section1 {
background: url(your image source) 50% 0 no-repeat fixed;
min-height: 1000px !important;
height: 1000px !important;
margin: 0 auto !important;
width: 100%;
position: relative !important;
background-size:cover !important;
}
[/sourcecode]

If you follow my CSS code you can see I use background size cover to display my image in full window. You can use also background size 100%.

If you use background size cover it looks good in all browser and android phone except iPad and iPhone.

If you use background size 100% 100% then it looks good. But this property have some problem. Suppose in your iPad vertical view where the window size is 768*1024, your image also display 768*768. Your image does not display on full window.
So what how can I solve this problem.

Solution:
You can use this CSS for 768px width

CSS

[sourcecode]
@media screen and (max-width: 768px) {
#section1 {
background: url(Your image source) no-repeat;
min-height: 1000px !important;
height: 1000px !important;
margin: 0 auto !important;
width: 100%;
max-width: 1920px !important;
position: relative !important;
background-size:100% 100% !important;
min-width:1126px !important;
}
}
[/sourcecode]

Using this CSS you can solve the problem. But if your image become stress then you can fix those issue with min width or you can resize your image for those specific window size and use that image for those specific window size device.