Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login


Tycoon Talk > Web Development and Programming Support > CSS Forum > Setting a background to bottom of the HTML element

Reply
Setting a background to bottom of the HTML element
Old 04-05-2010, 03:57 PM Setting a background to bottom of the HTML element
pealo86's Avatar
Super Spam Talker

Posts: 876
Name: Matt Pealing
Location: England, north west
Trades: 0
Talkupation: pealo86 will become famous soon enough
This is driving me nuts, I had the exact same problem about a year ago and couldn't find a solution so I just gave up.

I'm trying to position a background image on the bottom of the HTML element, but it only goes so far down as 'the fold'. I've tried

Code:
html, body { height:100%; }
But no luck, I've even tried the same technique as here:
http://www.dave-woods.co.uk/?p=144

But it still won't fix it!

Does anyone know what I'm doing wrong? Here is my code:
Code:
/* general //////////////////////////////////////////////////////////////////////////*/

html, body {
    height: 100%;
}

html {
    background: #1e325e url('../image/html.jpg') no-repeat center 0;
}

body {
    background: url('../image/body.jpg') no-repeat center 100%;
    font-family: verdana, arial, sans-serif;
    font-size: 11px;
    color: #FFF;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
}

h1 {
    position: absolute;
    top: 50px;
    left: 35px;
    font-size: 20px;
    text-transform: uppercase;
}

h2, h3 {
    border-bottom: #3c4a67 dotted 1px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    font-size: 16px;
}

h4 {
    font-size: 15px;
    border-bottom: #3c4a67 dotted 1px;
    padding: 10px 0;
    margin-bottom: 18px;    
}

h5 {
    font-size: 13px;
}

#page p, #page ul {
    line-height: 1.75;
    margin: 10px 0 15px;
}

a {
    color: #ffcc00;
}

strong {
    color: #ffcc00;
    font-weight: inherit;
}

#sage {
    position: absolute;
    right: 30px;
    bottom: 10px;
}

#logo {
    position: absolute;
    top: 20px;
    left: 70px;
}

#footer-logo {
    margin-left: 100px;
}





/* div id //////////////////////////////////////////////////////////////////////////*/

#wrapper {
    min-height: 100%;
}

#header {
    height: 40px;
    position: relative;
}

#header-contact {
    position: absolute;
    left: 45px;
    font-size: 160%;
    bottom: 12px;
}

#header-contact strong {
    font-size: 120%;
}

#header-contact small {
    font-size: 12px;
}

#hero {
    position: relative;
    height: 163px;
}

#hero .omega {
    height: 163px;
}

#page {
    margin-bottom: 20px;
    overflow: auto;
}

#col-left, #col-right {
    margin-top: 20px;
}

#content {
    background: url('../image/content.gif') no-repeat;
}

#content .inner, #sidebar .inner {
    padding: 20px 30px;
}

#sidebar {
    background: url('../image/sidebar.gif') no-repeat;
}

#cta-col-1 h4 {
    color: #ffcc00;
    background: url('../image/cta-col-h4-how-works.gif') no-repeat 100% 5px;
}

#cta-col-2 h4 {
    color: #0079c2;
    background: url('../image/cta-col-h4-why-trust.gif') no-repeat 100% 0;
}

#cta-col-3 {
    background: url('../image/cta-col-3.jpg') no-repeat;
    margin-top: 0;
}

#cta-col-3 h4 {
    color: #ffcc00;
    margin-top: 10px;
    background: url('../image/cta-col-h4-direction.gif') no-repeat 100% 0;
}

#footer {
    clear: both;
    padding-top: 10px;
}

#footer-contact {
    margin-top: 10px;
}

#footer-contact .inner {
    margin-left: 40px;
    line-height: 1.5;
}

#footer .btm {
}




/* div class //////////////////////////////////////////////////////////////////////////*/

.divide {
    clear: both;
    margin-top: 20px;
    overflow: auto;
}

.cta-divide {
    margin: 0;
}

.cta-col {
    background: url('../image/cta-col.gif') no-repeat;
    min-height: 435px;
    margin-top: 10px;
}

.cta-col .inner {
    padding: 10px 20px;
}

.cta-col strong {
    color: #FFF;
    font-weight: bold;
}




/* list //////////////////////////////////////////////////////////////////////////*/

#nav {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 535px;
    font-size: 12px;
    float: left;
}

