centering an image in a box
-
hi everybody,
i need some help about css editing. i’m going to derive a template from the twentyeleven theme and i’d like to center a header image in box. I already found a solution through absolute positioning. in style.css:
#branding {
border: 2px solid #c00;
position: relative;
width: 996px;
height: 250px;
z-index: 2;
}
.header-img {
position:absolute;
left:50%;
top:50%;
margin-left:-377px;
margin-top:-71px;
overflow: hidden;
}
and header.php includes:
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<div class="header-img">
<img id="header-img" src="image_path" width="754" height="142" alt="" />
and so on. I’m not satisfied with it, because it’s not ‘image dimensions indipendent’. maybe i could set the header as a background image inside the branding box, but some code, such as:
#branding { //or .header-img?
width:996px;
height:184px;
border: 2px solid #c00;
background:url(image_path) no-repeat center;
}
doesn’t work. what am i wrong with?
thanks for your help. -
You did not specify a blog address or reason for posting when you created this topic.
This support forum is for blogs hosted at WordPress.com. If your question is about a self-hosted WordPress blog then you’ll find help at the WordPress.org forums.
If you don’t understand the difference between WordPress.com and WordPress.org, you may find this information helpful.
If you forgot to include a link to your blog, you can reply and include it below. It’ll help people to answer your question.
This is an automated message.
-
i solved the problem with:
background: url(image_path) no-repeat center;
in the previous post i meant to type:
background-image: url (image_path) no-repeate center;
i don’t know why background works and background-image doesn’t, but i made it. if someone can explain that, i’ll be grateful. -
The background-image rule is just for adding an image without those other arguments like no-repeate or center. If you have anything extra besides the image url() then you need to use background.
See http://www.w3.org/TR/CSS2/colors.html#background and http://www.w3.org/TR/CSS2/colors.html#propdef-background-image
-
-
- The topic ‘centering an image in a box’ is closed to new replies.
WordPress.com Forums 