CODEWITHSUNDEEP
htmlcssangular
Olivia Smith
Olivia Smith

Reputation: 85

putting img in div leads to them dissapearing

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.

Upvotes: 0

Views: 47

Answers (2)

Zak
Zak

Reputation: 7523

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;

Upvotes: 0

Fuzzy
Fuzzy

Reputation: 496

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')
}

Upvotes: 1

Related Questions