Totem Totem - 5 months ago 5x
HTML Question

My CSS background image is not showing

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?


#home_body {
background: url(/resources/images/main_tree.png) no-repeat;


<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="resources/css/main.css">
<body id="home_body">
<h1 class="main_heading">Welcome</h1>

<div id="home_nav">
<ul id="main_menu">
<li><a href="gv_shop.html">Shop</a></li>
<li><a href="gv_gallery.html">Gallery</a></li>
<li><a href="gv_about.html">About Us</a></li>
<li><a href="gv_news.html">News</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;