Watermarks

• 

  crossfithubtown · Member · Jan 6, 2016 at 1:03 pm

  • Copy link
  • Add topic to favorites

  Wondering if it is possible to have an image appear as a watermark behind post text. Possible?

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

• 

  thesacredpath · Member · Jan 7, 2016 at 9:47 pm

  • Copy link

  Behind the post content itself, or behind the entire post (title all the way down to the related section below it?

  Yes it is possible, but it is a bit tricky. If we set a background image on the content, and then set an opacity, it will change the opacity of all the child elements (title, paragraphs, etc.) within that parent div.

  It would be best to create an image in an image editing program and adjust the transparency of that image as desired and then save it as a PNG image with no background.

  Upload the image to your media library, get the URL of that image and replace URL_OF_IMAGE between the quote marks with the URL of your new image. Here is the CSS.

  .single .entry-content {
      background-image: url("URL_OF_IMAGE")
      background-size: cover;
  }

  The background size declaration is included to force the image to cover the entire background of the entry content area. It is best to have an image that is simple and isn’t affected by being cropped to fit the entire area since posts can vary in length.

  Give the above a try and let me know if you have any problems or questions.