I most often work with designs from other creative developers and I am tasked with converting it into a workable site with CSS. I recently ran into an issue where there were several designs layered over each other. A quick and dirty approach would have been to just cut up the design and use the graphics like normally, but the aesthetics of it would have been lost in translation.
Here is what the original design looked like:
As you will see it included several different layers with varying levels of opacity. If it were just this page, I could have just made it a background element without worrying about it. But this was a template to use for every page throughout the site. The interior pages would have to allow for growing vertically, because the content was of variable heights.
The first thing i did was determine how I would setup the background. Taking the gradient of dark orange to light orange, I created a small sliver from top to bottom and repeated it in the background only on the x-axis:
body {
background:#FEBF24;
background-image:url(../images/background.gif);
background-repeat:repeat-x;
}
As you'll notice I also made the background color the same as the bottom most color. If you look at the comp I worked with, you'll see that there are some images that are not in the "main div" that overlay on the background. Working with the art director, we decided to eliminate these images. We could have done it I know, but on to other things.
To allow for vertical expansion I divided the image into several sections. The top "header", the top of the "container", and the bottom of the container. I chose a seperation line in the middle of the image straight through the middle of the two swirls on the right side.
This is the Header image:
The top of the "container":
The bottom of the "container":
From the header image I made a "logo image" and the right side. This would allow me to change the logo whenever needed.
I took the top and bottom images and faded them into the background color to prevent any hard lines in the images.
The overall result would have been easy to accomplish if there were ways of assigning a top image and bottom image for a background. Since there is not, here is how I accomplished it.
<body id="interior">
<div id="container">
<div id="logo"> <a href="index.cfm"><img border="0" src="Sheraton/images/logo.jpg" /></a> </div>
<div id="header">
<table cellpadding="0" cellspacing="0"><tr><Td width="100px" valign="top" ></td><td>
<tr><td></td><td></td></tr>
<tr><td></td><td align="right" style="padding-top:3px;"></Td></tr></table>
</div>
<div class="clearall"> </div>
<div id="navigation">
</div>
<div id="containerbottom"> </div>
<div class="clearall"> </div>
</div>
</div>
</div>
</body>
#container {
margin:0 auto;
text-align:left;
width:866px !important;
background-image:url(images/topbg.jpg);
background-repeat:no-repeat;
background-position:0px 110px;
background-color:#F37421;
z-index:1;
position:relative;
}
#containerbottom {
width:866px;
height:327px;
background-image:url(images/bottombg.jpg);
background-repeat:no-repeat;
background-position:bottom left;
float:left;
margin:-297px 0 0 0;
position:relative;
z-index:0;
}
#header {
background-image:url(images/headerbg.jpg);
height:100px;
float:right;
width:666px;
text-align:left;
margin:10px 0 -5px 0;
font-size:11px;
}
#navigation {
fl
Recent Comments