View Full Version : Repeated & Non-repeated Background

09-25-2006, 09:19 PM
I made a design, a rather wierd design. I have a portion of the background on top that doesn't repeat.
A. It is a fixed image, about 1030x400
B. Under that, I have another 400x30 pattern that only duplicates horizontally.
C.Then, under all of this, I have just a normal pattern that duplicates horizontally and vertically.

It has to be background because on top of it all I'm putting the actual layout.

Here is a little demo: It has the little letters (A, B, C) To match with the

Can anyone offer any help on how it is done with css??

09-25-2006, 09:49 PM
Put each of the rows into a div tag and add the images to the backgound of each of the div tags

09-25-2006, 10:22 PM
That works, if I only wanted to show the background. How do I put my content table on top of that?

09-26-2006, 02:01 AM
Okay, no response yet. Must mean I am not explaining myself well, or this is impossible.

Here is a better idea/view: http://www.imagemule.com/uploads/bckThVO.gif

A: Background Image. No repeat.
B: Background Image. Repeat X.
C: Content.

The B will be a long pattern image. It repeats on the X to make up for the width, but the height will just be the length of the image. It seems easy in theory but it's giving me a headache.

Please anyone, help!

09-26-2006, 01:50 PM
I would create a div tag around all three spaces (A, B & C). Add your background images to A & B. Then create a third div tag for area C (adding another background if needed) and use the position, left and top css properities to move the C area over the two others. I have done this quickly and it works ok in firefox:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-size: 100%;
font-family: Verdana, Arial, Helvetica, sans-serif;

* {
margin: 0;
padding: 0;

div#outline {
width: 780px;
margin-top: 10px;
margin-left: auto;
margin-right: auto;

div#a {
background-color: #000066;
height: 100px;

div#b {
background-color: #3366CC;
height: 350px;

div#c {
background-color: #666;
color: #fff;
font-size: 0.8em;
height: 300px;
width: 500px;
position: relative;
top: -400px;
margin-left: auto;
margin-right: auto;
padding: 10px;

<div id="outline">
<div id="a"></div>
<div id="b"></div>
<div id="c">This is the content div tag</div>

09-26-2006, 08:39 PM
I think there are a few easier ways (bg image on the body, one in a wrapper, one for the content), but without seeing the actual images it's hard to say.

Truthfully, I don't think you've thought this out enough—what happens when the browser window is wider than image A? Or taller than image B? If the images have set widths and heights then there's no reason to add all the other containers and bg images.

The thing that's always helped me when designing a tricky background layout is to try and think about the behavior of the design rather than the layout. The layout always seems to take care of itself at that point.

With that in mind, do you have a screenshot of the design you are going for? Maybe at different sizes (i.e., maximised, 800x600, etc)?

09-27-2006, 06:41 AM
Just nest three elements and set their background images in the order C, A, and B. Example:

html {min-height: 100%; background: url("c.png") 0 430px;}
body {min-height: 100%; background: url("a.png") no-repeat;}
#container {height: 100%; background: url("b.png") 0 400px repeat-x;}

<div id="container"></div>