CODEWITHSUNDEEP
htmlcss
Srjk
Srjk

Reputation: 19

`background-image` fails to render on `<body>`

I've been trying to add a background image to the body tag in CSS, but it is not working. I have added the stylesheet which is main.css. I don't know where I went wrong ; it might be a silly mistake, but I can't find it. Please help!

.nav-pills {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  padding-top: 20px;
}

body {
  background-image: url("\images\1.jpg");
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <div class="container-fluid">
    <ul class="nav nav-pills">
      <li class="pull-right">
        <a href="#">CONTACT ME</a>
      </li>
      <li class="pull-right">
        <a href="#">SKILLS</a>
      </li>
      <li class="pull-right">
        <a href="#">ABOUT ME</a>
      </li>
    </ul>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 0

Views: 70

Answers (3)

gyre
gyre

Reputation: 16777

In your CSS, you are using backslashes instead of forward slashes for your URL. It should read:

body {
  background-image: url("/images/1.jpg");
}

Full Code:

.nav-pills {
  font-family: 'PT Sans', sans-serif;
  font-size: 18px;
  padding-top: 20px;
}

body {                                    /* (Fallback for Demo Purposes) */
  background-image: url("/images/1.jpg"), url(http://placehold.it/100/100/);
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Portfolio</title>
  <link rel="stylesheet" type="text/css" href="main.css">
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>

<body>
  <div class="container-fluid">
    <ul class="nav nav-pills">
      <li class="pull-right">
        <a href="#">CONTACT ME</a>
      </li>
      <li class="pull-right">
        <a href="#">SKILLS</a>
      </li>
      <li class="pull-right">
        <a href="#">ABOUT ME</a>
      </li>
    </ul>
  </div>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>

</html>

Upvotes: 2

NARGIS PARWEEN
NARGIS PARWEEN

Reputation: 1596

First try to check from console-element that is your image is getting proper url or not.

  • From there you should verify first

  • Instead of "\" use "/" or can use full url

    body {
  background-image: url("/images/1.jpg");
}

OR

body {
      background-image: url("www.example.com/images/1.jpg");
    }

Upvotes: 0

Syed Muzammil Husain Zaidi
Syed Muzammil Husain Zaidi

Reputation: 9

I am Unable to Comment right Now thats Why writing as an Answer,

you are giving Background Image, First Check What is the Image Size and Then try to give the Width and Height in css Like : 

body{
      background-image: url("\images\1.jpg");
      width: 100%;
      height: 100%;
    }

Upvotes: 0

Related Questions