SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    div container and background-image not working

    I have been working with css for a year now. Just when I think I have it, something happens that is illogical to the way I perceive css. I took over a site half fiished, developed in Dreamweafer. I am trying to finish converting the structure from tables to div's. I wrapped a div #content, around the other div's in order to display a background image. I can't make it work, despite research and Rachel's excellent book. The image the designer wants is 898px by 443px tall. I need it to repeat down as the content flows beyond 443px.

    Here is css for the container. I have a red rule in there for verification of the container.

    #content {
    width: 898px;
    float: left;
    height: 0px;
    background-image: url(media/background-main.gif);
    background-repeat: repeat-x;
    border: 1 px solid red;
    }

    URL to dev page: BEAVERDAM BUILDERS

    Sample page of the layout trying to be achieved: BEAVERDAM BUILDERS

    Thank you in advanced. Still need to finish the header table conversion to css and div's.

    CS

  2. #2
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Why "height: 0px"? That's going to make it scrunch up into nothing.

    I think what you want is "height: auto" (or just remove the height property altogether).

  3. #3
    SitePoint Member
    Join Date
    Dec 2009
    Location
    Sperryville, Virginia (USA)
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Image drops in. Thanks. But it stops short of the text on the page and the footer. The image size is 898 x 443. How do I get it to tile down automatically? Border didn't work either, I guess because there was no defined height. I took it out because it was just for reference.

    #content {
    width: 898px;
    float: left;
    background-image: url(media/background-main.gif);
    background-repeat: repeat-x;
    }

    What can I manipulate to get the image to tile?

    BEAVERDAM BUILDERS

    CS

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The image is repeating as far as I can see. It goes all the way to the footer.

    It won't repeat seamlessly because your image is not symmetrical and so will just tile.

  5. #5
    SitePoint Wizard
    Join Date
    Dec 2003
    Location
    USA
    Posts
    2,582
    Mentioned
    29 Post(s)
    Tagged
    0 Thread(s)
    Also, note that you have:
    background-repeat: repeat-x;
    so it'll only repeat horizontally, like this:
    ******

    If you change it to just repeat, it'll repeat both directions:
    ******
    ******
    ******

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by samanime View Post
    Also, note that you have:
    background-repeat: repeat-x;
    so it'll only repeat horizontally, like this:
    ******

    If you change it to just repeat, it'll repeat both directions:
    ******
    ******
    ******
    Well spotted I missed that I only looked at the code in the site linked to and that had it correctly.

    Code:
    #content_subnav {
      background-image: url("media/background-main.gif");
      background-repeat: repeat;
      float: left;
      width: 898px;
    }


Tags for this Thread

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
  •