SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    An absolute horizontal site background color

    So I've been searching for days on Google and can't seem to figure out if this is possible or not. Basically, my website is centered and is about 1000px wide, and I want the left side of the page background to be brown but only come 300px into the actual content. So essentially, have a brown stripe that takes up a good portion of the left side of the screen while leaving the right side white. Is this possible? Thanks for your help in advance!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Yep, really easy. Just create a brown image that's the width you want, make it about 20px tall, and repeat it down the left side. If you want it repeated down the left of the window, do something like

    Code:
    body {background: url(path/to/myimage.png) repeat-y 0 0;}
    or, if you want it just inside your centered content, something like

    Code:
    .wrapper {background: url(path/to/myimage.png) repeat-y 0 0;}
    We need to see your site to give more specific code.

  3. #3
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmm, maybe I can explain it a little better. So pretend I have a 1920x1080 monitor, and my site was centered in the middle with a width of 1000px, it would look like this: | [ ] | With the "|" being the edge of the screen and the "[" being the edge of the content. Basically I want the brown to extend into the content, but only by a little. So it would look like this: |::[: ] | with the ":::" being brown.I cant use an image and tell it to align to the left because if the screen was smaller or larger, it wouldn't align with the content correctly. Hopefully this make a little more sense.

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by austinsp View Post
    Hopefully this make a little more sense.
    Yes, it does.

    There's an easy solution. Create an image in Photoshop that has a width of, say, 3000px, a transparent background, and a height of around 20px.

    Place some guidelines on this file: one dead center, and two more guidelines 500px to the left and right of the center. Those two guidelines mark off the left and right edges of your content area (1000px apart).

    Now, say you want the brown background to extend 200px into the left of your content area. Mark off another guideline that is 300px to the left of your center guideline, and now, from this guideline all the way to the left of the image, fill in with the brown color you want. (E.g. drag the rectangle tool from the left to the latest marker line, and then choose a fill color.

    Then save the image as a png file, and upload.

    In your CSS, do this:

    Code:
    body {background: url(bg-image.png) repeat-y 50% 0;
    Does that make sense?

    The reason it works is that you have a background image on the body that is centered, and which is colored brown from 300px left of center all the way out to the left of screen. Even if you narrow or widen the browser window, this image will always be centered.

    Here's an example:

    bg.png

  5. #5
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,533
    Mentioned
    62 Post(s)
    Tagged
    2 Thread(s)
    More of the same:

    ( brown-white3-bg.png ) <--- that is the background-image ---<<<

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <!--
    -->
    <head>
        <title>template</title>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta http-equiv="content-language" content="en-us">
        <style type="text/css">
    
    body {
        background-image:url(brown-white3-bg.png);    /* eg. image is 20px tall and ~3000 px wide */
        background-position:50% 0;
        background-repeat:repeat-y;
    }
    
    div {
        width:1000px;
        height:600px;
        border:10px ridge #543;
        background-color:rgba(75,150,225,.5);
        margin:0 auto;
    }
    
    h1 {font-size:4em; text-align:center; color:#4b4;}
    
        </style>
    </head>
    <body>
    
    <div>
        <h1>This is my web site.</h1>
    </div>
    
    </body>
    </html>
    Off Topic:


    Yer quick, Mr Ralph!


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
  •