SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    repeating bgimage in a div

    I'm trying to put a banner together which is 760px wide and set it to span 100% width. I've sliced the image in two and made a repeating image so that I can place it in the middle and have it expand to whatever size is necessary. However, it won't work, the left and right images are placed correctly but the middle div won't render the background image at all. Can someone tell me where I'm going wrong please?

    Here's my source code -

    <div style="position: absolute;left: 0px; width: 247px;"><img src="pics/ff_banner_left.gif" width="247" height="88" border="0" alt="image: Football Forums feel the passion..." /></div>
    <div style="background-image: url(/pics/ff_banner_repeat.gif); background-repeat: repeat-y; background: repeat;"><img src="pics/space.gif" width="1" height="1" border="0" alt=""></div>
    <div style="position: absolute;right: 0px;width: 512px;"><img src="pics/ff_banner_right.gif" width="512" height="88" border="0" alt="image: Football Forums banner" /><div>

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    You have "background" and "background-repeat", as well as "background-image" in your code for the 2nd div. "Background" is shorthand for ALL of the background properties, so drop it. Try the code I have below:
    Code:
    <div style="position: absolute;left: 0px; width: 247px;">
    <img src="pics/ff_banner_left.gif" width="247" height="88" border="0" alt="image: Football Forums feel the passion..." />
    </div>
    
    <div style="background-image: url(/pics/ff_banner_repeat.gif); background-repeat: repeat y;">
    <img src="pics/space.gif" width="1" height="1" border="0" alt="">
    </div>
    
    <div style="position: absolute;right: 0px;width: 512px;">
    <img src="pics/ff_banner_right.gif" width="512" height="88" border="0" alt="image: Football Forums banner" />
    <div>
    Also, if you're trying to go for XHTML and semantic markup here, I highly recommend moving your "style" attributes for each div into another stylesheet, or at least in the <head> of your document. Also, in XHTML (1.1 at least), the "border" attribute for the image tag is not allowed.

  3. #3
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I didn't have the extra background attributes in before and it didn't work. I copied and pasted your code and it still doesn't work. It even tried pointing to other images and still it won't work

  4. #4
    SitePoint Wizard
    Join Date
    Aug 2002
    Location
    N.Ireland
    Posts
    1,046
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    here's a link to the page in question

    football forums

  5. #5
    SitePoint Evangelist S7even's Avatar
    Join Date
    Jun 2002
    Posts
    481
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, i didn't really look at your code, but here is what you want. You can achieve the same result in many ways. It depends on what exactly you want, and on the rest of your page.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Football Forums</title>
    <style type="text/css">
    <!--
    body{
    margin: 0;
    background: url(/pics/ff_banner_repeat.gif) repeat-x;
    }
    div#left{
    position: absolute;
    width:247px;
    height:88px;
    background-image: url(/pics/ff_banner_left.gif); 
    background-repeat: no-repeat;
    z-index:10;
    }
    div#right{
    right: 0;
    position: absolute;
    width:512px;
    height:88px;
    background-image: url(/pics/ff_banner_right.gif);
    background-repeat: no-repeat;
    }      
    -->
    </style>
    
    </head>
    <body>
    <div id="left"></div>
    <div id="right"></div>
    </body>
    </html>


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
  •