Header/Background brightness change

• 

  drtonyamiles · Member · Jul 9, 2015 at 7:13 pm

  • Copy link
  • Add topic to favorites

  I need the paisley area of the background and header to have a reduced brightness or something else in order for it to not be as distracting. I am using the matala theme, and i don’t want to change anything except for the brightness of the paisley area.

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

• 

  timethief · Member · Jul 9, 2015 at 7:20 pm

  • Copy link

  What is the exact URL of the blog wearing Matala please? The one linked to above is wearing Suburbia.

• 

  drtonyamiles · Member · Jul 9, 2015 at 7:29 pm

  • Copy link

  Oops, i chose the wrong one. sorry for the confusion! drtonyamiles5.wordpress.com

• 

  thesacredpath · Member · Jul 9, 2015 at 9:50 pm

  • Copy link

  Hi @drtonyamiles, due to the way the HTML and CSS are structured, we can’t adjust the opacity of just the image. Opacity will adjust all elements within that #wrapper div, including all the content and such. Here is the image: https://s0.wp.com/wp-content/themes/pub/matala/images/bg-wrapper.jpg. Note that the image is more than just the blue section at the top.

  What I would suggest would be to take that image into an image editing program and adjust it as you desire. You would then upload that new image, with a new name, to your media library, get the URL of that image and then replace URL_OF_IMAGE between the quote marks in the following CSS.

  #wrapper {
      background-image: url('URL_OF_IMAGE');
  }

• 

  drtonyamiles · Member · Jul 10, 2015 at 8:21 pm

  • Copy link

  I did that and it worked, however, now at the bottom section of the website the background is a different color. I need the css code for that bottom section and the picture url so i can edit it with the editing software i used.

• 

  drtonyamiles · Member · Jul 10, 2015 at 9:29 pm

  • Copy link

  Also, how should i go about fixing the jagged/non connected footer lines? it is supposed to be a solid line but looks like a widget has moved parts of it up and/or down.

• 

  thesacredpath · Member · Jul 11, 2015 at 1:32 am

  • Copy link

  Oops, you will need to edit another image. This is the one at the bottom of the site: https://s0.wp.com/wp-content/themes/pub/matala/images/bg-body.jpg . And here is the CSS to add. Again, just add in your URL instead of the placeholder.

  body {
      background: rgba(0, 0, 0, 0) url("URL_OF_IMAGE") repeat-x scroll left bottom;
  }