Place div at base of content but background image to extend to base of window

Posted on 2008-11-12
Last Modified: 2012-05-05
I have a div called footer with a background image.

But I need this footer to be at the end of the page, after all of the content, but the background image needs to extend to the bottom of the page(repeat vertically and horizontally.

so far i have

<div id="wrapper">content</div>
<div id="footer">Footer</div>


	font-family: Arial, Helvetica, sans-serif;

	font-size: 11px;

	color: #666666;

	text-decoration: none;



	padding-right: 0px;

	padding-bottom: 0px;

	padding-left: 0px;

	margin-top: 25px;

	margin-right: 0px;

	margin-bottom: 0px;

	margin-left: 0px;

	background-image: url(../images/footer_backing.gif);

	background-repeat: repeat-x;

	background-position: center top;

	overflow: visible;


Open in new window

Question by:Cheryl Lander
    LVL 82

    Accepted Solution

    >>repeat vertically and horizontally
    repeat: both;

    Author Comment

    by:Cheryl Lander
    but I don't want the images tiled vertically.

    I need a background color.
    LVL 82

    Expert Comment

    >>but I don't want the images tiled vertically
    That contradicting "repeat vertically and horizontally"

    Author Comment

    by:Cheryl Lander
    Sorry getting confused.

    ive got a tiled strip image which is 100px high.
    This is currently tiled horizontally across the page.
    This div is directly under the last piece of content.

    So I need to have a background color to fill the rest of the screen vertically right to the bottom of the page.

    does this make sense.

    LVL 30

    Expert Comment

    you can specify background-color aswell as image in one statement:

    background: #369 url() repeat-x center top

    Author Comment

    by:Cheryl Lander
    Yes I know.

    but if there is no height specified for the div, how do I make it have the background color right to the end of the page.
    LVL 30

    Expert Comment

    Can you post a link to the page? Or can you post all the html and css

    Author Closing Comment

    by:Cheryl Lander
    another div was affecting it.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: HTML5 Specialist

    HTML5 development skills are critical to all developers. HTML5 is the foundation to almost any development process. That's why business, design studios, development shops and other organizations need HTML5 developers. Get your foot in the door as a HTML5 specialist.

    Suggested Solutions

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
    In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
    In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now