0

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;
 }
dippas
  • 58,591
  • 15
  • 114
  • 126
beingzen
  • 3
  • 2

1 Answers1

3
  • 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>
dippas
  • 58,591
  • 15
  • 114
  • 126
  • To explain a bit more the concept: Setting opacity on a parent element will affects all child elements and anything within that element too, and can't be over ridden on child elements. Whereas rgba affects only one aspect, which is the color. – IndieRok Feb 15 '16 at 15:44
  • 1
    Added a detailed explanation (I couldn't remembered where I have seen this text before) :) – dippas Feb 15 '16 at 15:49
  • Your explanation was incredibly useful! Thank you! – beingzen Feb 15 '16 at 16:02