CODEWITHSUNDEEP
javascriptandroidhtmlcss
Shafi Rpl
Shafi Rpl

Reputation: 81

CSS Background image not showing up in Android device

I am kind of a beginner in web dev, I was making my own website. The website can be accessed here

https://www.shafirpl.com/

The problem is when I load the page on my iPhone(including both chrome and safari) or in desktop environments(such as MacBook) the background image shows up. However, on an android phone (tested with pixel xl and Samsung galaxy s8+) the background image doesn't show up. Which is even more strange is that I used chrome in my iPhone 7 plus, in which the background image loaded up perfectly, but using same chrome browser on pixel xl won't load the background image.

I have included my relevant part of HTML and CSS code. The website is being served using express server(node js), and I used bootstrap as well as my own CSS 

 body{
  background: url(/images/image3.jpg);
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: orange;

}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Shafi</title>

    <!-- This is the google font lato -->
    <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">

    <!-- Bootstrap Cdn -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">



    <!-- This is our own style sheet, we are adding it after bootstrap so that
    it has highest precedence compared to bootstrap, remember
    in css, the one comes late has more precedence -->
    <link rel="stylesheet" href="/stylesheets/homepage.css">

    <!-- Fontawesome cdn -->
    <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">

  </head>

  <body>

    <!-- The navbar -->
    <nav class="navbar navbar-inverse">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Shafi</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- This active class will make the home appear highlighted or active -->
        <li class="active"><a href="/">Home</a></li>
        <li><a href="/about">About Me</a></li>
        <li><a href="/experience">Work Experience</a></li>
        <li><a href="/protfolio">Protfolio</a></li>
        <li><a href="/education">Education</a></li>

      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="/resume" target="_blank"><i class="fas fa-file"></i> My Resume </a></li>
        <li><a href="/contact"><i class="fas fa-envelope"></i> Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>



    <!-- This is for the background image -->
    <div class="container">
      <div class="row">
        <div class="col-lg-12">

          <!-- Centering everything with this div -->
            <div id="content">
              <h1>Hello World! This Is Shafi</h1>
              <h3 class="bolder">Student & Passionate Software Engineer</h3>
              <hr>
              <a href="/about"><button type="button" name="button" class="btn btn-default btn-lg" href="/about"><i class="fa fa-laptop-code"></i> About Me</button></a>

            </div>
        </div>
      </div>
    </div>

    <% include ../partials/footer.ejs %>

Thanks

Upvotes: 1

Views: 5128

Answers (3)

minagawah
minagawah

Reputation: 95

While the problem seems to be solved already, I thought it is worth posting. After spending two days on mine (not working only for Android browsers), turned out it was due to that I was applying background-image to a flex box child. Having another child within the target (now this inner element having background-image) and making their width 100% solved mine. Although it may not be relevant to the question, I wish this may help out someone who's having the same issue. As for another problem on Android browsers, as it is pointed out, background-repeat: no-repeat did the trick as well.

Upvotes: 0

Shafi Rpl
Shafi Rpl

Reputation: 81

After posting the same question in reddit, someone was kind enough to point out that background-size: cover; was the culprit. S/he suggested to add this line to my css

background-repeat: no-repeat;

Which fixed the issue.

The Reddit link is here

https://www.reddit.com/r/learnprogramming/comments/9az8fy/css_background_image_not_showing_up_in_android/?utm_content=full_comments&utm_medium=message&utm_source=reddit&utm_name=frontpage

Thanks for helping me out.

Upvotes: 3

petey
petey

Reputation: 17170

Use quotes un your url:

 body{
  background: url('/images/image3.jpg'); 
  background-size: cover;
  background-position: center;
  font-family: 'Lato', sans-serif;
  color: orange;
 }

Upvotes: 1

Related Questions