Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background-image not appearing

I'm new to HTML and CSS in general. Please help me with the code. I cannot get the background-image to appear in my browser although i typed the syntax correctly. All i get is an orange box, with no alert.png image. I'm following an online tutorial btw: http://dev.opera.com/articles/view/31-css-background-images/#thecode

Edit 1: The image, html file and css file are all inside the same folder. Yet no success.

Edit 2: I used an unique css file name instead of a generic "style.css" (which i have several of them in my system) and it worked! Make sure there's no space between url and the parenthesis.

HTMl code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <meta http-equiv="Content-Type" content="text/html; 
        charset=utf-8">
        <title>alert message</title>
    </head>

    <body>
<p class="alert">
  <strong>Alert!</strong> 
    This is an alert message.
</p>
    </body>
</html>

CSS code:

.alert {
width: 20em;
background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);
background-color:orange;
margin: auto;
padding: 2em;
}
like image 203
uohzxela Avatar asked Jan 24 '26 12:01

uohzxela


1 Answers

The url must be a string:

url("C:\Documents and Settings\USER\My Documents\alert.png");
like image 70
Ramon Saraiva Avatar answered Jan 26 '26 02:01

Ramon Saraiva