How to set the origin width and height for image in `background: url()`?

Question

So I try to use the image like background. But for now I face the problem with dimensions of it. When I try to set the width and height by 100% I got an empty container without image.

Question - how to set image size by it's original width and height in case we do not know the size of the image before upload?

background: url(https://img.com/1000061770.jpg) no-repeat;
background-size: contain;
height: 100%; // not work
width: 100%; // not work

use it as image ... with background-image you cannot – Temani Afif Apr 23 '18 at 13:58 — Temani Afif, Apr 23 '18 at 13:58
The image is not loading, maybe your url is wrong – Luís P. A. Apr 23 '18 at 14:04 — Luís P. A., Apr 23 '18 at 14:04
image link is not real for some reasons – Max Wolfen Apr 23 '18 at 14:08 — Max Wolfen, Apr 23 '18 at 14:08

score 1 · Answer 1 · answered Apr 23 '18 at 14:40

When you set the background of an empty element it wont be seen unless the element has a width and a height

For your question, i would assume you're managing the upload of the images, so from there you can figure out the dimensions of it.

If not

var img = new Image();
img.onload = function() { alert("Width : "+img.width+ " Height : "+img.height); }
img.src = "YOUR IMG URL";

other than that if you're just going to display the image use the img tag

How to set the origin width and height for image in `background: url()`?

1 Answers1