Background image url is not showing the image - html

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.

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

I think code should be like -
.background-image-holder{
background-image: url('../images/share.png');
}

Related

How do I add a background image in CSS with the image located in my project file?

I'm new to coding. Currently working on a digital resume. I'd like to add a background image in CSS without using a url. The image is located in my project file.
I have tried to load the image in chrome and I took the url from that to css, but it didn't load. Any help? Thanks
Maybe your CSS file is not in the same directory as your image, you may need to use relative path URL, here I'll show an example:
Example directory arrangement
If your CSS file is inside the css folder, and your image is inside the img folder,
then you need to write your URL in your CSS file this way:
background-image: url("../img/your-background.png");
I'd say it be easiest if you used CSS to add the background image to your HTMl element. You can either use inline styles or create a css class in a separate file that you import in your HTML file.
https://www.w3schools.com/cssref/pr_background-image.asp
An example for this would be:
HTML:
CSS:
Make sure you use the relative path to your image file. Otherwise it will not load.
Otherwise you could use the HTML image tag:
https://www.w3schools.com/tags/tag_img.asp

How to add an image to a navigation bar on a github website

I'm making a GitHub website and wish to add the websites logo as the background image. Currently the code is
body{
<!--some other styling-->
background-image: url(/geekoicon.png)
}
I have the image file uploaded to Github and it isn't in any folders however, if I got to my website nothing shows up. When I tried putting the image in folders and putting the new path a the little icon that replaces a non existent image popped up. Here is the Github project page if that helps https://github.com/Geeko/geeko.github.io
As the image is at the location https://raw.githubusercontent.com/Geeko/geeko.github.io/master/geekoIcon.png your CSS would be like this:
body{
background-image: url(https://raw.githubusercontent.com/Geeko/geeko.github.io/master/geekoIcon.png)
}
Note that the way Github sites work you could also reference it using the shorter URL of https://geeko.github.io/geekoIcon.png

html image will not load on web page

I am having difficulty getting my html image to appear on my web page. My image is in a file folder called images. I am practicing on jsfiddle and notepad and I cant' get the image to appear on either of them. My photo is in an file folder called images. I have tried using and it doesn't work. What step am I missing?

The image in html file does'n show when I use CocoaHTTPServer to share file

I am working on a Wi-Fi-Share app with CocoaHTTPServer. But the image of html background is not shown.
The following screenshots are shown something I did in code.
First I creat a instance of HTTPServe and set the "webPath".
Second I add the html file and image into Xcode .
Third I set the background of website in my html file.
Forth I open the url of serve, everything does well but the image don't show.

background image is not coming from css in joomla 2.5

background image is not coming from css in joomla 2.5 .
I am writing this css code for background image
background-image: url(images/abc-md.jpg);
However if i am trying on my local machine by creating a folder name website and keeping the html code and css in it ,and images are placed in a folder named images which is also kept in side website folder
Please help how i can make images to come from css whether inline or external in joomla
If you are calling background images in your CSS, then the path to the image is relative to the CSS file, not the root of your website.
If I understand things correctly, your images and CSS directories are both at the same level inside your website folder, in which case what you want is:
background-image: url(../images/abc-md.jpg);
Note the ../ in the image path.
Good luck!
Most likely the style sheet you're editing is your template's? In that case, images/abc-md.jpg would be in /templates/your_template/images/ and not in the root.
To make it simple, just add / to the URL of the image:
background-image: url(/images/abc-md.jpg);
If it still doesn't work, give it a go with firebug (or chrome dev tools) and see if the rule is picked up at all (maybe you're using the wrong css selector) and if the image can be loaded and if the container size is large enough to display it and the possibilities are endless, why don't you try the above and let us know some more, i.e. at least your site's address ?