How to add image as a background to textarea only

• 

  oritsh · Member · Apr 17, 2013 at 4:25 am

  • Copy link
  • Add topic to favorites

  Because it’s not easy to read text with the background i choose as my page background, i like to put some half-transparent white image in the background of the text area only.
  i’m new with the css .. (: can you please tell me where i should put this background css code ?
  Many thanks
  Orit

  The blog I need help with is: (visible only to logged in users)

• 

  designsimply · Member · Apr 17, 2013 at 3:37 pm

  • Copy link

  Could you link us to a specific post or page we can look at as an example?

• 

  thesacredpath · Member · Apr 17, 2013 at 3:42 pm

  • Copy link

  There are a couple ways to do this. One is to create a small image, say 5px x 5px as a PNG with the level of transparency (opacity) you desire and then use that as a repeating background for the content area. The second is to use CSS3 and rgba in the background declaration, but while most modern browsers support this, IE8 and older do not. The number of people using IE 8 and older though is tiny.

  This would be white at a 0.55 opacity (1 would be no transparency at all).

  #page {
      background: none repeat scroll 0 0 rgba(255, 255, 255, 0.75);
  }

  To use a background image with transparency, do just as you did for the background image you are using in #page, except for the #FFFFFF color you have at the end of the declaration, use “transparent”.

• 

  thesacredpath · Member · Apr 17, 2013 at 3:43 pm

  • Copy link

  Shoot, let me tidy up the code I gave a little as it has stuff in it that isn’t needed.

  #page {
      background: rgba(255, 255, 255, 0.75);
  }

• 

  preciousmay · Member · Apr 17, 2013 at 3:47 pm

  • Copy link

  please, i also need help on my site :(
  if you’ll visit it, you’ll see what the problem is.. please, help me
  http://www.freddietoinfinity.com

• 

  oritsh · Member · Apr 17, 2013 at 4:45 pm

  • Copy link

  Hi designsimply, you can see this page with text in it
  http://iris-duvdevani.com/about/
  http://iris-duvdevani.com/about-heb/

  Thank you thesacredpath for your detailed explanation but i think what you gave me is background for all the inside area which i already use. what i need now is other background – up on this one – but just where the inside text appear (as you can see in the links above – the text area that start with “» Feldenkrais method teacher…”. )

  Thanks again for your help !
  Orit

• 

  thesacredpath · Member · Apr 17, 2013 at 5:55 pm

  • Copy link

  @preciousmay, since your problem is different from what is being discussed in this thread, let’s keep to the threads you have already started. I’ll be around to look into your issues shortly. Thanks.

• 

  thesacredpath · Member · Apr 17, 2013 at 6:04 pm

  • Copy link

  This will do just the content:

  .entry-content {
  background: rgba(255, 255, 255, 0.75);
  padding: 20px;
  }

  This would do the content and page titles:

  .hentry {
  background: rgba(255, 255, 255, 0.75) !important;
  padding: 20px;
  }

• 

  oritsh · Member · Apr 18, 2013 at 6:39 am

  • Copy link

  Thanks a million thesacredpath !! This is exactly what i was looking for.
  i really appreciate your help.
  Orit

• 

  thesacredpath · Member · Apr 18, 2013 at 3:17 pm

  • Copy link

  @oritsh, you are welcome.