How to locate the right url in css to have the backround images
my code here is
background: url('/assets/images/banner/banner1.jpg/') no-repeat;
and this is my local address
H:\xampp\htdocs\web-repo\test\assets\images\banner\banner1.jpg
With a file structure like this:
+--test
+--assets(folder)
+--css(folder)
+--custom(folder)
+--custom.css
+--images(folder)
+--banner(folder)
+--banner1.jpg
index.html
To set the background image from CSS
background: url('../../images/banner/banner1.jpg') no-repeat;
Asuming you index.html is in H:\xampp\htdocs\web-repo\test\index.html
background: url('/assets/images/banner/banner.jpg') no-repeat;
Your file is called banner.jpg and you are referring to banner1.jpg
also you should remove the / from the end.
To be sure your browser is refreshing the cache use Ctrl + F5 to reload.
You can also try the "inspect element" tool in firefox or "inspect" in chrome by doing right click on your index.html. Try editing the css located in your right hand side until you get the right URL for the image. 404 means your URL is not correct.
Related
I have used an image file located on my PC by CSS background-image: URL(img/bg.png); But the browser tries to get the image from css/img/bg.png. How to fix this problem?
Could you try background-image: URL(../img/bg.png) ?
The .. will look for the image one directory up.
I've noticed that most of the websites now "somehow" disable viewing some of the images used in their template, so I'd like to obtain this same result:
I thought instead of using the tag <a>with <img>, I put a div and set the "background" property as an image yet it's still viewable in the browser!!
Any ideas?
This is not disabling the images, this is done by using images as backgrounds in CSS and not as a normal img tag like:<img src="your-image.jpg" />. Here's an example how this is done:
HTML
<div class="randomClass"></div>
And the CSS goes like this:
.randomClass {
background-image: url('http://i.ytimg.com/vi/1WmaBpkGjXk/mqdefault.jpg');
background-color: #cccccc;
width:350px;
height: 180px;
}
On the Jsfiddle link I provided above if you right click on the 1st image you have the option to open the image on a new page or the option to download it. On the second one you don't have this options by right clicking on it, but still these images can be downloaded in other ways.
I am trying to set my site's background image to a local img through CSS. But the code will not let me use a local image, but a non-local internet image is fine. Why is that?
Code:
html {
/* background-image: url("chrome://global/skin/media/imagedoc-darknoise.png"); */
background-image: url("img/diamondPlate_bg.jpg");
}
The bottom image is the one that should show, but it doesn't. but the top image does work. Why?
You have to provide the full image path, as the browser can't determine where to search for.
According to your CSS file path, I will suppose it is at the img directory with your HTML page, you have to change the url as follows:
body {
background: url("../img/diamondPlate_bg.jpg") repeat 0 0;
}
This is like going back one folder and entering the img folder to fetch images.
when my css is located in the root of my website, the background loads fine by adding
background: url(images/main-bg.jpg) repeat;
into the body, but when i move the css into a folder named "css" and re-link the HREF it seems to disappear?
Are you using relative links correctly? If you're moving that .css file into a folder, the new relative path should be
background: url(../images/main-bg.jpg) repeat;
...if the images folder is in the root folder as well.
You can use a debugger like Chrome's developer tools or Firebug to double check if the resource is being loaded correctly.
Try to change path to resource background: url(../images/main-bg.jpg) repeat;
You'll need to update the CSS. The url is relative to the relationship of the CSS to the image (not the document). Try background:url(../images/main-bg.jpg) repeat;
That's because your CSS is now searching for the image in (root)/css/images/main-bg.jpg, you need to use a relative path.
background: url(../images/main-bg.jpg) repeat;
.. means go back one directory.
I have a background image set on a web page with the following CSS:
body, html
{
background-image: url(Content/Images/bg-lounge-2-l.jpg);
background-repeat: repeat;
background-attachment: fixed; /*background-position: 0 -390px;*/
}
This background was visible until late last night, in Firefox and IE, but at some point something changed and it no longer shows in the browsers. It does show in the VS 2008 designer, and the image is in the correct location. If I paste the image url into my address bar, I can view the image. What could be wrong?
Remember that the url to the image is relative to the path to the CSS file, and not the HTML file that loads the CSS file. Also check that you have the correct spelling and capitalization.