adding a photo on top of a banner img

[shirestudios]

I would like to add a png photo that is just text, but with a shadow and transparent background on top of my main banner image.

See: www.phfcc.org for an example of this.

The photo text overlaps the top menu as well. (see example)

My site: joomla.rojasfam.com

The CSS:


/* CSS Document */

html {
height : 100%;
margin-bottom : 1px;
}

body {
background-color: #225495;
margin: 0;
}

div#center {
height: 100%;
margin: 0 auto;
min-width: 750px;
max-width: 1050px;
width: expression(document.body.clientWidth > 1050? "1050px": "auto" );
text-align: center;
background: url(../images/vd_background.jpg) left top repeat-y;
}

div#wrapper {
height: 100%;
background: url(../images/vd_background.jpg) right top repeat-y;
}

a:link, a:visited {
color: #1543d8;
font-weight: normal;
text-decoration: none;
}

a:hover {
color: #B30000;
text-decoration: underline;
}

h1 {
font-weight: normal;
font-size: 18px;
color: #000066;
}

h2 {
font-weight: normal;
font-size: 16px;
color: #000066;
}

td, p, div, span {
font-family: Tahoma, Helvetica, sans-serif;
font-size: 14px;
color: #000066;
line-height: 130%;
text-align: left;
}

h3, .componentheading {
color: #000066;
font-weight: normal;
font-size: 18px;
text-align: left;
font-family: Helvetica, Arial, sans-serif;
padding: 4px 0;
margin: 10px 0;
border-bottom: 1px solid #ccc;
}

.componentheading {
padding: 0;

}

.contentheading {
height: 35px;
vertical-align: bottom;
padding: 0;
margin: 0;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
color: #333;
font-weight: bold;
}

.buttonheading {
vertical-align: bottom;
}

.sectiontableheader {
font-weight: bold;
border-bottom: 1px solid #ccc;
}

table.contenttoc {
margin-left: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px;
}

span.small, td.createdate {
font-size: 11px;
font-weight: normal;
color: #999;
}

a.mainlevel {display: block;
background: url(../images/vd_menu_bullet.png) 0 -3px no-repeat;
padding-left: 78px;
height: 20px;}

div.clr {
clear: both;
}

div#center {
height: 100%;
text-align: center;
}

div#wrapper {
height: 100%;
margin-left: auto;
margin-right: auto;
min-width: 750px;
max-width: 1050px;
width: expression(document.body.clientWidth > 1050? "1050px": "auto" );


}

div#whitebg {
margin: 0 15px;
background: #fff;
}

#headerpic {
background: #ffffff;
padding:5px;
width:1010px;
height:200px
}

span.header {
display: block;
line-height: 90%;
vertical-align: bottom;
padding-left: 30px;
padding-top: 80px;
font-family: Times New Roman, Times, serif;
font-size: 36px;
color: #000066;
}
span.subhead {
font-family: Times New Roman, Times, serif;
font-size: 12px;
color: #CFEDC8;
padding-left: 30px;
}

div#padding {
padding-bottom: 14px;
}

div#horizsep {
height:1px;
overflow: hidden;
background: #ccc;
margin-top: 15px;
margin-bottom: 15px;
}

div#divider {
border: 1px solid #fff;
background: url(../images/vd_vert_sep.png) repeat-y;
background-position: 25% 0 !important;
background-position: 26% 0;
}

div.thinsep {
clear: both;
margin-top: 15px;
height: 5px;
overflow: hidden;
background: #000 url(../images/vd_header.jpg) 0 0 no-repeat;
}

div#footer {
clear: both;

margin-top: 15px;
padding: 5px 0;
text-align: center;
color: #999;
font-size: 10px;
}


div#main {
margin-left: 25%;

float: none;
width: auto !important;
width: 100%;
}

div#main_padding {
padding: 0 15px;
float: none;
width: auto !important;
width: 100%;
}

div#sidebar {
float: left;
width: 25%;
}

