I already double checked my URL, and the name of the files, but I can't seem to get the image to show up. Why is it like that? Here's my code (take note the <p>
is inside the body tags, I didn't add the full code, I only added the head and the specific problem).
<html>
<head>
<title>Head First Lounge.</title>
<link type="text/css"
rel="stylesheet"
href="stylesheet/style.css"
media="screen"/>
</head>
<p class = "guarantee">
Our guarantee: at the lounge, we're committed to providing you,
our guest, with an exceptional experience every time you visit.
Whether you're just stopping by to check in on email over an
elixir, or are here for an out-of-the-ordinary dinner, you'll
find our knowledgeable service staff pay attention to every detail.
If you're not fully satisfied, have a Blueberry Bliss Elixir on us.
</p>
And here's the CSS rule for that part
.guarantee{
background-image: url(images/background.gif);
font-family: "Geogia", "Times New Roman", Times, serif;
border-color: black;
border-width: 1px;
border-style: solid;
background-color: #a7cece;
padding: 25px;
margin: 30px;
line-height: 1.9em;
font-style: italic;
color: #444;
}
Try this:
background-image: url(../images/background.gif);
Without the ../
it is looking for an images folder inside your stylesheet folder which does not exist. So you have to go back a directory where the images folder is located.
Edit: You can also shorten up your CSS styles like so:
.guarantee{
background: #a7cece url(../images/background.gif);
border: 1px solid black;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With