Please help with backgrounds

5 replies [Last post]

Wed, 2010-09-08 04:38

Streetproject

Offline

newbie

Timezone: GMT-4

Joined: 2010-09-08

Posts: 10

Points: 14

This will be really hard to explain, but I will do my best...

I have my content div, it is a fixed width. I have a 2 background images, essentially one for the left and one for the right. It is a pattern I am trying to blend with the content div.

I guess I could ask that you image this:

 -----------------------------------------
|            |               |            |
|            |               |            |
|            |               |            |
|    left    |    Content    |    right   |
| background |    (fixed)    | background |
|  (fluid)   |               |   (fluid)  |
|            |               |            |
|            |               |            |
 -----------------------------------------

The left background needs the background image to load from the left to the right. Is this possible?

Another question, When I resize the browser window, I want the content to always be in the center, and the other backgrounds to slowly decrease in size, till they are completely out of the window. Some of my background pieces in my background divs sometimes prevent the entire background divs to vanish (I have a little shadow effect that always stays in the picture).

Any help would be greatly appreciated.

Tags:

Beginners CSS Questions

Wed, 2010-09-08 05:18

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Can you post a graphic of

Can you post a graphic of what the layout should look like?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-09-08 05:38

Streetproject

Offline

newbie

Timezone: GMT-4

Joined: 2010-09-08

Posts: 10

Points: 14

This is the left/middle

This is the left/middle column.

You can see that the middle column is cut off, while the left columns unique portion is still visible. I would rather have the left column hidden behind the window then cut off the middle main content since I want the left and right columns to be just backgrounds.

html code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<link rel="stylesheet" href="style.css" type="text/css"> 
        <title>New Web Project</title> 
    </head> 
    <body> 
    <div id="container"> 
    	<div id="bg-l"> 
    		<div id="logo-l"></div> 
			<div id="bottom-l"></div> 
		</div> 
        <div id="wrapper"> 
        	<div id="top"> 
        		<div id="top-l"></div> 
					This is top content
				<div id="top-r"></div> 
        	</div> 
			<div id="logo"></div> 
			<div id="nav"> 
				<div id="nav-l"></div> 
				LINK1 - LINK2 - LINK3
				<div id="nav-r"></div> 
			</div> 
			<div id="content"> 
				<div id="body-l"></div> 
				<div id="body"> 
					I am do<br><br>ing a lot of testing<br><br><br>This is the body.<br><br><br>Testing a few things
				</div> 
				<div id="body-r"></div> 
			</div> 
			<div id="bottom"> 
			</div> 
        </div> 
		<div id="bg-r"> 
    		<div id="logo-r"></div> 
			<div id="bottom-r"></div> 
		</div> 
	</div> 
    </body> 
</html>

Css

*{
	margin: 0px;
	padding: 0px;
}
html, body{
	height: 100%;
	body: 100%;
}
body{
	/*background-color: #000000;*/
}
#container{
	display: table;
	width: 100%;
	/*border: solid 2px #fff;*/
}
#bg-l, #bg-r{
	overflow: hidden;
	display: table-cell;
	background-repeat: repeat-y;
	width: 30px;
	vertical-align: bottom;
	position: relative;
	background-color: #000000;
}
#bg-l{
	text-align: right;
	background-image: url("images/shade-l.gif");
}
#bg-r{
	text-align: left;
	background-image: url("images/shade-r.gif");
}
#wrapper{
	background-color: #ccc;
	display: table-cell;
	width: 961px;
	height: auto;
}
#top{
	width: inherit;
	background-image: url("images/top-m.gif");
	background-repeat: repeat-x;
	height: 28px;
}
#top-l{
	width: 2px;
	float: left;
	height: inherit;
	background-color: #000;
}
#top-r{
	width: 2px;
	float: right;
	height: inherit;
	background-color: #000;
}
#logo{
	width: inherit;
	height: 175px;
	background-image: url("images/logo.gif");
	background-repeat: no-repeat;
 
}
#nav{
	width: inherit;
	height: 42px;
	background-image: url("images/nav-m.gif");
	background-repeat: repeat-x;
}
#nav-l{
	float: left;
	width: 2px;
	height: inherit;
	background-color: #000;
}
#nav-r{
	float: right;
	width: 2px;
	height: inherit;
	background-color: #000;
}
#content{
	display: table;
	width: inherit;
}
#body{
	height: auto;
	display: table-cell;
	background-color: #ccc;
	background-image: url("images/body-t-m.gif");
	background-repeat: repeat-x;
	background-position: top;
}
#body-l{
	display: table-cell;
	height: auto;
	width: 2px;
	background-color: #000;
}
#body-r{
	display: table-cell;
	height: auto;
	width: 2px;
	background-color: #000;
}
#bottom{
	width: inherit;
	height: 19px;
	background-image: url("images/bottom-m.gif");
	background-repeat: repeat-x;
}
#bottom-l{
	height: 49px;
	width: inherit;
	background-image: url("images/bottom-l.gif");
	background-repeat: no-repeat;
}
#bottom-r{
	height: 49px;
	width: 30px;
	background-image: url("images/bottom-r.gif");
	background-repeat: no-repeat;
}
#logo-l{
	top: 0px;
	position: absolute;
	height: 253px;
	width: 30px;
	background-image: url("images/logo-l.gif");
	background-repeat: no-repeat;
}
#logo-r{
	top: 0px;
	position: absolute;
	height: 253px;
	width: 30px;
	background-image: url("images/logo-r.gif");
	background-repeat: no-repeat;
}

I dont have a picture of the patten yet because it doesn't work as of now. That banner behind the middle div should continue to extend on both ends, but it needs to start on the right side, and repeat across the x axis. Everything I do makes the image start on the left, which means when the window resizes, the pattern continues to go back and forth from the right location to the wrong.

Wed, 2010-09-08 06:06

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Don't think in terms of

Don't think in terms of columns. What you've got there right now is just a single column overlaid on a horizontally repeating background image. Create a repeating image for the blue patterned stripe which includes the shadows and attach that to the body element. Then you could use two box shadows for the shadows either side of the main content area and use CSS3PIE to get that to work in IE.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Wed, 2010-09-08 13:24

Streetproject

Offline

newbie

Timezone: GMT-4

Joined: 2010-09-08

Posts: 10

Points: 14

You are right. I have the 3

You are right. I have the 3 columns in one container. Shadow left, content, shadow right. The thing that gives me trouble is that repeating background banner (the blue banner with zig zag lines). It needs to start in a certain place, and end extend the rest of the way, in order for the design to line up with my main content. Any ideas?

Wed, 2010-09-08 22:00

Tyssen

Offline

Moderator

Timezone: GMT+10

Joined: 2004-05-01

Posts: 8140

Points: 1322

Tyssen wrote: Create a

Tyssen wrote:

Create a repeating image for the blue patterned stripe which includes the shadows and attach that to the body element.

Then use background-position to move it to the point on the page that you want it at.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Please help with backgrounds

Can you post a graphic of

This is the left/middle

Don't think in terms of

You are right. I have the 3

Tyssen wrote: Create a

New forum topics

User login

Navigation