An absolute horizontal site background color

HTML & CSS
1

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

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

body {background: url(path/to/myimage.png) repeat-y 0 0;}

or, if you want it just inside your centered content, something like

.wrapper {background: url(path/to/myimage.png) repeat-y 0 0;}

We need to see your site to give more specific code.

3

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

Yes, it does. :slight_smile:

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:

body {background: url([I]bg-image.png[/I]) 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:

5

More of the same: :slight_smile:

( ) <— that is the background-image —<<<


<!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!