#nav li {
    display: inline;
}

#nav li a {
    color: #FFF;
    text-decoration: none;
    width: 104px;
    height: 27px;
    padding-top: 12px;
    background: url('../image/nav-li-a.gif') no-repeat center center;
    float: left;
    text-align: center;
    margin-right: 3px;
}

#nav .active a, #nav li a:hover {
    background-image: url('../image/nav-li-a-hover.gif');
}

#page ul li {
    background: url('../image/ul-li.png') no-repeat 0 8px;
    padding-left: 10px;
}

#cta-col-3 .top {
    width: 180px;
}

#cta-col-3 .btm {
    margin-top: 150px;
}

#footer-contact ul {
    float: left;
    width: auto;
    margin-top: 10px;
}

#footer-contact ul li {
    display: inline;
    float: left;
    margin-right: 10px;
}

#footer .btm ul {
    float: left;
}

#footer .btm ul li {
    display: inline;
}

#footer .btm ul li a {
    float: left;
}





/* form //////////////////////////////////////////////////////////////////////////*/

.btn {
    border: none;
}

#quote_form {
    font-size: 16px;
    background: url('../image/frm-quick-quote.gif') no-repeat;
    padding: 15px 0 0 20px;
    position: relative;
    min-height: 218px;
}

#quote_form h3 {
    font-size: 20px;
    margin-bottom: 25px;
}

#quote_form div {
    margin-bottom: 15px;
}

#quote_form label {
    display: block;
    width: 110px;
    float: left;
    padding-right: 12px;
    text-align: right;
    margin-left: ;
}

#quote_form .btn {
    position: absolute;
    right: 20px;
    bottom: 20px;
    background: url('../image/frm-quick-quote-btn.png') no-repeat;
    width: 159px;
    height: 56px;
}

