HTML and CSS Background-image is not showing up
Question
I already double checked my URL, and the name of the files, but I can't seem to get the image showing up. why is it like that? here's my code Take note the
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 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> Our guarantee: at the lounge, we're committed to providing you,
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;
}
4 answers
solution1
4 ACCPTED 2012-01-12 18:25:53
Your CSS looks fine.
Your problem lies in the URL itself. You probably mean:
background-image: url(../images/background.gif);
Since you're using relative paths and your stylesheet is in " stylesheet/ " directory, your code has the browser looking for " stylesheet/images/background.gif " as it's relative to the stylesheet, not the document.
solution2
1 2012-01-12 18:27:18
Try ../ before your URL. Also if you inspect the background-property in firebug you should be able to tell if is actually finding the URL.
.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;
}
If that deosn't work try setting a width and height and display block.
solution3
0 2012-04-28 06:45:52
将高度和宽度提到宽度，以便背景图像出现。
solution4
0 2017-06-23 01:28:16
检查以确保您在 'url' 函数中使用的路径是正确的，然后使用 'background-size' 属性来减小图像的大小，因为过大的图像总是有这种副作用，并且可能使用 'background-position :cover' 在其骗局中传播图像
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.