I cannot seem to get background-image to render anything in css

Question

I have been trying for the last 3 days to get background-image to work in css. I was able to get it to work in the past but I am not sure what is wrong now. At this point I copied a hero image example off of W3C and that didn't work either. I am trying to use background-image to add a header to my page. I do like the hero image idea so I'd like to stick with it.

The first set of code that I used was:

header { background-image: url("banner.jpg"); }

<header>
 <h1>Donald Goines</h1>
</header>

This rendered nothing as far as the picture goes. Donald Goines came up though. I also tried ../images/banner.jpg in the url because I realized that I did place this image in a folder within the original folder. I validated what I had and it came back with no errors.

<body>
<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>
</body>

.hero-image {

  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/banner.jpg");


  height: 50%;


  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

Anything in dev tools (F12)? At a glance, what you have seems accurate enough so I'd check to make sure your banner is in the place the browser is looking for it. — Shadow, Mar 31 '19 at 21:49
I've tested it on my end and the image is displayed. Please share your folder structure and any other CSS code (if any). — glhr, Mar 31 '19 at 21:59

score 0 · Answer 1 · answered Mar 31 '19 at 22:00

0

Make sure that the parent of .hero-image has a height. I'm thinking your element may have no height (assuming the image's path is correct).

answered Mar 31 '19 at 22:00

score 0 · Answer 2 · answered Mar 31 '19 at 22:00

0

Check your folder structure. That could be the reason the images are not pulling through. Without knowing the folder structure, it will be difficult to see if your CSS is correct. See this thread here.

CSS background-image - What is the correct usage?

answered Mar 31 '19 at 22:00

Opatile Kelobang

443
4
8

score 0 · Accepted Answer · answered Mar 31 '19 at 22:01

Here is essentially the code you started with, but with a minimum height of 50vh instead of 50% (50% of 0 is still 0). The reason your h1 content was displaying is that it takes up actual space in the DOM.

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, 0.5)), url("https://images.unsplash.com/photo-1516836554245-938416faa6ee?ixlib=rb-1.2.1&auto=format&fit=crop&w=934&q=80");
  min-height: 50vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>

jsFiddle

score 0 · Answer 4 · answered Mar 31 '19 at 22:06

header {
  background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://www.w3schools.com/w3css/img_lights.jpg");
  height: 50%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

<header>
  <h1>Donald Goines</h1>
</header>

<div class="hero-image">
  <div class="hero-text">
    <h1>Donald Goines</h1>
    <p>Author</p>
  </div>
</div>

score 0 · Answer 5 · answered Mar 31 '19 at 22:20

0

This seems to be issue with path for the image. Try - background-image:url("images/banner.jpg");

answered Mar 31 '19 at 22:20

anujbajaj

1

I cannot seem to get background-image to render anything in css

5 Answers5