PDA

View Full Version : Resolved 2 background images problem



The_Return
Feb 20th, 2010, 08:23 PM
I'm coding a new template its been awhile since I've done some html I have 2 questions...

1.) How would I repeat one background on the left side only and another background on the right side only so Leftbg | Content | Rightbg

2.) What the best way to overlay the navigation over the header bg and the sub header

Can see my source here: http://codingagent.com/codingagent2/

Heres my design
http://screensnapr.com/u/69qzre.png

Azzaboi
Feb 20th, 2010, 08:56 PM
I think you would want to create div boxes on either side and use css to float them...

float: left; and float: right;

Make sure you have another div surrounding them or underneath to clear the floats:

clear: both;

Then set the divs background colour (in case images are disabled) and tile a seemless image on the side divs:

color:#222222;
background:url(bg-left.gif);
background-repeat:repeat-x;

Background repeat will be either x or y depending what direction you want (across or down).

The_Return
Feb 20th, 2010, 09:29 PM
Ok updated code thats what happens....

The_Return
Feb 20th, 2010, 10:29 PM
Ok fixed :) I used z-index and repeated one side of the background with the body and then 50% of other side with a div. Does anyone have any suggestions for overlaying the navagation?

Excavator
Feb 20th, 2010, 10:49 PM
Hello The_Return,
Give this a try -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {background: #FC6;}
* {
margin: 0;
padding: 0;
}
#container {
width: 1200px;
margin: 30px auto;
overflow: auto;
position: relative;
background: #F6F6EF url(http://codingagent.com/codingagent2/images/bg_left.png) repeat-x left top;
}
#header {
height: 480px;
width: 600px;
float: right;
background: url(http://codingagent.com/codingagent2/images/bg_left.png) repeat-x;
}
#menu {
height: 184px;
width: 1000px;
position: absolute;
top: 150px;
left: 100px;
background: url(http://codingagent.com/codingagent2/images/subheader.png) repeat-x;
}
h1 {
clear: both;
text-align: center;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<!--end header--></div>
<div id="menu">
<!--end menu--></div>
<h1>The Rest of your Site here</h1>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
<!--end container--></div>
</body>
</html>