Grow your CSS skills. Land your dream job.

Background Image Display

  • # July 8, 2008 at 1:55 pm

    This is literally killing me. All sorts of ulcers over this and can’t figure it out. I have a div of content that i want to set a background image to. I can not for the life of me get it to display. I can change the colors just fine so i know i’m working within the correct parameters…or so i think. here’s the css:

    #content {
    width:400px;
    height:342px;
    float:left;
    background:gray;
    background:url("bgimage.jpg");
    border:1px solid blue;
    }

    Another note: Are there certain criteria to be able to shorthand? I’ve even copied examples straight off sites and will not get it to work correctly, but if I list this way above, which is actually the way I prefer for my own sanity, it will not work either. It would just be nice to know why. Obviously a new css user and am loving every bit of it. should have learned this a long time ago. Thanks for your help!!

    pab
    # July 8, 2008 at 2:38 pm

    instead of this

    background:gray;
    background:url("bgimage.jpg");

    Try this
    #content {
    background:url("bgimage.jpg") gray;
    }

    you can also set the position in there.

    not sure if that’s the issue but i hope it helps.

    pab

    ps make sure your image is in the same folder

    # July 8, 2008 at 2:46 pm

    Try this;

    Code:
    #content {
    width:400px;
    height:342px;
    float:left;
    background:gray;
    background: url(bgimage.jpg); ( without the quotes)
    border:1px solid blue;
    }
    # July 8, 2008 at 3:55 pm

    Thanks guys for the quick reply but neither of the codes worked correctly either. I’ll just throw it all out here:

    html

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>no bg image?!?</title>
    </head>
    <body>

    <div id="right">
    <ul>
    <li>list one</li>
    <li>list two</li>
    <li>list three</li>
    </ul>

    </div>
    </body>
    </html>

    css:
    /* RIGHT SECTION */

    #right {
    width:150px;
    height:342px;
    float:left;
    border:1px solid red;
    background:gray;
    background:url("bgimage.jpg");
    }

    Just in case someone could see something else. It is the most cut and dry it could possibly be. I even resized the div to the correct size of the bg pic. Thanks again.

    pab
    # July 8, 2008 at 4:34 pm

    could you post a link to the page?

    # July 8, 2008 at 4:47 pm

    Are you sure that the path to the image is correct?

    # July 8, 2008 at 5:02 pm

    I just downloaded your example exactly and substituted in my own image for bgimage.jpg, and it worked. Tested it in both IE6 and Firefox 3. Random things you may want to check for:

    - Is the path to the image correct? Maybe you made a typo in the name of the image file?

    - Do you have an ad blocker installed? I spent an hour once trying to figure out why I couldn’t get a certain image to show up on a page, even though I was 100% positive I had the path correct, and could even browse directly to it…turned out that it had "ad" in the filename and this was causing my ad blocker to hide it

    - Does this problem happen on both your local computer and on the server, or just one or the other? Maybe your code is correct but you forgot to upload the image, for example

    As an aside, you have two <html> tags, and your two background properties can be combined into one. But I left your code as-is and it worked for me, so neither of those things is causing this.

    # July 8, 2008 at 5:21 pm

    Thanks for all your help and quick responses. I did manage to get it to work….everything (html, css, and image) were all in the same folder to begin with but nevertheless I ended up just saving everything in a seperate folder again and it started working. got to love it.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".