Skip navigation
Hyde1216
Hyde1216
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.

601 Views   7 Replies   Latest reply: Hyde1216, Aug 3, 2012 9:39 AM
 
Replies
  • Nancy O.
    Currently Being Moderated
    1. Nancy O.,
    Aug 2, 2012 11:34 AM   in reply to Hyde1216
    Report

    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:
  • Hyde1216
    Currently Being Moderated
    2. Hyde1216,
    Aug 2, 2012 11:41 AM   in reply to Nancy O.
    Report

    I apologize, I'm unable to post a link to the page just yet. This is a snip of coding for a website still in the making for the company I work for.

     

    Would any of the coding below help?:

     

    </script>

    <style type="text/css">

    <!--

    body {

        background-color: #760101;

    }

    a:link {

        color: #FFF;

    }

    a:visited {

        color: #690;

    }

    .twoColLiqLtHdr #header table tr td {

        color: #400000;

        text-align: right;

    }

    -->

    </style>

    <link href="../twoColLiqLtHdr.css" rel="stylesheet" type="text/css" />

    </head>

    <header class="twoColLiqLtHdr">

    <scmenu class="twoColLiqLtHdr">

    <tab class="twoColLiqLtHdr">

    <body class="twoColLiqLtHdr">

    <div class="header" align="" id="header">Content Goes Here</div>

    <div class="scmenu" align="" id="scmenu">Content Goes Here</div>

    <div class="tabs" align="" id="tabs">Content Goes Here</div>

    <div class="body" align="" id="body">Content Goes Here</div>

    <div class="footer" align="" id="footer">Content Goes Here</div>

    <script type="text/javascript">var TFN='';var TFA='';var TFI='0';var TFL='0';var tf_RetServer="rt.trafficfacts.com";var tf_SiteId="11773g197b36be92cde14c11fc77dacc3a2a4f1660eb17h9";var tf_ScrServer=document.location.protocol+"//rt.trafficfacts.com/tf.php ?k=11773g197b36be92cde14c11fc77dacc3a2a4f1660eb17h9;c=s;v=5";document. write(unescape('%3Cscript type="text/JavaScript" src="'+tf_ScrServer+'">%3C/script>'));</script>

    </body>

    </html>

     

     

     

    That above is parts I added into the source code.

     
    |
    Mark as:
  • SnakEyez02
    Currently Being Moderated
    3. SnakEyez02,
    Aug 2, 2012 11:51 AM   in reply to Hyde1216
    Report

    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:
  • Hyde1216
    Currently Being Moderated
    4. Hyde1216,
    Aug 2, 2012 12:01 PM   in reply to SnakEyez02
    Report

    I thought the <class="twoColLiqLtHdr"> connected each class to the style sheet. I'm guessing I was wrong, I'm getting to the point in this process where I'm starting to confuse myself, part of the reason why I was looking to clean up and go from scratch.

     

    For the Assets folder, I keep all of my images inside the Assets folder of the website.

     
    |
    Mark as:
  • mytaxsite.co.uk
    Currently Being Moderated
    5. mytaxsite.co.uk,
    Aug 2, 2012 5:25 PM   in reply to Hyde1216
    Report

    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:
  • MurraySummers
    Currently Being Moderated
    6. MurraySummers,
    Aug 3, 2012 6:33 AM   in reply to mytaxsite.co.uk
    Report

    No need for the quotes around the URL, though.

     
    |
    Mark as:
  • Hyde1216
    Currently Being Moderated
    7. Hyde1216,
    Aug 3, 2012 9:39 AM   in reply to MurraySummers
    Report

    I got it all sorted out, it was a problem with the path and div id names afterall. Thank you all, you helped me out big time with this one.

     
    |
    Mark as:
Actions

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