www.webdeveloper.com
Results 1 to 6 of 6

Thread: Repeating background in certain areas.

  1. #1
    Join Date
    Jan 2012
    Posts
    16

    Repeating background in certain areas.

    Hi ,

    SO heres a design Ive done just quickly.

    http://imageshack.us/photo/my-images/715/brittens.jpg/

    so far this is what I have done

    http://callumpirie.com/dev/brittens/

    I'm trying to repeat the red parts all the way over to the edge of the browser does anybody know how?

  2. #2
    Join Date
    Mar 2012
    Posts
    1,241
    One way to do this is:

    HTML:
    <div id=head_back>
    &nbsp;
    </div>

    CSS:
    #head_back {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 60px;
    z-index: 1;
    background-color: #E40000;
    }

    This puts a bar from edge to edge 60 pixels high at the top of the screen. Set z-index lower than the main div(s) and it will only be visible where there is blank spaces.

    Vary the height, top, left, right and background-color to suit.
    Last edited by jedaisoul; 03-18-2012 at 04:28 PM.

  3. #3
    Join Date
    Jan 2012
    Posts
    16
    Thanks man,

    will give it a go

  4. #4
    Join Date
    Jan 2012
    Posts
    16
    worked thanks heaps!

  5. #5
    Join Date
    Jan 2012
    Posts
    16
    How do you make it stop at a certain point?

    http://colmandesigns.123abc.co.nz/dev/brittens/

    thats what i have so far and depending on how big your monitor is the background stripes keep going passed the container

  6. #6
    Join Date
    Mar 2012
    Posts
    1,241
    I've had a look at your site, and it looks like you have already cracked it. But if I'm misunderstanding what you want, just play around with the left, right and width settings. Remember you only need to set two of these:
    - left and width, or...
    - right and width, or...
    - left and right.

    You will soon get the hang of what they do

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