Theme Catch Box transparant for background (8 posts)

  1. Rody Klop
    Posted 4 years ago #

    I want to add a photo as background, but also want catchbox to be transparant so the theme and background merge. To make it difficult the text must be readable too.

    I want to use a darken colorphoto to merge with a theme color (as dark glass). I think (not sure) I need to edit this in the CSS.

    Can somebody help me ?

  2. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    Can you find an example of what you mean, a screenshot, a website etc. ?
    Can you also link to your website or Pastebin.com both your HTML and CSS code?

  3. Rody Klop
    Posted 4 years ago #


    This is what I like to get (the box is the theme catchbox) background the picture. (the area is like looking through a glass).

    The website I need to do this is not officially available yet.


    Thank for the help

  4. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    You could apply transparency through CSS

    selector {
    	filter: alpha(opacity=50); /* internet explorer */
    	-khtml-opacity: 0.5;      /* khtml, old safari */
    	-moz-opacity: 0.5;       /* mozilla, netscape */
    	opacity: 0.5;           /* fx, safari, opera */

    But there's often a problem with the selector's children elements inheriting the same transparency.
    Here is a blog/tutorial about the children transparency

    Or you could, through CSS, apply a 1px by 1px transparent image and have it repeat throughout the background.

  5. Rody Klop
    Posted 4 years ago #

    Where should I insert this in the style.css ?
    Because I tried several locations and nothing changes.

    I am a bit of a noob in CSS

  6. Andrew Nevins
    Forum moderator
    Posted 4 years ago #

    To add CSS, you should be using the either;

    ☛ A Child Theme - http://codex.wordpress.org/Child_Themes
    ☛ A Custom Style plugin - http://wordpress.org/extend/plugins/custom-style/

  7. Rabin(Catch Themes)
    Posted 4 years ago #

    Hi Rody Klop,

    If you want to change the css then is another option too. Just go to Theme options under Appearance in your back-end. You can paste the CSS in Custom CSS Styles box. This will override the default style

    Rabin Shrestha(Catch Themes)

  8. Rody Klop
    Posted 4 years ago #

    Call me stupid or it doesn't work this code...
    Nothing changes

Topic Closed

This topic has been closed to new replies.

About this Topic