CODEWITHSUNDEEP
htmlcssbackground-image
uohzxela
uohzxela

Reputation: 661

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;
}

Upvotes: 3

Views: 7521

Answers (6)

M61Vulcan
M61Vulcan

Reputation: 337

In the original question he had in his css

background-image: url(C:\Documents and Settings\USER\My Documents\alert.png);

I ran into problems with a gallery page that had images as background thumbnails. Any image filename that had spaces would not appear. It was only the fact that one image happened to have underscores in place of spaces and that did appear that I was able to track it down. As there are spaces in his url, this could be the problem. I fixed my problem by using \ to escape any characters like spaces causing the problem. i.e.

A\ space\ in\ the\ filename.jpg

though this might not work in a Windows pathname! If the image is in the same directory as the script he shouldn't need the full url anyway.

Upvotes: 0

user3073117
user3073117

Reputation: 1

First put your alert.png picture in the same folder as your html file.

Then try this in your CSS file:

body {
     background: orange url("alert.png") no-repeat;
}

I think the problem was the "\" in \alert.png

Good luck!

Upvotes: 0

Kalpesh Patel
Kalpesh Patel

Reputation: 2822

Please check your URL, if possible you can use firebug which is addon of firefox, which will definitely help you, by indicating if image has been loaded or not.

Else another solution would be give height to your alert class as follows

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
  height: /* height of image*/
}

Upvotes: 0

Cody Capella
Cody Capella

Reputation: 142

Another way of doing things is to put your text into a div, and set the image as the div's background image using css, like so:

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

And, for the CSS:

.alert {
     width: 20em; (Width of entire div, which includes text and bg image)
     background-image: url('../alert.png');
     background-color: orange;
     margin: auto;
     padding: 2em;
}

You can see the live JSFiddle example here: http://jsfiddle.net/Cwca22/TdDJY/

Also, in the code above, the background image will tile (repeat) both horizontally and vertically to fill the space of the div. In order to prevent this, you could make the div the same height and width as your background image, or put background-repeat: no-repeat in your css under the .alert class.

Hope this helps and good luck!

Upvotes: 0

Robert
Robert

Reputation: 3074

I would guess it's a permissions issue, regardless you will most likely have problems with the URL being a file reference when you move this to a server, I would recommend moving your image into the same location (or better yet an image folder in the root of your site) as your html file and then modify your css to be this

.alert {
  width: 20em;
  background-image: url('/alert.png'); /* '/images/alert.png' */
  background-color:orange;
  margin: auto;
  padding: 2em;
}

Upvotes: 1

Ramon Saraiva
Ramon Saraiva

Reputation: 518

The url must be a string:

url("C:\Documents and Settings\USER\My Documents\alert.png");

Upvotes: 2

Related Questions