Skip navigation
Currently Being Moderated

placing images on top of a div tag

Apr 10, 2013 10:55 PM

Hello Dreamweavers


Id like to know if how can I place an image in front,or should I say ontop of a div tag,for example

Ive made a div tag,and I would like an image of a logo to be in front of that div tag.


thank you.u2a.jpg

  • Currently Being Moderated
    Apr 10, 2013 11:35 PM   in reply to inquestflash

    You can. But I would think what the situation is first, before deploying a solution to use.


    What is going in the header <div> itself, apart from the logo?

    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:01 AM   in reply to inquestflash

    inquestflash wrote:


    Hi osgood.


    In the header i would have a background image of some sort. now you are going to tell me,why dont I place the logo on the banner


    No I was making sure there is no text in the header first.


    You can use an absolutely positioned <div>


    #header {

    position: relative;

    height: 220px; /*change height to the height of your bg image */



    #logo {

    position: absolute;

    top: 10px;

    left: 30px;

    height: 200px; /*change height to the height of your logo image */

    width: 200px; /*change width to the width of your bg image */



    Then just add the 'logo' <div> inside the 'header' <div> like below:


    <div id="header">

    <div id="logo">Logo goes here</div>

    </div><!-- end header -->

    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 5:29 AM   in reply to inquestflash

    If you plan for some text, you could float the logo with suitable margins & padding.


    This would give you the result shown in picture below


    <style type="text/css">

    #header {

        background-color: #666;

        height: 150px;

        color: #fff;

        font-size: 18px;

        padding-top: 10px;

        padding-left: 20px;


    .logofloat {

        float: right;

        margin-right: 20px;

        margin-top: 30px;

        margin-left: 50px;





    <div id="header">

    <img src="logo.gif" class="logofloat">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit.





    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:24 PM   in reply to inquestflash

    inquestflash wrote:


    Hi osgood.


    I followed your instructions, here is how it turend out,is this correct?



    Yes, BUT you don't need the extra logo <div> in your code or 'logo goes here' text and you need to change the height and width of the logo <div> css to the same as your logo image.

    Mark as:
  • Currently Being Moderated
    Apr 11, 2013 11:30 PM   in reply to inquestflash

    inquestflash wrote:


    Also what I would like to ask is, arent absolute positioned div forbiden,since they are mostly positioned in the left hand corner of a website?


    In this instance it is legitimate to use an absolutely positioned container as the logo is postioned in an area which can accommodate an absolutely positioned element without disrupting the construction. I would'nt recommend this method IF the design could not withstand it. But from what you have told me there will only be a background image in the header <div>


    I use ths method very very sparingly if I have a 'callout' box I need postioned over several other containers BUT here's the key it has to be used where it can accomodate any text enlargement in a users browser.


    The really correct way to do this is to use floats as Ken has suggested in his post BUT I make exceptions to the rules if they can be broken without incurring any problems.

    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