div#sidebar_padding {
padding: 0 15px;
float: none;
width: auto !important;
width: 100%;
}

.menu {
margin: 0;
padding: 0;
border: 1px solid #EEEEEE;
border-bottom: 0;
}
.menu li {
list-style: none;
float: left;
width: 100%;
}
.menu a {
display: block;
height: 34px;
padding: 0 0 5px 20px;
background: url(../images/bgOFF.gif);
text-decoration:none;
}
.menu a span {
line-height: 34px;
color:#000066;
}
.menu a:hover {
background: url(../images/bgON2.gif);
}
.menu a:hover span {
color:#B30000;
}

/* stylefour*/
#stylefour{position:relative;display:block;height:42px;font-size:13px;
font-weight:bold;background:transparent url(../images/bgOFF.gif) repeat-x top left;
font-family:Arial,Verdana,Helvitica,sans-serif;border-top:2px solid #B30000;}


#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}

#stylefour ul li{display:block;float:left;margin:0;}


#stylefour ul li a{display:block;float:left;color:#000066;text-decoration:none;
padding:11px 20px 0 20px;height:23px;
background:transparent url(../images/bgDIVIDER.gif) no-repeat top right;}


#stylefour ul li a:hover,#stylefour ul li a.current{color:#FFCD99;
background:#fff url(../images/bgON2.gif) repeat-x top left;}


span.pathway {
float: left;
line-height: 20px;
}



Thanks!

ShireStudios

P.S. The file I want to add is here: joomla.rojasfam.com/templates/ss_bibletranslators/images/HBTitle.png
and an example as to what I would like it to look like is here: joomla.rojasfam.com/templates/ss_bibletranslators/images/EXAMPLE.png

[Centauri]

Need to simplify this a bit. The vd_headerpic.jpg should not be an image in the html, but rather a background to the #header div. The logo can then be a <h1> heading, and the text replaced with your logo image in the css.

The #headerpic div is not required at all, and the html can then be simplified to: <div id="header">
<h1>Home for Bible Translators</h1>
</div>
The css for this is:#header {
background: #ffffff url(../images/vd_headerpic.jpg) no-repeat 5px 5px;
padding:5px;
width:1010px;
height:200px
}
#header h1 {
width: 578px;
height: 77px;
background: url(../images/HBTitle.png);
text-indent: -999em;
margin: 5px 0 0 50px;
}The #header div is given the correct size and padding and the background image is positioned to line up with that padding. The <h1> heading is styled to the size of the logo image, which it gets as a background. The negative text indent shoves the text off the left of the screen, but screen readers will still read this text. The blue highlighted margin figures can be adjusted to position the logo where you want.

[shirestudios]

I added the CSS and html coding...but this is what I got:

joomla.rojasfam.com

Is it possible to fix the mis-alignment of the banner and place the White text "Home for Bible Translators" near the bottom left corner of the banner so that it looks like this:

joomla.rojasfam.com/templates/ss_bibletranslators/images/EXAMPLE.png ??

thanks again!

[Centauri]

You have an extra #header div in the html - there should only be one. That fixes the header alignment.

The overlapping alignment of the logo can be done easily by absolutely positioning it. The #header div gets relative positioning (to provide the refrence for the logo) and the <h1> is absolutely positioned with negative left and bottom values instead of the margin used before. To ensure the logo overlaps the menu and doesn't go behind it, a z-index is also applied to #header. The modified css (with changes highlighted) is :#header {
background: #ffffff url(../images/vd_headerpic.jpg) no-repeat 5px 5px;
padding:5px;
width:1010px;
height:200px;
position: relative;
z-index: 100;
}
#header h1 {
width: 578px;
height: 77px;
background: url(../images/HBTitle.png);
text-indent: -999em;
position: absolute;
left: -3px;
bottom: -25px;
}

[shirestudios]

AWESOME!!!

Thank you so much!!

This CSS Stuff is really getting fun and exciting! It's amazing what you can do with it!

-ShireStudios