CSS background images not showing up
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>
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> 
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"); } 
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("https://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("https://placekitten.com/301/301"); }<ul class="grid"> <li class="small"> </li> <li class="large"></li> </ul>