#quote_form .dp-applied {
    position: relative;
    top: 3px;
}
Code:
<!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=UTF-8" />
<link href="css/import.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="script/jquery-1.3.2.min.js"></script>
<title>Home | </title>
</head>
<body>
    <div id="wrapper" class="container_20">
        <div id="header">
            <div class="inner">
                <span id="header-contact">Phone enquiries: <strong>0161 490 2482</strong> <small>(Mon-Fri   0800am - 1800pm)</small></span>
                <img id="sage" src="image/sage.gif" alt="Secure online booking with Sage Pay" />
            </div>
        </div><!--end header-->
        <div id="hero">
            <div class="grid_8 alpha">
                <a href="#"><img id="logo" src="image/logo.gif" alt="Logo" /></a>&nbsp;
            </div>
            <div class="grid_12 omega">
                <h1>FULLY INSURED <strong>SECURE PRIVATE PARKING</strong></h1>
                <ul id="nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Partners</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Offers / News</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div>
        </div><!--end hero-->
        <div id="page">
            <div class="divide">
                <div class="grid_13">
                    <form action="#" id="quote_form" name="quote_form">
                        <h3>QUICK QUOTE</h3>
                        <div>
                            <label for="from_month"><strong>From:</strong></label>
                            <select id="from_month" name="from_month">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <select id="from_month_date" name="from_month_date">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                            <select id="from_year" name="from_year">
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                            </select>
                            <a id="date-pick" href="noJs.html" class="dp-applied"><img src="image/frm-date.gif" alt="Select Date" /></a>
                        </div>
                        <div>
                            <label>Arrival Time:</label>
                            <select class="month" name="arrive_hour">
                                  <option value="00">00</option>
                                  <option value="01">01</option>
                                  <option value="02">02</option>
                                  <option value="03">03</option>
                                  <option value="04">04</option>
                                  <option value="05">05</option>
                                  <option value="06">06</option>
                                  <option value="07">07</option>
                                  <option value="08">08</option>
                                  <option value="09">09</option>
                                  <option value="10">10</option>
                                  <option value="11">11</option>
                                  <option value="12">12</option>
                                  <option value="13">13</option>
                                  <option value="14">14</option>
                                  <option value="15">15</option>
                                  <option value="16">16</option>
                                  <option value="17">17</option>
                                  <option value="18">18</option>
                                  <option value="19">19</option>
                                  <option value="20">20</option>
                                  <option value="21">21</option>
                                  <option value="22">22</option>
                                  <option value="23">23</option>
                            </select>
                            <select class="month" name="arrive_min">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select>
                        </div>
                        <div>
                            <label for="to_month"><strong>To:</strong></label>
                            <select id="to_month" name="to_month">
                                <option value="1">Jan</option>
                                <option value="2">Feb</option>
                                <option value="3">Mar</option>
                                <option value="4">Apr</option>
                                <option value="5">May</option>
                                <option value="6">Jun</option>
                                <option value="7">Jul</option>
                                <option value="8">Aug</option>
                                <option value="9">Sep</option>
                                <option value="10">Oct</option>
                                <option value="11">Nov</option>
                                <option value="12">Dec</option>
                            </select>
                            <select id="to_month_date" name="to_month_date">
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <option value="4">4</option>
                                <option value="5">5</option>
                                <option value="6">6</option>
                                <option value="7">7</option>
                                <option value="8">8</option>
                                <option value="9">9</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                                <option value="24">24</option>
                                <option value="25">25</option>
                                <option value="26">26</option>
                                <option value="27">27</option>
                                <option value="28">28</option>
                                <option value="29">29</option>
                                <option value="30">30</option>
                                <option value="31">31</option>
                            </select>
                            <select id="to_year" name="to_year">
                                <option value="2010">2010</option>
                                <option value="2011">2011</option>
                                <option value="2012">2012</option>
                                <option value="2013">2013</option>
                                <option value="2014">2014</option>
                                <option value="2015">2015</option>
                            </select>
                            <a id="date-pick-2" href="noJs.html" class="dp-applied"><img src="image/frm-date.gif" alt="Select Date" /></a>
                        </div>
                        <div>
                            <label>Return Time:</label>
                            <select class="month" name="return_hour">
                                <option value="00">00</option>
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                                <option value="06">06</option>
                                <option value="07">07</option>
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                                <option value="23">23</option>
                            </select>
                            <select class="month" name="return_min">
                                <option value="00">00</option>
                                <option value="15">15</option>
                                <option value="30">30</option>
                                <option value="45">45</option>
                            </select>
                        </div>
                        <input type="submit" value="" name="frm-quick-quote-submit" id="frm-quick-quote-submit" class="btn" />
                    </form>
                </div>
                <div class="grid_7">
                    <img src="image/cta-main.gif" alt="Meet &amp; Greet Parking Service" />
                </div>
            </div>
            <div class="divide">
                <div class="grid_5">
                    <img src="image/cta-drive-staight.gif" alt="Drive Straight to The Airport, Not Miles Away" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-park-car.gif" alt="Park Your Car at The Terminal, No Buses" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-meet-you.gif" alt="We Will Meet You and Safetly Park Your Car, Go Straight to Check-in" />
                </div>
                <div class="grid_5">
                    <img src="image/cta-on-return.gif" alt="On Your Return Your Car is Waiting, No Hassle" />
                </div>
            </div>
            <div class="divide">
                <div id="content" class="grid_13">
                    <div class="inner">
                        <h2>Airport <strong>Meet &amp; Greet</strong> Parking Service</h2>
                        <p>provide a quality car collection and delivery service that leaves you 
                        free to enjoy your trip. Upon your arrival at , one of our representatives 
                        will meet at the departure level. After helping you with your baggage, your car is then taken 
                        and safely stored. Upon your arrival back at , our representative will meet 
                        you at the terminal building to deliver your car.</p>
                        <p><a href="#">more about us.....</a></p>
                    </div>
                </div>
                <div id="sidebar" class="grid_7">
                    <div class="inner">
                        <h3>MAP Newsletter</h3>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod.</p>
                        <a href="#"><img src="image/frm-newsletter-btn.gif" alt="Sign Up" /></a>
                    </div>
                </div>
            </div>
            <div class="cta-divide">
                <div class="grid_6 cta-col" id="cta-col-1">
                    <div class="inner">
                        <h4>How it works</h4>
                        <h5>Your arrival</h5>
                        <ul>
                            <li>Bookings require 24 hours notice.</li>
                            <li>On the day of your departure, simply call us 10 minutes before 
                            your arrival at.</li>
                            <li>Drive directly to the Departures Level at Terminal 1, 2 or 3 at 
                            </li>
                            <li>There you will be met by an official MAP representative. From then on 
                            your vehicle will be in our care.</li>
                            <li>You are now free to enjoy your Holiday or Business trip.</li>
                        </ul>
                        <h5>Your return</h5>
                        <ul>
                            <li>On your return to, your vehicle will be 
                            returned to you immediately saving journey time.</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_6 cta-col" id="cta-col-2">
                    <div class="inner">
                        <h4>Why you can trust MAP</h4>
                        <h5>Your arrival</h5>
                        <ul>
                            <li>MAP is a family run business striving to deliver excellent service 
                            and value for money.</li>
                            <li>Our enviable reputation has been built on a combination of hard 
                            work, care and a friendly personal approach.</li>
                            <li>MAP’s insurances cover all the company’s legal liabilities.</li>
                            <li>Our experienced drivers and their support vehicles are in constant 
                            radio contact with head office.</li>
                        </ul>
                        <h5>Highly competitive rates</h5>
                        <ul>
                            <li>Our <strong>Price Match Promise</strong> means that if you find the same efficient 
                            service that you have been offered by MAP at a lower price then we 
                            will be happy to refund the difference.</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_8 omega cta-col" id="cta-col-3">
                    <div class="inner">
                        <h4>Directions to  Airport</h4>
                        <ul class="top">
                            <li>Drive to Terminal 1, 2 or 3 at </li>
                            <li>If you are using the M56 turn off at Junction 5.</li>
                            <li>Make your way to the departures level.</li>
                        </ul>
                        <ul class="btm">
                            <li>Terminal 1 - enter DROP OFF ZONE<br />
                            Terminal 2 - enter CAR LANE<br />
                            Terminal 3 -  pull up at KERBSIDE.<br /></li>
                            <li>Pull into the kerb where you will be met by our representative.</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div><!--end page-->
        <div id="footer">
            <div class="top">
                <div id="footer-contact" class="grid_6">
                    <div class="inner">
                        <p>MAP Ltd, Unit 26, Prenton Dell Road,
                        Prenton, Wirral, Cheshire CH43 3AW</p>
                        <ul>
                            <li>T: 0161 490 2482</li>
                            <li>M: 07889 092 055</li>
                        </ul>
                    </div>
                </div>
                <div class="grid_10">
                    <img id="footer-logo" src="image/footer-logo.gif" alt="Logo" />
                </div>
                <div class="grid_4">
                    <img src="image/footer-payment.gif" alt="Payment Methods" />
                </div>
            </div>
            <div class="btm">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Offers / News</a></li>
                    <li><a href="#">Terms &amp; Conditions</a></li>
                    <li><a href="#">Privacy Policy</a></li>
                    <li><a href="#">Site Map</a></li>
                    <li><a href="#">xhtml</a></li>
                    <li><a href="#">css</a></li>
                </ul>
            </div>
        </div><!--end footer-->
    </div><!--end wrapper-->
    <div class="clear"></div>
