CSS background-image - What is the correct usage

Question

What is the correct usage of the CSS background-image property  The key things I am trying to understand is   Does it need to be in quotes i e   background-image  url  images slides background jpg    Can it be a relative path  as above  or must it be a full URL  Any other points I should be aware of to make sure it works correctly across standards compliant browsers

User · Answer

No you don   t need quotes  Yes you can  But note that relative URLs are resolved from the URL of your stylesheet  Better don   t use quotes  I think there are clients that don   t understand them

User · Answer

Have a look at the respective sitepoint reference pages for background-image and URIs    It does not have to be in quotes but can use them if you like   I think IE5 Mac does not support single quotes   Both relative and absolute is possible  a relative path is relative to the path of the css file

User · Answer

you really don t need quotes if let say use are using the image from your css file it can be    background-image  url your image png jpg etc

User · Answer

1  putting quotes is a good habit  2  it can be relative path for example   background-image  url  images slides background jpg      will look for images folder in the folder from which css is loaded  So if images are in another folder or out of the CSS folder tree you should use absolute path or relative to the root path  starting with     3  you should use complete declaration for background-image to make it behave consistently across standards compliant browsers like   background blue url   images clouds jpg   no-repeat scroll left center

User · Answer

If your images are in a separate directory of your css file and you want the relative path begins from the root of your web site   background-image  url   Images bgi png

User · Answer

You don t need to use quotes and you can use any path you like

User · Answer

Relative paths are fine and quotes aren t necessary  Another thing that can help is to use the  shorthand  background property to specify a background color in case the image doesn t load or isn t available for some reason    elementID       background   000 url images slides background jpg  repeat-x top left      Notice also that you can specify whether the image will repeat and in what direction  if you don t specify  the default is to repeat horizontally and vertically   and also the location of the image relative to its container

User · Answer

The path can either be full or relative  of course if the image is from another domain it must be full    You don t need to use quotes in the URI  the syntax can either be   background-image  url image jpg     Or  background-image  url  image jpg      However  from W3      Some characters appearing in an unquoted URI  such as parentheses  white space characters  single quotes     and double quotes      must be escaped with a backslash so that the resulting URI value is a URI token                So in instances such as these it is either necessary to use quotes or double quotes  or escape the characters

User · Answer

just check the directory structure where exactly image is suppose you have a css folder and images folder outside css folder then you will have to use    images image jpg  and it will work as it did for me just make sure the directory stucture

User · Answer

just write in your css file like bellow  background url  images logo jpg

[css] CSS background-image - What is the correct usage?

Examples related to css