I am using the following css to display a background image on a page. However, all I get is a blank white background instead. I've been googling around, but can't figure out what is wrong with what I'm doing... any suggestions?
background: url(/resources/images/main_tree.png) no-repeat;
<link rel="stylesheet" type="text/css" href="resources/css/main.css">
<li><a href="gv_about.html">About Us</a></li>
<li><a href="gv_contact.html">Contact Us</a></li>
1) If you copy paste the image URL into your browser does the image display?
2) Encase the CSS class image reference in single quotes.
3) Check your referencing, you're referencing the image from the root as
<root>/resources/images/main_tree.png in the CSS but the HTML page is asking for a relative
resources/css/main.css CSS file, everything should be root referenced (so all addresses on the page should start with a
4) Check no other classes or CSS rules are being applied to the
<body> element and are "overwriting" your background.
5) Try using
background-image rather than the background shorthand. But remember to put the no-repeat in a new property:-
background-image: url('/resources/images/main_tree.png'); background-repeat: no-repeat;