</body>
</html>
Also here is a link to the page if that helps:
http://bit.ly/bGW5J1

Many thanks to anyone who can help!
__________________

Please login or register to view this content. Registration is FREE
Last edited by pealo86; 04-05-2010 at 06:05 PM..
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
 
Register now for full access!
Old 04-09-2010, 06:52 PM Re: Setting a background to bottom of the HTML element
Extreme Talker

Posts: 149
Trades: 0
Talkupation: mimamo is on a distinguished road
background-position: center bottom;
In CSS
__________________
Free
Please login or register to view this content. Registration is FREE

Visit our
Please login or register to view this content. Registration is FREE
and
Please login or register to view this content. Registration is FREE
mimamo is offline
Reply With Quote
View Public Profile
 
Old 04-12-2010, 06:08 AM Re: Setting a background to bottom of the HTML element
pealo86's Avatar
Super Spam Talker

Posts: 876
Name: Matt Pealing
Location: England, north west
Trades: 0
Talkupation: pealo86 will become famous soon enough
Thanks but I found out that it was

Code:
html, body {
    height: 100%;
}
That was causing the problem

Which is strange because I'm sure the only reason I added that was to try to fix this problem in the first place!
__________________

Please login or register to view this content. Registration is FREE
pealo86 is offline
Reply With Quote
View Public Profile Visit pealo86's homepage!
 
Reply     « Reply to Setting a background to bottom of the HTML element
 
Previous Thread | Next Thread Tycoon Talk > Web Development and Programming Support > CSS Forum > Setting a background to bottom of the HTML element

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off




   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 0.70986 seconds with 12 queries