Background image method in CSS

user_13372814 0
Viewed 59

Why is'nt the image appearing on my webpage? Can anyone explain me how it works and its solution please? 

HTML:
<div class="bg-image"></div>

CSS:
.bg-image {
background-image:url("photo1.jpeg");
width: 400px;
height: 600px;
background-size: cover;
background-repeat: no-repeat;
}
position css image html
4 Answers

Remove background-size: cover; from your css. This should fix it

user_107484160

i think your image location and pictures are at same folder and can you try this Css code?

background-image: url("../photo1.jpeg");

If you use folder add them after .// like that.

background-image: url("../images/photo1.jpeg");
user_84456850

If your image is in same folder then try this:

background-image: url("./photo1.jpeg");

If not then this: 

background-image: url("../folder1/folder2/photo1.jpeg");

And make sure that there is no typo or extension error!

user_91334840

You could also do it with img src as

<div class="bg-image"><img src="photo1.jpg"></div>

or you can simply do it with:

background: url('photo1.jpg') cover no-repeat;
user_132989000
Related