...

View Full Version : background for layout



Radovan
07-16-2011, 01:31 PM
Hello, I have made this layout -> http://i53.tinypic.com/sctjc6.jpg and don't know how to do the background. I want the background to fill the rest of the page by same background as container and footer have. (so it will look like the background is continuing).

i think i have an idea have can the upper background look like -->
body
{
background:url(bg.jpg); /*it's the 1px line of container bg*/
background-repeat:repeat-x;
}

but it will repeat just the container background to the sides (the gray color and black line), not footer. how to tell the footer to take the rest of the page's height and fill it with bg? height:100% or min-height:100% doesn't work.

I think the whole code isn't important, it's just fixed size centered container and a footer with width:100% - not part of the container, but if you need it anyway to answer my question, i will provide.

vikram1vicky
07-16-2011, 01:56 PM
Share you HTML and CSS code

Radovan
07-16-2011, 02:04 PM
<!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" xml:lang="en" lang="en">
<head>
<style type="text/css">
body
{
padding:0;
margin:0;
background:lime;
}

#container
{
width:1280px;
height:678px; /*+122px z footru = 800px*/
background:gray;
margin:0 auto;
}

#menu
{
margin-top:39px;
margin-left:105px;
width:918px;
height:48px;
background:red;
float:left;
}

#logo
{
width:148px;
height:66px;
float:left;
background:blue;
margin-left:9px;
margin-top:30px;
}

#ponuka
{
margin-top:97px;
height:127px;
width:191px;
float:left;
background:white;
}

#tien
{
width:19px;
height:434px;
background:pink;
float:left;
}

#content
{
width:1075px;
height:434px;
margin-top:58px; /*+10 = 68*/
background:green;
float:left;
margin-left:105px;
}

#content_box
{
width:865px;
height:434px;
float:left;
background:aqua;
z-index:1;
}

#content_text
{
position:relative;
width:285px;
height:371px;
left:73px;
top:81px;
background:orange;
float:left;
z-index:3;
}

#content_photo
{
position:relative;
width:572px;
height:393px;
top:21px;
right:13px;
background:blue;
float:left;
z-index:2;
}

#novinky
{
width:100%;
height:40px;
background:black;
float:left;
margin-top:50px;
}

#footer
{
width:100%;
height:122px;
background:red;
}
</style>

</head>
<body>
<div id="container">
<div id="menu">
</div>
<div id="logo">
</div>
<div id="content">
<div id="ponuka">
</div>
<div id="tien">
</div>
<div id="content_box">
<div id="content_text">dsadsa
</div>
<div id="content_photo">
<div id="viac_info">
</div>
</div>
</div>
</div>
<div id="novinky">
</div>
</div >
<div id="footer">
</div>
</body>
</html>

Sammy12
07-16-2011, 06:38 PM
but it will repeat just the container background to the sides (the gray color and black line), not footer. how to tell the footer to take the rest of the page's height and fill it with bg? height:100% or min-height:100% doesn't work.


mr. ryanfait can help you - sticky footer
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/

the best solution if your footer is less than 100px; (if more, then it becomes a little bit obsolete)

--------------

Fluid backgrounds are pretty difficult, but you have to set an absolute header background. In short, the background of the header needs to extend into the content's background. I would suggest starting out with a simpler header background and footer background! take little step!

Radovan
07-17-2011, 11:27 AM
ok, so let's simplify this a little. i have 1 fixed size div -

div#a {height:500px;width:500px}

and need a second one, that will fill the rest of the page's height. something like width:100% but with height.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum