CODEWITHSUNDEEP
htmlcssmobilemobile-website
Krishay R.
Krishay R.

Reputation: 2814

Background image on mobile looks weird

When I'm inspecting the mobile version of my site, on a desktop and changing the width to a mobile device, the homepage image looks good, however, when I am on a real mobile device, the image looks weird, and too big.

How it looks on inspect:

How it looks on a real mobile device:enter image description here

Here is the code for the home page:

#hero {
  width: 100%;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
  background: url("../img/mobilebg.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -webkit-animation:linear infinite alternate;
  -webkit-animation-name: run;
  -webkit-animation-duration: 5s;
  z-index: 3;
}
  <!-- ======= Hero Section ======= -->
  <section id="hero" class="d-flex flex-column justify-content-center">
    <div class="container" data-aos="zoom-in" data-aos-delay="100">
  </section><!-- End Hero -->
How could I fix this issue? Appreciate any help, Thanks

P.S: The site is helpsavetheseas.com

Upvotes: 0

Views: 455

Answers (1)

housam-h
housam-h

Reputation: 26

Try to change the measuring unit of #hero height to px or em instead of vh E.: delete the value fixed from the background property => #hero{height:150em ; background: url(../img/mobilebg.png) no-repeat center center;}

Upvotes: 1

Related Questions