We help IT Professionals succeed at work.

Using CSS - How would I Set Top and Bottom Background Images on site?

vsllc
vsllc asked
on
229 Views
Last Modified: 2013-11-05
Hi,

I'm starting to design a new site and to add more design layers, I would like to add an image to the top and bottom of the site (similar to Microsoft's home page) with a background color to fill in the middle depending on content height.  Using CSS, how would I code the background so these images sit in the right spots?

Thanks.
Comment
Watch Question

This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Hey-Thanks for the quick response.

Lucki Luke - The first link is kind of what I'm after except instead of setting a color background, I want to use an image.  Would I simply replace the background: ##### with background-image: //myimage.png in the code or woul dmore be required?  There seemed to be a lot of hacks for IE and Mozilla.  Do I need all that additional code for this to work or just the #footer piece?

Oceanbeach - This looks like what I need.  What are the % for in the CSS portion if I'm setting no-repeat?
Hi vsllc,

Using the code above, you would change...

#wrapper {
background: #eee url(center-bg.jpg) no-repeat 50% 50%;}

Depending on the images being used & the overall design goals, there may be better ways to do this.  For whatever reason, I just assumed a repeating background image was to be used.

I hope this helps!

-OB

Author

Commented:
Oceanbeach - Since I'm only in the beginning stages, my thought was a repeating image across the bottom.    I may go one solid image.  In the above I don't understand the no-repeat 50% 50%;} portion of the code.  Can you explain further?  I'm new to coding in general, but if I have a 1px wide image that I want to repeat across the entire width of the browser, wouldn't I set the line of code to repeat?  Also, what are the 50% 50% instructing?

Thanks.
Hi vsllc,

The '50% 50%' centers the background image.  These mean the same thing...
...
#wrapper {
background: url(center-bg.jpg) no-repeat 50% 50%;}
...
#wrapper {
background: url(center-bg.jpg) no-repeat center center;}
...
#wrapper {
background-image: url(top-bg.jpg);
background-repeat: no-repeat;
background-position: center center;}
...

If you want an image to repeat horizontally, use 'repeat-x' in place of 'no-repeat'.  And, use 'repeat-y' for vertical repeating.

I hope this helps!

-OB
...The '50% 50%' centers the background image vertically & horizontally.
Maybe I misunderstood your question. I thought you wanted the footer to be always at the bottom of the page if the content doesn't fill a whole screen height and below the content if there is more.

If you just want to have the footer under the content then oceanbeach's solution suits you just fine.

Author

Commented:
Lucki Luke - Your assumption is correct.  I want the image to sit at the bottom of the window whether the content fills the page or not.  In the code for link 1, would I make the simple line change described above or would more be required?  What about the need for all those hacks?
Hi ,

For a footer always at the bottom of the page, try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>html</title>
<style type="text/css">

html, body {
height: 100%;
paddng: 0;
margin: 0; }
#wrapper {
min-height: 100%;
paddng: 0;
margin: 0;
background: #eee url(center-bg.jpg) repeat-y center top;}
* html #wrapper { height: 100%; }
#header {
height: 150px;
width: 100%;
paddng: 0;
margin: 0;
background: #ddd url(top-bg.jpg) no-repeat center top;}
#footer {
position: relative;
paddng: 0;
margin: 0;
margin-top: -100px;
height: 100px;
width: 100%;
background: #ccc url(bottom-bg.jpg) no-repeat center bottom;}
</style>
</head>
<body>
<div id="wrapper">
  <div id="header">&nbsp;</div>
  <div id="content">
    <p>Lorem ipsum...</p>
    <p>Sed et lectus...</p>
  </div>
</div>
<div id="footer">&nbsp;</div>
</body>
</html>

I hope this helps!

-OB
Most of the style declarations are required to make it work in most common browser. So depending on your audience you don't need all of the stuff, but I recommend you to keep most of it.

If you want to replace the footer color with an image you can simply change it like you asked above:
background-color: #xxxxxx; -> background: #xxxxxx url(image.gif) repeat-x 0 0;

If you want to dig deeper into the problem you can also read the other 2 links which provide slightly different approaches.
Hi vsllc,

Oops, I did not re-read the posts until now...the code I incorporated into the initial html page is very similar to:

http://www.themaninblue.com/experiment/footerStickAlt/

which lucki_luke posted a link to earlier.

-OB

Author

Commented:
Thanks to both of you.  In got some good information and resources.  I appreciate the help and additional documentation.
Hi vsllc,

Glad to help out!

oceanbeach

Author

Commented:
OB -

I'm trying to apply this method to a fading image and I'm running into 2 problems:

1.  The fading image is laying on top of my content instead of behind it.
2.  The image loads at the bottom of the page instead of the bottom of the content.  I want this if the content is shorter than 1 page, my problem is that when you scroll down longer pages, the image is not at the bottom of that content it sits at the position of the bottom of the 1st screen.

here's my CSS

#botimage {
position: absolute;
bottom:0;
padding: 0;
margin: 0px;
margin-top: -450px;
height: 450px;
width: 100%;
background-image:url(../images/fader.png);
background-repeat:repeat-x;
background-position: bottom;
}

I have theis positioned at the bottom of my index.php:

<div id="botimage">&nbsp;</div>

Thanks.
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.