Opaque text over semi-transparent background

Question

I am a total newbie to code and I am trying to edit one of tumblr themes. I have been ravaging the web for tutorials but I can't solve this. I want to have a transparent content background, which I have so far, by adding opacity: #background { background:{color:Content Background}; margin: 0 auto; width: 730px; **opacity: 0.5;** } but I would like the text to remain opaque. How can I do this, please?

Here is what I have:

 body {
   margin: 0 auto;
   width: 100%;
   height: 100%;
   background: {
     color: Background
   }
   url('{image:Background}');
   background-repeat:no-repeat;
   background-position:center;
   background-attachment:fixed;
   color: {
     color: Primary colour
   }
   ;
   font-family: {
     font: Body
   }
   ,
   Baskerville,
   Times,
   "Times New Roman",
   serif;
   font-weight:300;
   font-size:13px;
   line-height:24px;
 }
 #background {
   background: {
     color: Content Background
   }
   ;
   margin:0 auto;
   width:730px;
   opacity:0.5;
 }
 #background-inner {
   margin: 0 auto;
   background: {
     color: Content Background
   }
   ;
   border-left:15px solid;
   {
     color: Stripe
   }
   ;
   border-right:15px solid {
     color: Stripe
   }
   ;
   width:670px;
 }
 section#blog {
   margin: 0 auto;
   width: 670px;
 }

Answer 1

• First of all your CSS has a few errors.
• Secondly, in order to achieve what you want you need to use RGBA in background.

Why you need to use rgba?

According to MDN

The value applies to the element as a whole, including its contents, even though the value is not inherited by child elements. Thus, an element and its contained children all have the same opacity relative to the element's background, even if the element and its children have different opacities relative to one another.

Snippet

body {
  background: rgba(0, 0, 0, 0.5) /* background black with 50% opacity */
}

<div>This will be opaque</div>