SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot blackberryfan's Avatar
    Join Date
    Nov 2010
    Location
    middleOnowhere, South Africa.
    Posts
    101
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Html/Css - Get image to stretch 100% width of a container then another image over it?

    I am struggling with getting the layout of the header i have in mind together.

    Here is the html so far:

    Code:
    <div id="header">
        <img src="/img/headerBg.jpg" alt="" class="headerBg" />
        <a href="/"><img src="/img/logo.png" alt="Logo" class="logo" /></a>
        <div id="loginBox">
            other code
        </div>
    </div>
    And the css so far:
    Code:
    #header {
        height: 130px;
        margin: 5px 5px 0 5px;
        border: #0f0f12 outset 2px;
        border-radius: 15px;
    }
    
    #loginBox {
        float: right;
        width: 23.5%;
        height: 128px;
        font-size: 75%;
    }
    
    .headerBg {
    
    }
    
    .logo {
        width: 50%;
        height: 120px;
        float: left;
        display: block;
        padding: 5px;
    }
    What I am trying to accomplish, is have the image "headerBg.jpg" display to 100% width of the div "header", so essentially it will be the background of the div itself. Then have the image "logo.png" and the div "loginBox" display above "headerBg.jpg".

    The logo should be floated to the far left end and the loginBox floated to the far right as in the css.

    With the image removed, the logo and div are placed correctly, but when the image is introduced they two floated items are placed after the image in the flow.

    I have tried various additions and reconfigurations but none have proven to work out how I want them to.

    I have added the image in the css as a background to the header div, but it does not stretch 100% that way unless you resort to css3 which i do not want to do although it is exactly what i am trying to achieve.

    Would anyone be able to provide some insight on this?

    Also any tutorials covering things like this would be a great addition to my collection!

    Thank you!
    This is what we're waiting for...

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,198
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    See how the following works for you

    Code CSS:
    #header {
        border: #0f0f12 outset 2px;
        border-radius: 15px;
        height: 130px;
        margin: 5px 5px 0 5px;
        position: relative;
    }
     
    #loginBox {
        float: right;
        font-size: 75%;
        height: 128px;
        width: 23.5%;
    }
     
    .headerBg {
        height: 130px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
     
    .logo {
        display: block;
        float: left;
        height: 120px;
        padding: 5px;
        width: 50%;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •