CODEWITHSUNDEEP
htmlcssbackground-image
Fara
Fara

Reputation: 3

Is there another way to set background image?

I have a problem adding the background-image: url() tag to my code. It doesn't display. I've tried everything, added strings, made it the first in the block but nothing works. Quite frustrating.

The HTML:

<div id="home" class="offset">
      <div class="landing">
        <div class="home-wrap">
          <div class="home-inner"></div>
        </div>
      </div>

The CSS:

.home-inner {
  background-image: url("imgs\04-full.jpg");
  position: relative;
  background-size: cover;
}

Upvotes: 0

Views: 82

Answers (1)

Mat.C
Mat.C

Reputation: 1429

This is happening becouse the div with the background-image attribute has no sizes so it is displayed in the html page but it has width and heght null.

.home-inner {
  background-image: url(https://www.gravatar.com/avatar/062021b6a1aae23a9651e9ab01ec9e36?s=48&d=identicon&r=PG&f=1);
  position: relative;
  background-size: cover;
  width: 500px; /* fixed width */
  height: 500px;  /* fixed height */
}
<div id="home" class="offset">
      <div class="landing">
        <div class="home-wrap">
          <div class="home-inner"></div>
        </div>
      </div>

Try adding some content to it or giving the div some width and height

Upvotes: 2

Related Questions