CODEWITHSUNDEEP
htmlcssbackground
asdfkjasdfjk
asdfkjasdfjk

Reputation: 3894

Background image url is not showing the image

I have designed an html css theme. It is not running on any server or localhost. I kept the theme including all its css js files in one directory. Its path is D -> website -> theme.

In the html file I used several images. My html code for image is

 `<img src="images/share.png" class="image-gap">`

This code perfectly show image on the html page. I also need to show a background image and I used this html code

<div class="background-image-holder">
Only some text here. Background of this text should be a small image
<div>

CSS for above html

.background-image-holder{
   background-image: url('images/share.png');
}

Image perfectly show on html page but same image path and image do not show as background image. When I hover over the firebug css background-image it show this message

Failed to load the given url

how can I show this image as background image. And why my present approach is not working? BTW I found some questions on this website but answers are not working for me.

Upvotes: 1

Views: 1941

Answers (2)

Marc B
Marc B

Reputation: 360692

CSS url() are relative to the location of the .css file, not the html file that's loading that css. e.g. If your file is /index.html, and it's loading /css/styles.css, then the background image is going to be accessed as /css/images/share.png

Upvotes: 2

Dr M L M J
Dr M L M J

Reputation: 2397

I think code should be like -

.background-image-holder{
   background-image: url('../images/share.png');
}

Upvotes: 0

Related Questions