www.webdeveloper.com
Results 1 to 5 of 5

Thread: help with div box with head and foot image?

  1. #1
    Join Date
    May 2009
    Posts
    100

    help with div box with head and foot image?

    I have a box with a header and footer and a background.

    I use this to make the header and footer appear.

    Code:
    <div id="feature">
    <img src="images/headback.jpg" />
    <p>This is my web page</p>
    <p>This is my web page</p>
    <p>This is my web page</p>
    <p>This is my web page</p>
    <p>This is my web page</p>
    <img src="images/headf.jpg" />
    </div>
    Then the CSS

    Code:
    #feature { background: url(../images/headbg.jpg) repeat-y; margin-top:30px;}

    The problem with doing it this way is when I specify an exact height the background image from the CSS will go beyond the footer image of the div.

    There's an easy way to do this?

    Thanks

  2. #2
    Join Date
    Jul 2008
    Posts
    91
    It's background image of DIV so it will be always beyond IMG inside DIV.

    If you want your background image starts under header image try to set position. For ex. if height of your header is 40px than do:

    Code:
    #feature { background: url(../images/headbg.jpg) repeat-y 0px 40px; margin-top:30px;}

  3. #3
    Join Date
    May 2009
    Posts
    100
    Quote Originally Posted by Helleshtern View Post
    It's background image of DIV so it will be always beyond IMG inside DIV.

    If you want your background image starts under header image try to set position. For ex. if height of your header is 40px than do:

    Code:
    #feature { background: url(../images/headbg.jpg) repeat-y 0px 40px; margin-top:30px;}
    Thanks very much but this still doesn't work. See attatched image:
    Attached Images Attached Images

  4. #4
    Join Date
    Jul 2008
    Posts
    91
    Now I understand where the problem is. You are trying to push footer image to bottom of DIV, right? You may try add this to style of footer image:

    Code:
    vertical-align: bottom

  5. #5
    Join Date
    May 2009
    Posts
    100
    Quote Originally Posted by Helleshtern View Post
    Now I understand where the problem is. You are trying to push footer image to bottom of DIV, right? You may try add this to style of footer image:

    Code:
    vertical-align: bottom
    So I need to give the image at the bottom of the div an id?

    Thanks

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles