Kevin Powell - Community•2y ago

How to display background image from url

I am unable to display background image with css, my research on the web has been fruitless, seemingly I am using the same markup and stylesheet as in stack overflow posts but it is just not working for me. Can you help me identify the problem? https://codepen.io/FLAMESpl/pen/QWJKgNJ My HTML:

<div class="img" />

<div class="img" />

My stylesheet:

.img {
  width: 100px;
  height: 100px;
  background-image: url("https://www.svgrepo.com/show/452180/chrome.svg");
  background-color: red;
}

.img {
  width: 100px;
  height: 100px;
  background-image: url("https://www.svgrepo.com/show/452180/chrome.svg");
  background-color: red;
}

2 Replies

Chris Bolson•2y ago

you are getting the image, the issue is that it is very large so can't see any of it, especially as the image top-left-hand corner is transparent. Add background-size: cover; to your element to make it fit to the size of the element

FLAMESOP•2y ago

Thank you a million I would never guess it

Gaming

Programming

How to display background image from url