Background page with opacity

How can I have an opaque text block background, like say this one http://www.cucinadesign.co.uk/index.php?

At that site the three blocks in the middle all have text with an opaque background. This makes the text stand out.

Any help is appreciated

You could either use transparent png as background and repeat it across entire element, or use rgba as background color instead of standard #rgb

Hi, there are few solutions/options to do this.

1) Check our template: http://demo.gavick.com/joomla25/magazine/ - home page, scroll down as you find "Featured News" - install qucikstart on your subdomain or localhost and check how we did this

2) Use CSS and simple HTML code, see my solution from other website

1) CREATE CUSTOM HTML MODULE and:

Code: Select all

 <div>
<img alt="picture" src="/images/your-image.jpg">
<h3 class="caption_h3">
<a href="#">BIG NAME ON IT</a></h3>
</div>

ADD THIS CSS to your stylesheets

Code: Select all

.caption_h3 {
    background: none repeat scroll 0 0 rgba(84, 83, 78, 0.77);
    color: #FFFFFF;
    display: block;
    float: left;
    font-family: Verdana,Geneva,Arial,Helvetica,sans-serif;
    font-size: 1.3em;
    font-weight: normal;
    height: 60px;
    line-height: 1.5em;
    margin-top: -70px;
    max-height: 60px;
    opacity: 1;
    padding-left: 5px;
    position: absolute;
    text-align: left;
    text-rendering: optimizelegibility;
    transition: background-color 0.4s ease-in 0s;
    width: 309px;
    z-index: 100;
}

Well, thanks for a quick reply although I have not been wiser. To illustrate my problem please take a look at www.mela.no/melafest. The text on the picture (thumb) "Bli frivillig på Mela" is white and that is making it difficult to read. That´s why I am looking for an option to make it more visible.

I thought this could be configured somewhere on the News Show Pro GK5 module?

Quick fix:
edit /templates/gk_rockwall/css/override.css
and add at its end:

Code: Select all

.gkNspPM-TitleOverlay >figure >figcaption {
    background: rgba(0, 0, 0, 0.8);
    width: 100%
    }


(width 100% is just my taste and You can delete it).

Just remember to enable use of override.css in theme advanced settings.

Quick fix:
edit /templates/gk_rockwall/css/override.css
and add at its end:

Code: Select all

.gkNspPM-TitleOverlay >figure >figcaption {
    background: rgba(0, 0, 0, 0.8);
    width: 100%
    }


(width 100% is just my taste and You can delete it).

Just remember to enable use of override.css in theme advanced settings.

Hi Cyberek thank you. You made my day!