Tagged: background image, icon box
-
AuthorPosts
-
June 15, 2014 at 9:43 am #279062
Hi,
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.
Matt
June 16, 2014 at 3:43 am #279200Hi 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:
add_theme_support('avia_template_builder_custom_css');
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: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
Best regards,
IsmaelFebruary 5, 2016 at 9:59 pm #578795Correct 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,
-OwenFebruary 5, 2016 at 10:14 pm #578802Hi!
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,
BasilisFebruary 9, 2017 at 8:57 pm #745051This 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.
February 9, 2017 at 9:26 pm #745069Hey!
can yu please show is your web site?
Thanks a lotRegards,
BasilisFebruary 9, 2017 at 9:34 pm #745073Hi Basilis – this is the url http://jimbutlerdays.tonopahnevada.com/forms-applications 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!
February 12, 2017 at 10:28 pm #746045I 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!
February 12, 2017 at 10:56 pm #746053Hey!
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.Cheers!
Basilis -
AuthorPosts
- The topic ‘Background image in icon box’ is closed to new replies.