Ok, so in my page I am showing a background image with this css:

Question

0

Asked: May 16, 20262026-05-16T12:06:22+00:00 2026-05-16T12:06:22+00:00

Ok, so in my page I am showing a background image with this css:

0

Ok, so in my page I am showing a background image with this css:

.heroarea {
    background:url(/static/images/mrd_hero_01.jpg) no-repeat;
    height:450px;
}

and the copy placed over it and the container the copy is in have these styles:

.main-panel {
    position: absolute;
    top: 130px;
    left: 380px;
    background: #fff;
    width: 560px;
    height: 340px;
    padding: 30px 30px 20px 30px;
    /* CSS3 standard */
    opacity:0.5;
    /* for IE */
    filter:alpha(opacity=50);
}
.main-panel h1 {
    background: transparent;
    color:#39372f;
    text-align: center;
    /* CSS3 standard */
    opacity:1;
    /* for IE */
    filter:alpha(opacity=100);
}

Generally, everything is as expected. That is, the image shows where I expect it to show. main-panel shows a white back ground with a transparent background. However, the text in the h1 tag is also transparent. I can see the image from underneath showing through. How can I make this so that the h1 tag content is not opaque?

Thanks!