Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #279062


    Is there a way to use a background image in the icon boxes at all, and then to have the text written over the top of it?

    Many thanks for your help.



    Hi SMDNAS!

    Thank you for visiting the support forum!

    Yes, that is possible but first you need to add the avia_template_builder_custom_css support. You’ll be able to add a unique selector for each Avia Elements. Edit functions.php, find this code:

    if(isset($avia_config['use_child_theme_functions_only'])) return;

    Below, add this code:


    Edit any avia elements like the iconbox element then scroll below. Add a unique css selector on “Custom Css Class” field. For example, add “iconbox-bg”.

    You can add something like this on your custom.css or Quick CSS:

    .iconbox.iconbox-bg .iconbox_content {
    background: red;

    Refer to this link for more info: (Purchase code hidden if logged out) -for-all-alb-elements/

    Best regards,


    Correct me if I am wrong, but this appears to add a background color, but the original question was if he could add an image as a background….that is exactly what I was trying to do.

    The correct code is:

    .iconbox.iconbox-bg .iconbox_content {
    background-image: url("/wp-content/uploads/2016/02/OrangeBackground.jpg") !important;




    Thanks a lot @Owen for providing the alternative, we do appreciate that a lot!
    @smdnas let us know if you need anything else related to our theme!

    Best regards,


    This didn’t work for me :/ I added the code in functions.php – then added the custom css and my background isn’t showing up in the boxes.



    can yu please show is your web site?
    Thanks a lot



    Hi Basilis – this is the url I even tried using this in the quick css and that didn’t work either.

    div#iconbox_content {
    background-image: url(‘/wp-content/uploads/2017/02/box_bgr.jpg’) ;

    Thanks so much for any help!


    I found a solution – I added this to the quick css –

    .main_color.iconbox_top .iconbox_content {
    background-image: url(‘imagepath.jpg’);

    Worked like a charm!



    Thanks a lot for letting us know and updating it the post.
    Feel free to let us know if we can do anything else for you.


Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Background image in icon box’ is closed to new replies.