putting img in div leads to them dissapearing-CodePudding

For some reason when I tried to make a background and add images to it the images just dissapear.

.Background1{
    position:relative;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    content:url("/assets/backgroundlayer1.jpg")
}
.Background2{
    position:absolute;
    top:35%;
    left:25%;
    height:75%;
    width:50%;
}

<div class="Background1" name="Background1" id="Background">
 <img class="Background2" name="Background2" id="Background" src="/asset/Background2.png">
</div>

Edit: I want background2 to fit on background1.

CodePudding user response：

Use the background-image property instead of the content property. The content property is overiding the content of your div, thus removing the image.

.Background1{
    position:relative;
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    background-image:url('/assets/backgroundlayer1.jpg')
}

CodePudding user response：

You have two things wrong .. You are calling the background image with content when you should be using the background property.

CONTENT PROPORTY

BACKGROUND PROPERTY

The second, you're trying to assign a height percentage where it is not allowed (the element is relative).. You need absolute definition (px or pt for example):

.Background1{
    position:relative;
    top:0%;
    left:0%;
    height:600px;
    width:100%;
    background:url("/assets/backgroundlayer1.jpg") no-repeat;