[resolved] how to add background image to a text container? (7 posts)

  1. littlebizonline
    Posted 1 year ago #

    I would like to change the background colour of the three orange boxes on my homepage to an image (same image in all three boxes). These boxes are created using Drop Shadow Box plugin, but any help to a) isolate these three boxes in style.css, and b) get the right code to change to an image would be greatly appreciated.

    I have used this plugin elsewhere on my site, and do not want to change the background of all of them too.

    Website is http://www.bemorenow.net/evolution


  2. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using Firefox with the Firebug add-on for this kind of CSS troubleshooting. Or use whatever developer tool is available in your web browser.

  3. Borko
    Posted 1 year ago #

    You should really ask the plugin author in the Drop Shadow Boxes plugin dedicated sub-forum. I'm not sure if you can build a plugin shortcode that supports background image.

  4. Rod Whiteley
    Posted 1 year ago #

    Shortcodes can certainly support background images.

    It might be easiest to avoid using the plugin on your home page, and instead write HTML to make the boxes look the way you want them.

  5. littlebizonline
    Posted 1 year ago #

    Thanks for your feedback - unfortunately I have found the author of this plugin unresponsive to some other questions and need to press on to get this site live...
    If I go down the route of creating my own boxes using HTML, could you please give me some pointers on how to add an image to the below?

    <div style="width:191px;height:160pxfloat:right;background-color:#F1671F;margin-left:18px;padding:12px;">

    I have tried this, but not had any luck (the image is loaded via the c-panel):

    <div style="width:191px;height:160pxfloat:right;background-image:url(Images/button.png);margin-left:18px;padding:12px;">

    The image I am uploading has rounded corners - do I need to do anything to the text container to keep the gap between the rounded and squared corners "empty"?
    I am pretty new to this stuff, so if I am going in the wrong direction, please let me know.

    Thank you!!

  6. Rod Whiteley
    Posted 1 year ago #

    That looks like a reasonable direction to go in. The existing style specifies rounded corners. With a background image, it's something like:

    width: 191px;
    height: 202px;
    padding: 10px;
    margin: 10px 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.3), 0px 0px 20px rgba(0, 0, 0, 0.1) inset;
    background: url(Images/button.png);
  7. littlebizonline
    Posted 1 year ago #

    awesome thank you!
    I have also brushed up on my css and html understanding to get the above to work as I need it to.

Topic Closed

This topic has been closed to new replies.

About this Topic