Different divs in background

Forum Moderators: not2easy

Message Too Old, No Replies

Different divs in background

anwartheravian

7:31 am on Jun 28, 2010 (gmt 0)

Can i use different divs in the background 'body' div, without disturbing the overall flow of the 'container' div.

I am working on a project in which i have used a background gradient image in the background 'body' div, i have also used a background color for the 'body' div, to display when the background image ends. Now what i want is to display another background image in the 'body' div to appear near the 'footer' div (about 100 px above the footer), and i want the 'container' div to appear above that.

An example of such design is this:
[templatemonster.com ]

Is it possible, if yes please explain in detail how. I am really stuck here, and i need the help of professionals here.

Thanks.

enigma1

1:08 pm on Jun 29, 2010 (gmt 0)

Hi anwartheravian welcome to the forums.

Although I don't know the HTML for the sample design you mentioned I believe they use a black color for the body with a gradient image. (ie: what you have already). The main content is then overlapped with a container.

You can also have your main content in a container and when that ends, you create another one that takes 100% the width of the page positioned at the end of the document having this effect.
<body style="background: #F00 url(design/error.gif) repeat-y">
<div id="main_container">
......main content......
</div>
<div id="footer_container">
.......footer.......
</div>
</body>

The footer_container can take 100% of the width of the page if you set it in your css, while the main_container can use the auto margin with a fixed width.

anwartheravian

2:58 pm on Jun 29, 2010 (gmt 0)

Thanks for the answer engima1, but what i have been able to understood from what you wrote, by this method the footer will appear once the main_container ends, but in the link that i attached, the footer starts in the background before the end of the main_container div.

If they would have used black color as the background and had gradient image on that, in that case when there is more content in the main_container, the black will start showing on much more area than desired. I hope i made my point clear.

Still looking for your help to sort out this matter.

Thanks again for your kind reply.

enigma1

3:23 pm on Jun 29, 2010 (gmt 0)

From the preview image I saw is what I understood. As the main content grows the dark background will also grow. Now you could setup a light color that matches the last portion of the background (as the body color) and then have only the footer color dark. Otherwise if you use the bottom property of the body to position the footer, an overlap may occur subject to the height requirements of the content.

If you have the HTML source you can post it without the links.

anwartheravian

3:27 pm on Jun 29, 2010 (gmt 0)

i was trying to implement something similar to this, but was not able to, that is why i don't have the html code.

I can understand the solution you suggest, but what if we have to do something exactly similar to that design. After all it is a valid template, and that designer would have definitely done that some how.

What do you think?

enigma1

4:06 pm on Jun 29, 2010 (gmt 0)

Here is a page sample with a main content and a footer div. If you create a gradient image with a vertical grad isn't it going to create the same effect?

<!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" dir="ltr" lang="en">
<head>
<title>test form</title>
<style type="text/css">
body {
margin: 0;
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
font-size: 12px;
background: #900 url(vertical.gif) repeat-x;
}

#wrapper {
margin: 0 auto;
text-align: left;
width: 700px;
overflow: hidden;
position: relative;
}

#main_container {
margin-top: 100px;
padding: 10px;
background-color: #FFF;
}

#footer_container {
margin-top: 10px;
padding-top: 8px;
padding-bottom: 8px;
text-align: center;
color: #FFF;
background-color: #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="main_container">Main Content</div>
</div>
<div id="footer_container">Footer Content</div>
</body>
</html>

Replace the bg color of the footer to be the same of the body once you see how the sample renders. Then create the vertical grad image and see what it does. You can expand the main content if you want add a height property to it.

There was also a mistake about the repeat should be on the x-axis not y, I posted earlier.