I want to set the background image position at the bottom irrespective of the browser resolution.
please view the link, its behaving well in IE but not in Fire fox, please advice!!
<link removed>[URL=“http://helixpath.in/testsite/KitWit/SecondCut/index.html”]
Thank you for removing all links from the thread and sorry for replying so late.
I’d not put the background image on the body but have a wrapper div right after <body> with its’ position set at “left bottom”. And set height:100%; on the body and html and then set a min-height on the wrapper of 100%;
html { background:url(../images/imgBg.jpg) repeat-x left bottom; height:100%; }
Thanks this has been resolved, but here in footer is not sticking to the bottom, I want to put at the bottom at a particular depth[URL=“http://helixpath.in/testsite/KitWit/FirstCut/index.html”]
You can set a min-height for the html/body (whichever you did)/wrapper and then if it will automatically be at least that low down :). Or max-height, whichever you mean.
Can you put some bunch of codes here? I am not clear actually, what I have done you can see that in lines below
body
{
margin: 0px;
padding: 0px;
background-image: url(…/images/imgBg.jpg);
background-repeat: repeat-x;
background-position: 0 bottom;
height:100%;
}
html { background:url(…/images/imgBg.jpg) repeat-x left bottom; height:100%;}
#wrapper
{
margin: 0px;
padding: 0px;
font-family: calibri, arial;
}
and footer is inside the wrapper.
body
{
margin: 0px;
padding: 0px;
min-height:800px; /*at LEAST this far down will the image appear)*/
background-image: url(../images/imgBg.jpg);
background-repeat: repeat-x;
background-position: 0 bottom;
height:100%;
}
html { background:url(../images/imgBg.jpg) repeat-x left bottom; height:100%;}
#wrapper
{
margin: 0px;
padding: 0px;
font-family: calibri, arial;
overflow:hidden;/*add this because you will have floats and the height will collapse to 0. This makes it see the children floated elements*/
}
You mean there is no other way out to keep the footer at the bottom at any resolution.
Yes you can use a sticky footer technique. Going to pmob.co.uk and used fixed positioning to get that effect.
HI,
You can do it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd is -//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Kitwit - Social Network</title>
<link href="css/styleMain.css" rel="stylesheet" type="text/css" media="all" />
<style type="text/css">
[B]html {
height:100%;
}
body {
margin: 0px;
padding: 0px;
background-image: url(images/imgBg.jpg);
background-repeat: repeat-x;
background-position: 0 bottom;
height:100%;
}
#wrapper {
margin: 0px;
padding: 0px;
font-family: calibri, arial;
min-height:100%;
}
* html #wrapper {
height:100%;
}
[/B]#header {
background-image: url(images/imgTopBg.jpg);
background-repeat: repeat-x;
background-position: 0 top;
}
/* styles of main */
#main {
margin: 0% 18% 0 18%;
padding: 4px 0;
border: 1px solid #990000;
}
/* styles for logo conents */
#logo img {
margin: 0 90px 0 0;
padding: 0px;
}
/* styles for the search panel */
#searchPanel {
margin: 10px auto;
padding: 0px;
width: 588px;
text-align: center;
}
#searchPanel p {
margin: 0px;
padding: 0px;
}
#searchPanel .kyefield {
background-image: url(images/imgSearchInputBg.jpg);
background-repeat: no-repeat;
background-position: left 0px;
margin: 0px;
padding: 10px 0 0 15px;
height: 40px;
width: 475px;
border-width: 0px;
}
#searchPanel .srchBtn {
float: right;
margin: 0px;
padding: 0px;
top: 10px;
}
#searchPanel .adv {
position: relative;
top: -10px;
margin: 0px;
padding: 0px;
border: 1px solid #ffffff;
width: 482px;
text-align: right;
float: left;
}
/* styles for login panel */
#loginPanel {
float: right;
background-image: url(images/imgPanelBg.jpg);
background-repeat: repeat-x;
background-position: 0 top;
width: 28%;
margin: 0px;
padding: 0px;
}
/* styles for left panel */
#leftPanel {
width: 490px;
float: left;
border: 1px solid #990000;
margin: 0px;
padding: 0px;
}
#leftPanel .newMemebersPanel {
float: right;
margin: 0px;
padding: 0px;
background-image: url(images/imgPanelBg.jpg);
background-repeat: repeat-x;
background-position: 0 top;
width: 47%;
}
#leftPanel .joinPanel {
float: left;
margin: 0px;
padding: 0px;
background-image: url(images/imgPanelBg.jpg);
background-repeat: repeat-x;
background-position: 0 top;
width: 47%;
}
/* footer style */
#footer {
margin:-25px 0 0;
padding: 0px;
color: #4f4f4f;
border: 1px solid #990000;
display: block;
position:relative;
min-height:0;
}
* html #footer {
height:1%
}
/* common styles */
#wrapper h2 {
margin: 0px;
padding: 0px;
font-size: 18px;
}
#wrapper a.smallBlueLink:link, #wrapper a.smallBlueLink:visited {
text-decoration: underline;
color: #09174b;
font-size: 12px;
letter-spacing: 1px;
}
#wrapper a.smallBlueLink:hover {
text-decoration: none;
color: #09174b;
font-size: 12px;
letter-spacing: 1px;
}
#wrapper .clearAll {
clear: both;
}
[B].clearfooter {
height:25px;
}[/B]
</style>
</head>
<body>
<!-- wrapper starts -->
<div id="wrapper">
<div id="header" style="text-align: center"><img src="images/imgTopEdge.jpg" alt="" title="" border="0" /></div>
<!-- end of the header -->
<div id="logo" style="text-align: center"> <img src="images/imgLogo.jpg" alt="Kitwit" title="Kitwit" border="0" /> </div>
<!-- end of the logo -->
<div id="searchPanel" style="text-align: center">
<form method="post" action="" id="searchform">
<input type="image" name="btnsearch" id="btnsearch" class="srchBtn" src="images/imgSearchButton.jpg" alt="click to start search" />
<input type="text" name="keywords" id="keywords" class="kyefield" />
<div class="adv"><a href="#" class="smallBlueLink">Advance Search</a></div>
</form>
</div>
<div class="clearfooter"></div>
</div>
<!-- wrapper ends -->
[B]<div id="footer" style="text-align: center"> <a href="about.php" class="smallBlueLink">About Kitwit.com</a> | <a href="about.php" class="smallBlueLink">Terms & Conditions</a> | <a href="about.php" class="smallBlueLink">Privacy Policy</a> | <a href="about.php" class="smallBlueLink">Advertise</a> | <a href="about.php" class="smallBlueLink">Help</a> | <a href="about.php" class="smallBlueLink">Contact Us</a> </div>
<!-- end of footer -->[/B]
</body>
</html>
I don’t know why you had the same image on html and the body but you only need it on the body.
The wrapper is made min-height:100% high and the footer is taken out of the wrapper and placed after it. It is then dragged up into view with a negative margin. The clearfooter preserves the space so that nothing overlaps.
Damn, Paul posted a reply whilst I was playing, but I will post this anyway 
This uses the same technique of pulling the footer up with a negative top margin, but I implemented the clear-footer function with bottom padding on a Content div.
I went through and cleaned a few things up to simplify it somewhat. The top repeating background image I applied to the body, the bottom repeating background image to the #wrapper, and the centred top image as a background to #header, which I used to enclose the logo and search form. I also set up the footer links as a list.
html:
<!-- wrapper starts -->
<div id="wrapper">
<div id="header">
<img src="images/imgLogo.jpg" alt="Kitwit" title="Kitwit" border="0">
<form method="post" action="" id="searchform">
<input name="btnsearch" id="btnsearch" class="srchBtn" src="images/imgSearchButton.jpg" alt="click to start search" type="image">
<input name="keywords" id="keywords" class="kyefield" type="text">
<a href="#" class="adv">Advance Search</a>
</form>
</div>
<div id="content">
</div>
</div><!-- wrapper ends -->
<div id="footer">
<ul>
<li><a href="about.php">About Kitwit.com</a></li>
<li><a href="about.php">Terms & Conditions</a></li>
<li><a href="about.php">Privacy Policy</a></li>
<li><a href="about.php">Advertise</a></li>
<li><a href="about.php">Help</a></li>
<li class="last"><a href="about.php">Contact Us</a></li>
</ul>
</div> <!-- end of footer -->
css:
* {
margin: 0;
padding: 0;
}
p {
margin-bottom: 1em;
}
html, body {
height: 100%;
}
body {
background: url(images/imgTopBg.jpg) repeat-x;
font-family: calibri, arial, sans-serif;
}
#wrapper {
min-height: 100%;
background: url(images/imgBg.jpg) repeat-x left bottom;
}
* html #wrapper {
height: 100%;
}
#header {
background: url(images/imgTopEdge.jpg) no-repeat center top;
padding-top: 106px;
text-align: center;
overflow: hidden;
}
* html #header {
overflow: visible;
height: 1%;
}
/* styles for the search panel */
#searchform {
margin: 10px auto 0;
width: 588px;
text-align: center;
}
#searchform .kyefield {
background: url(images/imgSearchInputBg.jpg) no-repeat;
padding: 10px 0 0 15px;
height: 40px;
width: 475px;
border-width: 0px;
}
#searchform .srchBtn {
float: right;
}
#searchform .adv {
margin: -10px 0 0;
border: 1px solid #ffffff;
width: 482px;
text-align: right;
float: left;
color: #09174b;
font-size: 12px;
letter-spacing: 1px;
position: relative;
}
#searchform .adv:hover {
text-decoration: none;
}
/* content */
#content {
padding-bottom: 24px;
}
/* footer style */
#footer {
color: #4f4f4f;
border: 1px solid #990000;
height: 20px;
line-height: 20px;
margin: -22px auto 0;
text-align: center;
}
#footer li {
list-style: none;
display: inline;
font-size: 12px;
padding: 0 0.5em;
border-right: 1px solid #000;
}
#footer li.last {
border: 0;
}
#footer a {
color: #09174b;
letter-spacing: 1px;
}
#footer a:hover {
text-decoration: none;
}
Oh thanks paul, hats off to you !!
Never the less, I have already implemented Paul’s snippets of codes. Because I had been waiting for his reply since last night. He was there in other threads close to mine, but not here, ultimately I did the same what I use to and I got the key.
But still you deserve loadz of thanks !!
Centauri, has tidied a few other things up as well so you should look at his code and implement some of the suggestions. I know you have it working now but there’s always room for improvement
Yes, Sir, I have already taken up some of his points !!
Must apologise for the wait - As the thread started out with the bottom gradient position, when you mentioned footer I assumed you were still talking about the graphic as the footer looked like a navigation bar when I looked at the site. When I looked at the site code following other posts and realised this was the footer I started putting that code together. Hope you get some ideas from it nevertheless.
No no, no need to apologise,its my pride that you people are here! But please you all genius be prepared, I am already started plugging in some more components which you have seen already in the website. Though I am making it happen any way, but not getting satisfied with things that I am doing, lets see how it goes, probably I may come again with some queries.
Why this welcome panel is having unnecessary gap between paragraphs in IE. What is the heck that is required for IE.
, its done !! the height: 1%, I guess was useless !!