CSS Background transparency with text fully visible

Question

I'm trying to achieve the effect where I have a transparent background color of a div (so that I can see the image in the back) and keep the main content of the website centred (even when resizing window).

I wrote a quick mock up in JS fiddle to demonstrate what I am trying to do. The problem that I am encountering is that when I set opacity to the root div, every child of the div gets that opacity and I cannot over write it. I understand that the way I am doing it in the fiddle it doesn't work due to nothing being fixed, however how do I achieve having this effect and keeping the website centred when resizing?

Can I do this without using JS?

Last note, in the JS Fiddle, the text should be opacity 1 while the yellow should stay opacity 0.3

Here is the JS Fiddle: http://jsfiddle.net/7d6NY/

HTML:

    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQuK9zPKC8rFhpf1S9-2bGCaIUdm9-YMeQiBRdc5rRY_xiQTYvd" alt="image missing" class="bg-image" />
<div class="transparency">
    <div class="content">
        THIS IS MY PAGE CONTENT
    </div>
</div>

CSS:

    .transparency{
    background-color: yellow;
    display: block;
    opacity: 0.3;
    margin: 0 auto;
    width: 300px;
    height: 500px;
}
.content{
    color: #000;
    opacity: 1;
    text-align: center;
}
img{
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1920px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;   
}

Answer 1

You can use rgba (more info on MDN) value for a transparent background color + don't forget to give a negative z-index value to the image so it stacks behind the content :

DEMO

CSS :

.transparency{
    background-color: rgba(255, 255, 0, 0.3); /* <-- this line is modified */
    display: block;
    margin: 0 auto;
    width: 300px;
    height: 500px;
}
.content{
    color: #000;
    text-align: center;
}
img{
    /* Set rules to fill background */
    min-height: 100%;
    min-width: 1920px;
    /* Set up proportionate scaling */
    width: 100%;
    height: auto;
    /* Set up positioning */
    position: fixed;
    top: 0;
    left: 0;  
    z-index:-1; /* <-- this line is added */
}

Answer 2

Does a background-color with a "RGBa" value help you ?

.content{
    background-color:rgba(255,255,0,0.3);
    color: #000;
    opacity: 1;
    text-align: center;
}