Changing transparency/opacity of the slider text background 40

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 :


  • 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!

  • Quickly and easily… love it… works great!!!

    • Thanks Tom. Enjoy the theme

  • 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?

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

      • 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.

        • Hi, for IE, here’s the updated code to disable this background :


  • Hdl

    i need change the size more width of slider text background. can you help me ?

  • Bob

    Can you remove the call to action from a slider so that I can create the Text I want on the Slider it self ?>

  • Hi,

    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

    • Hi Maryam, I just checked your website (nice by the way !) and it seems to be fixed?
      Can you share what you did to fix this?

      • Maryam

        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,


        • 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.

  • Maryam

    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.

  • you can also radius the corners of the slider text background

    • Yep thanks for the tip Jeff. Nice!

  • 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.

    • Richard

      Mickael you can change slider size by using this: Slider height snippet

      • Thanks for the contribution @Richard!

        • Thank you both! I found a way using your answers.

  • Sally Farmer

    Can you remove the background on just one slide but not the others? if so how?

  • Bunn

    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 🙂


    • 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 😀

      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! 🙂

  • how can i make a slider which is transparent and move on the image

  • Hello,

    I am trying these codes in Customizr 3.2 and they do not seem to be working. Is there any way I can get these to work or is there another code I can use to make the background of the text darker?

  • Hi Nicolas,

    Could you please someone help me please. It is very urgent. I updated the wordpress and customizer and did some silly changes to int.php and the whole page collapsed, I tried to paste the original codes again but i even lost the access to the domain part. I have absolutely no access to the admin any more. This website is for my a friend.
    all I am receiving is
    Parse error: syntax error, unexpected ‘else’ (T_ELSE), expecting function (T_FUNCTION) in /home/newsk932/public_html/wp-content/themes/customizr/inc/init.php on line 201

    could you please tell me how to get access to the admin again and solve this issue. I am having a heart attack here. please help me.
    website is :


    • Hi Maryam,
      Can you please post your support request in Customizr support forum.
      We’ll do our best to help and it will benefit to other users facing the same problem(s).
      Thanks for your understanding,

  • Dear Nicolas,

    I solved the problem of the website via FTP.
    seems like everything is fixed now.


  • Brendan

    Hi! I have applied the code in custom CSS to darken the opaque layer – it does not seem to work in this latest version of Customizr Pro 1.1.12 – site:

    How do I find code that works? thank you!

    • Brendan

      [UPDATE] it seems to affect the mobile (responsive) version but not the desktop version!

      • Hi Brendan,
        try the following css snippet :

        • Hi Nicolas

          Thank you for your reply – I tried that snippet – it only seems to work when I view the site on mobile! (same result as original snippet)


          • Ok, thanks for your feedback.
            This is weird : can you please open a new support topic about this in the Customizr support forum ?

            • Brendan


              yes I opened the new support topic at the Customizr forum. Thank you!


  • Simone

    I’m trying to change the transparency of the slider text background. But I can’t figure out how to open up the custom CSS panel so that I can use the code snippet you provide in this post??

    • Rocco Aliberti

      you should be able to access the custom css box navigating through Appearance -> Customize -> Advanced Options -> Custom CSS

      Hope this helps.