Grow your CSS skills. Land your dream job.

DIV Background Pattern stops repeating.

  • # January 22, 2009 at 5:12 pm

    I have a page I am working that stretches horizontally (weird, huh?) and I want the header to dynamically expand as well. I have the logo setup to scroll with the page using a fixed position. I am going to upload an image to describe the issue better than I possibly could in words. Thanks in advance for any help!

    [attachment=0]Picture 1.png[/attachment]

    In the picture notice how arrow at the bottom stretches further than the width of the page? Well I want the background of my header to do the same. Any ideas?

    Here is the CSS Code:

    Code:
    * {
    margin: 0;
    padding: 0;
    }
    body {
    background-color: #975723;
    }

    #hd {
    background-image: url(../images/hd-bg.jpg);
    height: 280px;
    overflow: visible;
    width: 100%;
    }
    #hd img {
    position: fixed;
    }

    #bd {

    }
    #user-box {
    background: transparent url(../images/user-box-middle.jpg) repeat;
    max-width: 300px;
    overflow: auto;
    }
    #user-box .left {
    float: left;
    }
    #user-box .right {
    float: right;
    }
    #user-box #user {
    padding: 18px;
    }
    #timeline {
    background: transparent url(../images/timeline-middle.jpg) repeat-x;
    height: 89px;
    margin-top: 50px;
    width: 2000px;
    }
    #timeline .left {
    float: left;
    }
    #timeline .right {
    float: right;
    }

    and the HTML

    Code:


    sample username


    # January 22, 2009 at 5:32 pm

    Can’t explain too much without having a url and seeing which files are which, but if "hd-bg.jpg" is the blue/white gradient, then add the bold part:

    #hd {
    background-image: url(../images/hd-bg.jpg) repeat-x;
    height: 280px;
    overflow: visible;
    width: 100%;
    }

    # January 22, 2009 at 6:24 pm

    Oops I had that in there at one time, it doesn’t help either way though. I am not sure but inspecting with FireBug shows that div just is the width of the veiwport.

    Thank you though, you did assume correctly.

    # January 22, 2009 at 7:40 pm

    If you post the url I can have a closer look at it when I get home.

    # January 22, 2009 at 9:16 pm

    Thanks very much!

    I was developing locally so I had to upload to my server, when the sub-domain propagates it’ll be http://www.bugy.collegeaintcheap.com

    # January 22, 2009 at 9:44 pm

    Make this your body background:

    Code:
    body {
    background: url(../images/hd-bg.jpg) repeat-x #975723;
    }

    Remove the background style from #hd.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".