CODEWITHSUNDEEP
htmlcssimageposition
Sypder
Sypder

Reputation: 330

Background image method in CSS

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

Upvotes: 2

Views: 73

Answers (4)

Dweep Panchal
Dweep Panchal

Reputation: 63

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!

Upvotes: 0

Rishab Tyagi
Rishab Tyagi

Reputation: 926

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;

Upvotes: 0

Mac
Mac

Reputation: 131

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

Upvotes: 1

Burak İbrahim &#220;nal
Burak İbrahim &#220;nal

Reputation: 315

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");

Upvotes: 0

Related Questions