Why doesn't my background image display?

Here’s my HTML, and CSS files from CodePen.

http://codepen.io/UnkleBuck/pen/ojbWMG.html
http://codepen.io/UnkleBuck/pen/ojbWMG.css

I’ve tried several variations, and a couple of different jpg files, but I can’t see what’s wrong. I tried the W3C debuggers, as well as Codrops, but didn’t help.

Is that URL correct? If you are using an on-line resource like Codepen, rather than putting code on your own site where the image resides, it will not be found without a full absolute URL path like: http://example.com/images/picture.jpg

are you referring to your BG not showing up on CodePen? If that’s the case, then you need to have your image hosted somewhere, and then use that ABSOLUTE path as the URL in your CSS.

Thanks guys. I realized I didn’t post the image on CodePen, but that was cuz I didn’t see a way to post it there. Having said that, even when I was just trying to make it work on my own PC, where the image was located in the same folder that my Index.html, and main.css files were.

Once again, based on the code that you placed in two codepen files, this is a “working page”. Copy it to a file, give the file a name that ends with .htm or .html and double click to open in your browser.

Your image would not have appeared because one cannot have spaces within a filename unless the full path to or address of the file is surrounded by quote marks, and even then, it can be “iffy”. It is far, far better to give files names without spaces.

Feel free to experiment with this code. Change the width from 500px to 50% as shown in your code.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Tutorial 20 - Background Images</title>
<!--
http://www.sitepoint.com/community/t/why-doesnt-my-bckgrnd-image-display/201720
UnkleBuck
Sep 14,2015 4:00 PM

url(GPL Playing with Geron Davis.jpg);  is not a valid file name.
-->
    <style type="text/css">

div {
    width:500px;
    height:250px;
    background-image:url("http://placehold.it/400x200");
    background-repeat:no-repeat;
    margin:0 auto;
    outline:1px dotted red;  /* TEST Outline */
}

    </style>
</head>
<body>

<div></div>

</body>
</html>

I wondered about the spaces in the file name. Thanks for the confirmation. I finally got thangs working. Can you also clarify for me your formatting.

Noticing that you simply took the data I had in my main.css file, and copied it into the div {} block, and deleted the .css file. It obviously works, but what was your your logic/reasoning? I’m just trying to learn my good habits now, rather than have to break any, and relearn them later. I did take a year of COBOL WAAAY back in mid-80’s on a TRS-80, so I had the “good habits” doctrine whipped into me rather rigorously. It makes sense, even to a rule-breaking jazz drummer like myself.

IMHO having CSS in its own separate file is the “good habit”.

Just that during development it is often easier to have it in the head of the HTML file so you don’t need to have both files open at the same time.

When a test or example file is this small, a single compact “working page” is very commonly used around here and elsewhere for everyone’s convenience.

It’s simple and compact. One would not do that for a full blown web page, although you occasionally DO find some small amount of CSS at the top just like this is written especially while a page is under development.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.