Changing transparency/opacity of the slider text background 28

Note : This snippet applies to Customizr version 3.1.x and below. It may not work with version 3.2+. Use with caution on 3.2+ and check the availability and type of the hooks in the Customizr hooks API.

1) Click on Customiz’it! button and open the Custom CSS panel.

2) Copy/paste the following code

3) the last value (0.2) is the opacity : 1 is black, 0 is transparent. Just try diferent value to find the desired opacity.


A quick update following the comments. If you need to fully disable this transparent background, use the code snippet below :


About Nicolas

My name is Nicolas Guillaume (nikeo). I am the developer of the WordPress Customizr Theme. This website is a discussion platform, your comments are welcome!

28 thoughts on “Changing transparency/opacity of the slider text background

  • Reply
    Patrick Burns

    Is it possible to get a box similar to the one in the slider to go around text in pages? I want to put some images as backgrounds in pages, but depending on format, the images either cover half or all of the page box. Sometimes the writing becomes very difficult to read, but in the slider it is ok because of the contrast.

    Many thanks!

  • Reply
    Marianne Munro

    I still can’t get the ‘box’ behind the text to disappear. I have added the above code to custom css and set the transparency to 0.0 from 0.2 and it is still there. What am I doing wrong?

    • Reply
      Nicolas Post author

      Hi Marianne, if you don’t want to see this text background, you can use the following code :

      • Reply
        Marianne Munro

        Thanks. That works good for newer browsers but for some reason still seems to show on slightly older browsers. Is there a code I can add that would eliminate it on those too as my client is using an older browser.

  • Reply


    Thanks for the beautiful Customizr Theme.

    I created a website with WordPress Customizr and it has got a child theme too. I used the codes you mentioned above to remove the background box on the slider and it was working well however recently after I did the updates for the website the box went back to normal and seems like the code is not working any more and I have no idea what else I can do.
    Moreover, the three circle images below the slider changed to rectangles too and I absolutley did no changes to them.
    If you could please help me to solve me these issues, I will be so grateful.

    Many thanks

      • Reply

        Hi Nicolas,

        Thanks for checking my website and for your comment.
        I realised that I had a mistake in typing the code you left above regards removing the background box on the sliders and I fixed the coding so it started working again. The code I used is
        .carousel-caption {
        background: none;
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
        and the part which was missing and was causing problem was the dot before carousel.

        regards the three rectangular images below the slider, I had no succes to solve the problem yet however I realised that they look circular in iphone and ipad but in my Sony Vaio laptop they look rectangular which I still have no idea how to fix it.

        Thank you once again for the beautiful Customizr Theme and if you could please give us a code which can make the rectangular images to circular in all different pcs and laptops, I would be very grateful.

        Many thanks,


        • Reply
          Nicolas Post author

          Hi Maryam, the circular images uses a CSS3 property that is supported by all modern browsers. Unfortunately some older browsers (like IE 8 or less) don’t support it, that’s why it is displayed rectangular.

  • Reply

    Hi Nicolas,
    Thank you very much for your help. I use IE8 on my laptop and it was really good to know that is the reason I see the images rectangular.
    I am relieved now. Many thanks once again.
    Have a great weekend.

  • Reply

    you can also radius the corners of the slider text background

  • Reply

    Hi Nicolas, I was wondering how you could change the size of the slider. I went through the customizer part but did not manage to find how to change the width and height. Can you please share some tips.

  • Reply

    LOVE LOVE LOVE the theme…

    I have a few questions.

    Do you have a recommended filesize (and pixel dimensions) for uplioaded images? Slides, gallery images etc? I am an artist and I always worry about my images getting distorted. ead getting started and I’m a bit unsure of the best image specs.

    Is there a way to change the opacity of the rectangular text box in the slider? I know you can change text opacity… but what about the box? Do they change together when you adjust opacity for the text?

    Is tiled galleries via JetPack disabled with this theme? I can’t seem to get the option when I create a gallery.

    Thanks so much for a kickass theme! PLEASE don’t stop updates and support. Not anytime soon :)


    • Reply
      Nicolas Post author

      Hi Bunn,
      1) Image sizes : here are the default image sizes used in Customizr. The theme is designed to keep aspect ratio of all images on any type of screen.

      2) rectangular text box in the slider : this is what this snippet is about :-D

      3) the theme is compatible with the Jetpack gallery. If you enabled it, Customizr will detect it and override the default theme’s gallery rendering.

      Don’t worry, this is not about to stop! :-)

Leave a Comment

Your email address will not be published. Required fields are marked *

Do you need to share some code? To display it in a nice looking syntax highlighter, wrap your code between the following tags (css code in this example) : <pre class="lang:css">YOUR CODE</pre> ( possible code language acronyms : css, php, xhtml, javascript, sql)

You may also use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">