Title Background Wrapping
- by laxj11
Ok, I am pretty experienced at CSS but at this point I am at a loss.
I layed out how I want the title to look like in photoshop:
however, the closest I can approach it with css is:
I need the black background to extend to the edges of the image and padding on the right side of the title.
I hope you understand my question! thanks.
here is the html:
<div class="glossary_image">
<img src="<?php echo $custom_fields['image'][0]; ?>" />
<div class="title">
<h2><?php the_title(); ?></h2>
</div>
</div>
and the css:
.glossary_image {
position: relative;
height: 300px;
width: 300px;
margin-top:10px;
margin-bottom: 10px;
}
.glossary_image .title {
position: absolute;
bottom: 0;
left: 0;
padding: 10px;
}
.glossary_image .title h2 {
display: inline;
font-family:Arial, Helvetica, sans-serif;
font-size: 30px;
font-weight:bold;
line-height: 35px;
color: #fff;
text-transform:uppercase;
background: #000;
}
