Skip navigation
Currently Being Moderated

What is the Proper Way to place a Background Image inside a Div?

Aug 2, 2012 11:27 AM

Tags: #background #div #css #styles #stylesheet

I have been searching Google and the Adobe forums for awhile now, and while there are very valid solutions to similar problems I found that none of them fixed the problem that I am facing. I blame myself and getting lost in this sloppy coding of mine, so part of my plan was to start my style sheet over from scratch.


My question, what is the proper way to add a background image into a div? I currently have the top div following the "header" css style, here is what I have typed into that sections:


<style type="text/css">


@import url("../twoColLiqLtHdr.css");


.header {

    width: 1000px;

    height: 300px;

    background-image: url(Assets/HeaderTemplate.png);

    background-repeat: no-repeat;

    background-position: center;



The problem here is that the background image isn't even appearing. I would greatly appreciate any help, could anyone inform me on the proper way to doing this so that I can implement images in divs in the future without turning my coding in a down right mess?


Thank you in advance.

  • Currently Being Moderated
    Aug 2, 2012 11:34 AM   in reply to Hyde1216

    Probably a bad path.  But it could be an image problem. Hard to know for sure without a link to your page.



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 11:51 AM   in reply to Hyde1216

    That doesn't help but I agree with Nancy it's a path problem.


    From the page where you define the "header" class, is there a folder called Assets on that level with the file inside?  Check CapiTaliZatIon too.


    And that HTML file doesn't look to good either, what is with this code before the body tag:


    <header class="twoColLiqLtHdr">

    <scmenu class="twoColLiqLtHdr">

    <tab class="twoColLiqLtHdr">

    Mark as:
  • Currently Being Moderated
    Aug 2, 2012 5:25 PM   in reply to Hyde1216

    Try to change it to:



    background-image: url('Assets/HeaderTemplate.png');


    Also make sure you have the correct case for the filenames:  e.g


    Assets = assets

    HeaderTemplate = headertemplate


    etc etc.


    Sometimes these things do create problems.


    Good luck.

    Mark as:
  • Currently Being Moderated
    Aug 3, 2012 6:33 AM   in reply to

    No need for the quotes around the URL, though.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points