0

I am having following css

<!DOCTYPE html >
<html>

<head>
<meta charset="utf-8">
<title>Black Goose Bistro Summer Menu</title>
<link href='http://fonts.googleapis.com/css?family=Marko+One' rel='stylesheet' type='text/css'>
<style>
body {

  font-family: Georgia, serif;
  font-size: 100%;
  line-height: 175%;
  margin: 0 15% 0;
  background-image:url(images/bullseye.png);
}
#header {
  margin-top: 0;
  padding: 3em 1em 2em 1em;
  text-align: center;
}

a {
  text-decoration: none;
}

h1 {
  font: bold 1.5em Georgia, serif;
  text-shadow: .1em .1em .2em gray;
}
h2 {
  font-size: 1em;
  text-transform: uppercase;
  letter-spacing: .5em;
  text-align: center;
}
dt {
  font-weight: bold;
}
strong {
  font-style: italic;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#info p {
  font-style: italic;
}
.price {
  font-family: Georgia, serif;
  font-style: italic;
}
p.warning, sup {
  font-size: small;
}
.label {
  font-weight: bold;
  font-variant: small-caps;
  font-style: normal;
}

h2 + p {
  text-align: center;
  font-style: italic;
}
);

</style>
</head>

<body>

<div id="header">
<h1>Black Goose Bistro &bull; Summer Menu</h1>

<div id="info">
<p>Baker's Corner, Seekonk, Massachusetts<br>
<span class="label">Hours: Monday through Thursday:</span> 11 to 9, <span class="label">Friday and Saturday;</span> 11 to midnight</p>
<ul>
<li><a href="#appetizers">Appetizers</a></li>
<li><a href="#entrees">Main Courses</a></li>
<li><a href="#toast">Traditional Toasts</a></li>
<li><a href="#dessert">Dessert Selection</a></li>
</ul>
</div>
</div>

<div id="appetizers">
<h2>Appetizers</h2>
<p>This season, we explore the spicy flavors of the southwest in our appetizer collection.</p>

<dl>
<dt>Black bean purses</dt>
<dd>Spicy black bean and a blend of mexican cheeses wrapped in sheets of phyllo and baked until golden. <span class="price">$3.95</span></dd>

<dt class="newitem">Southwestern napoleons with lump crab &mdash; <strong>new item!</strong></dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$7.95</span></dd>
</dl>
</div>

<div id="entrees">

<h2>Main courses</h2>
<p>Big, bold flavors are the name of the game this summer. Allow us to assist you with finding the perfect wine.</p>


<dl>

<dt class="newitem">Jerk rotisserie chicken with fried plantains &mdash; <strong>new item!</strong></dt>
<dd>Tender chicken slow-roasted on the rotisserie, flavored with spicy and fragrant jerk sauce and served with fried plantains and fresh mango. <strong>Very spicy.</strong> <span class="price">$12.95</span></dd>

<dt>Shrimp sate kebabs with peanut sauce</dt>
<dd>Skewers of shrimp marinated in lemongrass, garlic, and fish sauce then grilled to perfection. Served with spicy peanut sauce and jasmine rice. <span class="price">$12.95</span></dd>

<dt>Grilled skirt steak with mushroom fricasee</dt>
<dd>Flavorful skirt steak marinated in asian flavors grilled as you like it<sup>*</sup>. Served over a blend of sauteed wild mushrooms with a side of blue cheese mashed potatoes. <span class="price">$16.95</span></dd>
</dl>

</div>

<div id="toast">
<h2>Traditional Toasts</h2>
<p>The ultimate comfort food, our traditional toast recipes are adapted from <a href="http://www.gutenberg.org/files/13923/13923-h/13923-h.htm"><cite>The Whitehouse Cookbook</cite></a> published in 1887.</p>

<dl>
<dt>Cream toast</dt>
<dd>Simple cream sauce over highest quality toasted bread, baked daily. <span class="price">$3.95</span></dd>

<dt>Mushroom toast</dt>
<dd>Layers of light lump crab meat, bean and corn salsa, and our handmade flour tortillas. <span class="price">$6.95</span></dd>

<dt>Nun's toast</dt>
<dd>Onions and hard-boiled eggs in a cream sauce over buttered hot toast. <span class="price">$6.95</span></dd>

<dt>Apple toast</dt>
<dd>Sweet, cinnamon stewed apples over delicious buttery grilled bread. <span class="price">$6.95</span></dd>
</dl>
</div>

<div id="dessert">
<h2>Dessert Selection</h2>
<p>Be sure to save room for our desserts, made daily by our own <a href="http://www.jwu.edu/college.aspx?id=19510">Johnson & Wales</a> trained pastry chef.</p>

<dl>
<dt class="newitem">Lemon chiffon cake &mdash; <strong>new item!</strong></dt>
<dd>Light and citrus flavored sponge cake with buttercream frosting as light as a cloud. <span class="price">$2.95</span></dd>

<dt class="newitem">Molten chocolate cake</dt>
<dd>Bubba's special dark chocolate cake with a warm, molten center. Served with or without a splash of almond liqueur. <span class="price">$3.95</span></dd>
</dl>
</div>

<p class="warning"><sup>*</sup> We are required to warn you that undercooked food is a health risk.</p>

</body>
</html>

but the background image does not appear in body tag you can see

  background-image:url(images/bullseye.png);

this html page is bistro.html and the directory in which it is contained there is a folder images and inside images folder I have a file bullseye.png .I expect the png to appear in background.But that does not happen. For sake of question I am posting the image here also

enter image description here

Let me know if the syntax of css wrong? following is image https://i.stack.imgur.com/YUKgg.png

aorcsik
  • 15,271
  • 5
  • 39
  • 49
Registered User
  • 5,173
  • 16
  • 47
  • 73
  • 2
    Link or JSFiddle please. Looks like a path issue at the moment. – Paulie_D Nov 02 '13 at 09:42
  • Do you see the image if you include the HTML `` in the page itself? What about if you link to a known good image for the CSS, for example `background-image:url(http://placekitten.com/200/300);`? Are you sure of your capitalisation of the image file name? – Matt Gibson Nov 02 '13 at 09:50
  • well the image in link http://placekitten.com/200/300 is coming bullseye.png image is not coming but if I place any other image instead of bullseye.png then that comes – Registered User Nov 02 '13 at 13:07

3 Answers3

1

This is probably a path issue and also you're missing ' in the url:

background-image:url('images/bullseye.png');
background-color: #000;

Try accesing just your image using the url: www.yoursite.com/images/bullseye.png to find out if the image path is correct in the url.

Laniakea
  • 894
  • 8
  • 27
0

The image is white and I can't see that you have not specified a background color. Are you sure it isn't loading properly but invisible because its white against white?

EDIT: Try adding a color and see if it helps:

background: black url(images/bullseye.png);

Johan Linder
  • 151
  • 6
0

You just need to change the color of the background just because the color of image is white so it is not displaying on the white page. Change the color of the background #000, #333, #666, #999 etc....

body{background:#333;}
Nitish Thakrar
  • 515
  • 4
  • 16