Jump to content

displaying images with CSS

lional

By lional
in CSS Help

 Share

Recommended Posts

lional Advanced Member

lional

Posted
Posted

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;
}

Link to comment
https://forums.phpfreaks.com/topic/217446-displaying-images-with-css/
Share on other sites
lional Advanced Member

lional

Posted
  • Author
Posted 
<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 Advanced Member

michaellunsford

Posted
Posted

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 Advanced Member

lional

Posted
  • Author
Posted

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 Advanced Member

lional

Posted
  • Author
Posted

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 Advanced Member

michaellunsford

Posted
Posted

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 Advanced Member

lional

Posted
  • Author
Posted

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 Advanced Member

michaellunsford

Posted
Posted

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

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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 */
}

michaellunsford Advanced Member

michaellunsford

Posted
Posted

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 Advanced Member

lional

Posted
  • Author
Posted

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 Advanced Member

michaellunsford

Posted
Posted

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;
}

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.