...

View Full Version : Repeated & Non-repeated Background



Erindesign
09-25-2006, 08: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
http://www.imagemule.com/uploads/bckD8hK.gif

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

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

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

Erindesign
09-26-2006, 01: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!

ericTheGoldfish
09-26-2006, 12: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">

<head>
<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;
}
</style>
</head>

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

rmedek
09-26-2006, 07: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)?

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


CSS:
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;}

HTML:
<html>
[…]
<body>
<div id="container"></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum