Got a tip for us?
Let us know
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.
CSS Image Placement
- Thread starter irmongoose
- Start date
- Sort by reaction score
Ummmm... I'm assuming you want a background image on something?
First you'll need a containing <div> which allows all of your content to get centered. When the body is set to align center, and the following block element has auto margins, it will end up centering itself. Then it is all a matter of giving your header div a height and change the path to the background image.
First you'll need a containing <div> which allows all of your content to get centered. When the body is set to align center, and the following block element has auto margins, it will end up centering itself. Then it is all a matter of giving your header div a height and change the path to the background image.
Code:
body { text-align: center; }
div#container {
text-align: left;
width: 700px; /* Change to fit your needs */
margin: 0 auto;
}
div#header {
text-indent: -999em;
height: 200px; /* Change to fit your needs */
background-image: url(path/to/image.jpg); /* Change to fit your needs */
background-position: center;
background-repeat: no-repeat;
}Thanks for the help, mnkeybsness, I guess I didn't make it clear what I wanted.
Basically, yes I want a background image, but the problem I am encountering is that the image is not showing on the very bottom of the window, i.e. there is a gap between the edge of the window and the edge of the image. In the site I had linked to, the image on the top is at the very top, no gaps. That's the effect I want, except I want it on the bottom. I tried recreating it by simply copy-pasting and changing around the source code of that page, but it didn't work. Any ideas on how to do it?
Thanks.
Great CSS site, by the way. Your coding is quite efficient, as far as I can tell. Amazing.
irmongoose
Basically, yes I want a background image, but the problem I am encountering is that the image is not showing on the very bottom of the window, i.e. there is a gap between the edge of the window and the edge of the image. In the site I had linked to, the image on the top is at the very top, no gaps. That's the effect I want, except I want it on the bottom. I tried recreating it by simply copy-pasting and changing around the source code of that page, but it didn't work. Any ideas on how to do it?
Thanks.
Great CSS site, by the way. Your coding is quite efficient, as far as I can tell. Amazing.
irmongoose
not sure if it's of any help, but I assume background-position: bottom; might accomplish what you want:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #D3D4D6;
background-color: #93979C;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
margin: 0px;
padding: 0px;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
color: #D3D4D6;
background-color: #93979C;
background-image: url(images/bg.jpg);
background-repeat: repeat-x;
background-position: top;
margin: 0px;
padding: 0px;
}
OK, that has gotten it pretty close, thanks 
But there is still a problem... I have it set to no-repeat but it is rendering the picture with two of them on top of each other.
It's probably all messed up, can you help me fix this?
By the way, in Firefox it doesn't even load the image on the bottom center...
irmongoose
But there is still a problem... I have it set to no-repeat but it is rendering the picture with two of them on top of each other.
Code:
<!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=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Page Title</title>
<style title="Default" media="screen" type="text/css">
body {
background-color: #999999;
background-image: url(ConceptualismTwoSmall.png);
background-repeat: no-repeat;
background-position: center, bottom;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
</body>
</html>It's probably all messed up, can you help me fix this?
By the way, in Firefox it doesn't even load the image on the bottom center...
irmongoose