displaying images with CSS

lional · November 1, 2010

I have a background image that I attach to the using the body tag.

I have another image that I want to be central vertically and horizontally.

Then I want t6o add the buttons that are alligned left horizontally and top vertically.

The problem is that each time I add a new button, it pushes the image that must be central down and to the right.

Is there any way that I can embed the one image in the center of the page, so that the buttos are on "top" of the central image

#home_im {
width: 800px;
height:450px;
background-image: url('../images/home_page_image.png'); 
background-repeat:no-repeat;
position:fixed;
}
#home_btn {
width: 216px;
background-image: url('../images/buttons/home.png'); 
background-repeat:no-repeat;
height:45px;

margin-left:10px;
}

michaellunsford · November 1, 2010

In the CSS, I don't see any real positioning of the elements. I'd like to see how the HTML is laid out.

lional · November 1, 2010

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Introduction</title>
<link rel="stylesheet" type="text/css" href="css/yamin.css">
</head>

<body background="bakgr2.png">
<div id="home_im"></div>
<table width="100%" height="100%">
<tr><td>
<div id="home_btn"></div><br />
</td></tr>
</table>
</body>
</html>

michaellunsford · November 1, 2010

Are you trying to center one image inside the other? What's that table for?

I combined the html and stylesheet just to keep it simple on my end.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Introduction</title>
<style type="text/css">
#home_im {
   width: 800px;
   height:450px;
   background-image: url('../images/home_page_image.png');
   background-repeat:no-repeat;
   }
#home_btn {
   width: 216px;
   height:45px;
   background-image: url('../images/buttons/home.png');
   background-repeat:no-repeat;
   margin:203px auto 0 auto;
}
</style>
</head>

<body background="bakgr2.png">
<div id="home_im">
  <div id="home_btn"></div>
</div>
</body>
</html>

Basically, to horizontally center something inside something else, just be sure the element has a width assigned, then use "margin:auto". If you want to center it vertically and you know the height of the parent element, simply divide both heights by two, add them together and add that to your margin (see code above).

Is that what you were trying to do?

lional · November 2, 2010

No

I want home_page_image.png to be central vertically and horizontally, and home.png to start at the top of the page and on the left margin.

These are buttons but I have only created home for now, but basically the buttons will go below each other on the left margin.

Thanks for your help so far.

lional · November 2, 2010

I have the buttons where I want them, just want the picture centred

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Introduction</title>
<link rel="stylesheet" type="text/css" href="css/yamin.css">
</head>
<body background="bakgr2.png">
<div id="home_im">
<div id="container">
<div id="home_btn"></div>
<div id="audio_btn"></div>
<div id="music_btn"></div>
<div id="newsletters_btn"></div>
<div id="scroll_btn"></div>
<div id="teachings_btn"></div>
<div id="true_worship_btn"></div>
<div id="video_btn"></div>
<div id="bible_btn"></div>
</div>
</div>
</body>
</html>

#home_im {
margin-left: auto;
margin-right:auto;
width: 800px;
height:450px;
background-image: url('../images/home_page_image.png'); 
display: block;
}
#home_btn {
width: 216px;
background-image: url('../images/buttons/home.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#audio_btn {
width: 216px;
background-image: url('../images/buttons/audio.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#music_btn {
width: 216px;
background-image: url('../images/buttons/music.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#newsletters_btn {
width: 216px;
background-image: url('../images/buttons/newsletters.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#scroll_btn {
width: 216px;
background-image: url('../images/buttons/scroll.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#teachings_btn {
width: 216px;
background-image: url('../images/buttons/teachings.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#true_worship_btn {
width: 216px;
background-image: url('../images/buttons/true-worship.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#video_btn {
width: 216px;
background-image: url('../images/buttons/video.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}
#bible_btn {
width: 216px;
background-image: url('../images/buttons/Holy-Bible.png'); 
background-repeat:no-repeat;
height:45px;
text-align:left;
}

#container {
text-align:left;
}

michaellunsford · November 2, 2010

To center the background:

background-image: url('../images/home_page_image.png') no-repeat top center; /* center center would also center vertically */

The buttons will likely cover the centered background image, so you could also nudge it by providing a pixel value, like 100px, instead of "center"

lional · November 2, 2010

I am not worried about the buttons overlapping the image, but I still can't seem to center the image, here is the code for the image

#home_im {

width: 800px;

height:450px;

background-image: url('../images/home_page_image.png');

background-repeat:no-repeat;

top: center;

}

michaellunsford · November 2, 2010

You have a top property set to center. You need to assign the position to the background property, not the whole div. You can in-line all that stuff under background. See my example code again above. Also, here's a link to the background property (and all the stuff you can do with it) here:

http://www.w3schools.com/css/pr_background.asp

lional · November 2, 2010

but I already have a background set on the body tag, then I need this image set center, and then the buttons on the left hand side starting at the top, and each one going below the previous one.

michaellunsford · November 2, 2010

I missed the body background. The whole reason for having an external style sheet is to separate style from content. So, stay true to that and pull that body style out of your html and onto your external stylesheet like so:

body {
  background:url(bakgr2.png) no-repeat center center #FFFFFF; /* or whatever background color you want */
}

lional · November 2, 2010

I have moved the body background, now I need to center the second image, then it will be like I need it

Thanks

michaellunsford · November 2, 2010

depends on what you mean by "center." If you mean center the background image inside the div, just follow the same directions as above. If you mean center the div left to right on the page, a simple "margin:auto;" can do that.

lional · November 2, 2010

I have my background image that is b stones that gets repeated. That is part of the body tag.

Then I have home_im that is an image 800px wide and 450 px high that I want in the center of the page irrespective what the resolution is of the user. It will look like the bricks form a border around the picture.

Then I have my buttons on the left hand side, starting at the top

michaellunsford · November 2, 2010

so you want to center the main div in the page.

To center your div vertically and horizontally, one way is to use absolute positioning with negative margin. Although I believe some versions of IE don't like negative margin.

#home_im {
  position:absolute;
   width: 800px;
   height:450px;
   background-image: url('../images/home_page_image.png') no-repeat;
   top:50%;
   left:50%;
   margin-top: -225px;
   margin-left: -400px;
}

lional · November 3, 2010

thanks, works fine. Will check out different versions of ie

Sign In

displaying images with CSS

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information