Image at bottom of body?

HTML & CSS
1

Hi,

On many websites (including Formspring), I’ve seen a nice, rounded body content image.
What I mean is, I’ve seen a page where the content’s background is white, with black text, and at the bottom of the content, there is an image that is a round border. This makes the website look very nice and smooth.
Look at the bottom of this page.

How do I do that with CSS?
I’ve tried to have a image at the bottom of a page, but it doesn’t extend with the content. Like, the longer my page is, the farther I have to manually move the image. How do I make it automatically move with the content?

I’m trying to do it with my site: http://eric.cfpmedia.com/

Thank you,

Eric

2

Hi cfpmedia.com.
This has been done with browser specific CSS,
(sth like -moz-border-radius: and -webkit-border-radius: )
this doesn’t work in all browsers (especially not in IE).

You can accomplish a look like that by applying a background image to a main container.
E.g.:

CSS

<code>
#main {
width: 950px;
margin 0 auto;
background: transparent url(some_rounded_corner_pic.png) left bottom scroll;
}
#main2 {
width: 950px;
margin 0 auto;
background: transparent url(some_rounded_corner_pic.png) left top scroll;
}
</code>

HTML

<code>
<div id=“main”>
<div id=“main2”>contents</div>
</div>
</code>

Or depending on the page you are creating, you can define special containers for the rounded corner pics,
as you already did in the bodytop section.
What prevents you from doing the same at the bottom ?

noRiddle

3

Hi,

As mentioned above you could just nest an inner element and apply the image at the bottom background-position as shown above.

If you want fully flexible round corners then there are many tutorials about.

In your example you have made the mistake of using absolute positioning for your layout which means you can never find the bottom if you want to cap the bottom image as you have done with the top.

You should change to a floated layout and then you can cap the bottom of the layout by clearing the floats. You should also change those non semantic spans and b elements to semantic elements such as headings and paragraphs. Never use breaks for just making space or paragraph breaks.

Here’s a basic floated setup using your dimensions.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">

html,body{margin:0;padding:0}
h1,h2,h3,h4,h5,h6,p{margin:0 0 .5em}
body {
    background:#6CB1D7 url("http://eric.cfpmedia.com/images/top.png") repeat-x 0 0;
    font-family:Arial, Helvetica, sans-serif;
    font-size:18px;
    text-align:left;
    color:#3333;
    line-height:1.3;
}
#container {
    margin: 0 auto;
    width: 770px;
}
#header{
    height:45px;
    position:relative;    
}
#maintop,#mainbase {
    background:url("http://eric.cfpmedia.com/images/bodytop.png") no-repeat 0 0;
    width:770px;
    height:16px;
    overflow:hidden;
    clear:both;
}
#mainbase {/* bottom image will go here - remove red color */
    background:red url("http://eric.cfpmedia.com/images/bodybase.png") no-repeat 0 0;
}
#main {
    background-image:url("http://eric.cfpmedia.com/images/body.png");
    width:761px;
    padding:0 3px;
    border-left:1px solid #38708f;
    border-right:1px solid #38708f;
    overflow:hidden;
}
#content {
    width:567px;
    float:left;
}
#sidebar {
    float:right;
    width:194px;
    font-size:14px;
    color:#000000;
}
</style>
</head>
<body>
<div id="container">
    <div id="header">
        <h1>Main Title</h1>
    </div>
    <div id="maintop"></div>
    <div id="main">
        <div id="content">
            <h2>Sub Section</h2>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
        <div id="sidebar">
            <h3>Side section</h3>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
            <p>test</p>
        </div>
    </div>
    <div id="mainbase"></div>
</div>
</body>
</html>

Hope that helps.

4

Thanks for the help everyone! :smiley: