CSS Background-Image Path Issues

background images path not working in CSS

In CSS the path is relative to the stylesheet, so make sure you have that correct. Based on the code you posted, your stylesheet would need to be in a folder (e.g. css) and that folder would be at the same directory level as images.

The alternative and generally better option is to use a path that's relative to your domain. So if the images folder is in the root, you would do use url("/images/abc/xyz/bottom-navigation.jpg") (note, it's good practice to put quotes around filenames in CSS).

The other possibility is that there is some kind of problem loading the image. In Firebug you should be able to right click the URL and open the image. Do this and make sure it loads and is showing the correct path.

CSS Background image not loading

here is another image url result..working fine...i'm just put only a image path..please check it..

Fiddel:http://jsfiddle.net/287Kw/

body 
{
background-image: url('http://www.birds.com/wp-content/uploads/home/bird4.jpg');
padding-left: 11em;
padding-right: 20em;
font-family:
Georgia, "Times New Roman",
Times, serif; 
color: red;

}

CSS Background-Image Path Issues

If you have any special characters, they should be escaped, or in the case of white-space, at least quoted, like this:

background-image: url("/Users/myname/Website Project/logo.jpg");

You can see the W3C Spec for the full requirements.

Some characters appearing in an unquoted URI, such as parentheses, commas, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')', '\,'.

SASS// Background Image path issue

If your css file is being built to dist/app.css your image path should be relative to this. Since your img folder is sibling to dist, try url('../img/illustration-main.jpg')

SCSS/CSS background-image url path problem

In a perfect world your URL paths should be absolute, so always starting with / refering to the base path of the domain.

You have:

background-image: url('./../img/coffee.png') no-repeat;

The shape you should be looking for is:

 background-image: url('/folder/img/coffee.png') no-repeat;
                        ^ This lead slash references the base path of the domain.

So, the above example is domain.com/folder/img/coffee.png - you see the leading / is the base the whole URL is based from.

The advantage of this is your SCSS or CSS or image files can be placed in any location in your domain structure.

Absolute Pathing is the key to success!

Example 2:

 background-image: url('/images/tea.png') no-repeat;

Image is located at:

 mydomain.org/images/tea.png 

The location of the SCSS or CSS file is not important, as long as it's on the same domain.

Background image is not showing in html because of path problem

Probably because the stylesheet is located in the /css folder. Remember that the paths in the file are relative to the stylesheet's path. Based on my understanding, your directory structure looks a little like this:

EZ_MOVERS
 │
 ├── css
 │    └── <stylesheet>.css 
 └── images
      └── menu_home_icon.png

So if you want to traverse a directory up and then select the /images sibling folder, use ../images/menu_home_icon.png.

---

Related Topics