I am newbie with html css and here is my problem.

I want to use url to display an image, and when I used this code (as tutorial), very ok.

<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 a div class, 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 want.

I thougt that when I put the url into the div, it must display the image as the code above ? Could you please help me for this problem ? Thank you very much for your time.

CodePudding user response：

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.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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;
}

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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;
}

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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;