CSS 背景图像未显示

Question

Why background image not showing up on page? I have unordered list which contained two background images list items.

 .grid { height: 350px; padding: 20px; background-clip: content-box; background-size: cover; background-position: center; }.small { flex-basis: 30%; }.large { flex-basis: 70%; }

 <ul class="grid"> <li class="small" style="background-image: url(https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg);"></li> <li class="large" style="https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);"></li> </ul>

Answer 1

You need to add background-image: url to your second li for the code to register the URL.

<li class="large" style="background-image: URL(https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);"></li>

Alternatively, I would recommend that you shift your url to your CSS file to make your HTML code neater and more readable.

.small {
  [other css]
  background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");
}

.large {
  [other css]
  background-image: url("https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");
}

Answer 2

You're missing background-image:url() for the second list item.

 .grid { height: 350px; padding: 20px; background-clip: content-box; background-size: cover; background-position: center; }.small { flex-basis: 30%; }.large { flex-basis: 70%; }

 <ul class="grid"> <li class="small" style='background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");'> </li> <li class="large" style='background-image:url("http://placekitten.com/301/301")';></li> </ul>

With code moved to css file:

 .grid { height: 350px; padding: 20px; background-clip: content-box; background-size: cover; background-position: center; }.small { flex-basis: 30%; background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg"); }.large { flex-basis: 70%; background-image: url("http://placekitten.com/301/301"); }

 <ul class="grid"> <li class="small"> </li> <li class="large"></li> </ul>

Answer 3

the URL of the image has to go under " " (quotations). Also, the 2nd item has some syntax errors.

 <li class="small" style="background-image: url("https://thumbs.dreamstime.com/b/spring-flowers-blue-crocuses-drops-water-backgro-background-tracks-rain-113784722.jpg");"></li>

<li class="large" style="background-image: url("https://images.pexels.com/photos/462118/pexels-photo-462118.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500");"></li>