A problem when adding a photo using a URL in a div class

user_17023784 0
Viewed 85

I am a newbie with HTML and CSS and here is my problem.

I want to use a URL to display an image, and when I used this code (from a tutorial), it's absolutely perfect.

<img src="https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png">

But I want to use a div class to put it into the div, and here is my code:

<div class="main_product-img" style="background-image: url(https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png);"></div>

But when I ran it, it did not display the image as I wanted.

I thought that when I put the URL into the div, it must display the image as the code above?

Could you please help me with this problem?

css html
5 Answers

An Img tag "push" your parent to have room to display the image you want to display. If you use CSS background image, then, the browser do not take care of the size of your image. So you div is actually 0px height and 0px width. So you see nothing, but your background is correctly applied.

Try this:

<div class="main_product-img" style="height: 100px;background-image: url(https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png);"></div>

or this:

<div class="main_product-img" style="background-image: url(https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png);">Hello<br/>text making room<br/>to see the <br/>background image</div>

and you will see your image.

user_54928990

Your div contains nothing so its size is zero. You can set a height to it:

.main_product-img {
  height:200px;
  width:200px;
  background-size: contain;
}
<div class="main_product-img" style="background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');"></div>

But I think using the <img>tag in your case is a better solution.

user_52086060

You forgot your ' in your URL. Also, you have to defy the width and height of the background in order for your image to know what areas to cover. In this example, I added width: 100vw and height: 100vh;

.main_product-img {
  width: 100vw;
  height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
<div class="main_product-img" style="background-image: url('https://myphamohui.com/wp-content/uploads/2019/07/sua-mat-ohui-prime-advancer.png');"></div>

user_164963570

Your div needs to have some height and some width. You can get this height and width by setting it manually or by setting some content in to the div.

<div class="main_product-img" style="background-image: url(URL_HERE)"></div>

Here is example CSS for this div. I'm not saying that you should use this but you can test it with this CSS.

.main_product-img {
    width: 50%;
    height: 50vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
user_49135620

The thing is that your code does not have a width & height.

Add the width: ; and height: ; in your style="" attribute.

Example:

div {
  background-image: url('https://www.cnet.com/a/img/A7dqrTMGYMYoYMzmC1cvYA--how=/940x0/2018/09/20/62c32a15-d2f7-45ae-9caf-7a94a16c4b94/burningmandoodle.jpg');
  width: 1920px;
  height: 1920px;
}

Plus, you need to give your quotes (single or double) before the URL

And if you do not want your background to not repeat then add this to your style attribute: background-repeat: no-repeat;

user_147479140
Related