Achieving Double Background Effect with CSS
Tags: BeginnerRecently I was put into a situation where one of my client’s liquid layout site was in need of a redesign going back to a fixed/center aligned layout. The site’s layout and design was not designed to be centered aligned and so when implementing the design in code, I ran into some issues trying to achieve the same look and feel.
Final Preview
Do we sacrifice the design for implementation boundaries?
Typically when creating a stretch effect with CSS backgrounds, we would take a fixed width of the background and repeat it on the X-axis until it fills the page. Of course to achieve this effect, the center aligned header image would have to match the repeating background on both ends.Typical Stretch Technique
In our scenario, we would need a repeating background to accommodate for the left side and the right side of the header. How do we achieve this effect?
Double Background Stretch Technique
Well we all know our current CSS version cannot handle double backgrounds. Hopefully in the future this will be available so we don’t have to pull these work-a-rounds.
The Double Background Effect
The solution is to use two repeating images, one for the left-side background, and another for the right-side background.HTML
For the left-side repeating image, we will add a background to the body tag. Then, to accomodate the right-side repeating image, we will add an additional <div> tag, which will contain the second background.
<div id="bg_wrap"></div> <!--Right-Side Repeating Background Image--> <div class="container"> <!-- Container Class to center align and have a fixed width / The image header.gif is just as an example for placement --> <img src="header.gif" alt="" /> </div>CSS
body {}
For the left-side repeating image, we apply the background to our body tag.
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}#bg_wrap {}Then we will create the other half by adding an absolution position that will stick to the right.
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}.containerThis class will be the container of your contents, it will contain the width, background color, center alignment, and the position set to ‘relative’.
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}Final Output<!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>Double Backgrounds with CSS - CSS/XHTML Tutorial by Soh Tanaka</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #e5e5e5 url(bg_body.gif) repeat-x;
position: relative;
}
#bg_wrap {
height: 96px;
width: 50%;
right: 0;
background: url(bg_wrap.gif) repeat-x;
position: absolute;
}
.container {
width: 960px;
background: #e5e5e5;
margin: 0 auto;
overflow: hidden;
position: relative;
}
</style>
</head>
<body>
<div id="bg_wrap"></div>
<div class="container">
<img src="header.gif" alt="" />
</div>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét