Background image disappears when viewed on iPhone - html

We are currently copying airbnb.
The top image does not disappear even if I check the responsive view on Mac, but the image disappears when I check it on iPhone.
Tried: I used background-size:cover and tried height:0 and padding-top:60%.
If you know how to fix it, please tell us.

Related

Page not showing correctly on chrome/safari browsers

I am having a problem with a website that I have made.
Whenever i try to open it in Chrome in a low resolution device, the nav bar remains like a 1920x1080 pc, and the loading circle that pop ups when you enter the site is not centered in either chrome or safari.
I Know I am messing up with the CSS but cant figure out how.
My site.
Thanks

Strange line above the background image on mobile devices

I have a problem with the website of my client. On mobile devices, there is a strange line over the background image (background aligned to bottom, repeat-x). On the desktop, everything looks correct. Has anyone met with such a case?
If I delete the background image, the line also disappears. I tried to change the background from png to jpg, but that did not help.
Thank you in advance for any help.
Link to website
Screenshot from mobile device

Logo link issues with browser width lower than 992px

I am experiencing issues with the main logo link when the browser width is lower than 992px. It's working fine above this width.
Link is www.bestkennels.ie . If you visit any page and click the logo it should bring you back to the homepage. It seems only the top part of the logo is clickable. If i inspect in the dev tools i dont see any logo height issues.
I've tested in the latest Mac versions of Chrome and Firefox
Thanks for any advice.
The problem is that div#navbar is covering part of your clickable logo. Its height should not be so large. You should use a margin-top to properly separate the elements instead.

div background image is not showing on scrolling back to div

I'm having very strange problem . I'm making one page website and have different background image for different section and background attachment is fixed. On page reload it show the background image but when I scroll down or up and go back to the section its not showing background image. if I select the page with Ctrl+a then it shows but background image but not fixed anymore. It just happening in chrome. I tried to to find the solution on google and here but could not find it.
Thanks in advance.

Background does not load properly when scrolled with chrome

The following problem only occurs in Google Chrome. Firefox, Opera, Safari and IE are doing fine.
I have a background on my body:
background: url('../../../views/blog/images/achtergrond.png') 50% 0 fixed repeat-x;
Then when I scroll the page and then reload only a part of the image is displayed:
The full image should look like this:
Note: See the actual website
Background loading is working fine in my chrome as well..
The issue may be you stoped the browser loading while image is loading:
Also do this thing:
Make the size of background image more smaller that will help you to download background more easilty and fast..
Right now your background image size is : 1.73MB
That is so huge...
Do this and background will load more fast and will not cause issue in any browser...