WordPress.org

Support

Support » How-To and Troubleshooting » [Resolved] how to add background image to a text container?

[Resolved] how to add background image to a text container?

  • littlebizonline
    Participant

    @littlebizonline

    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

    Thanks

Viewing 6 replies - 1 through 6 (of 6 total)
  • esmi
    Forum Moderator

    @esmi

    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.

    Borko
    Participant

    @media-x

    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.

    Rod Whiteley
    Member

    @rod-whiteley

    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.

    littlebizonline
    Participant

    @littlebizonline

    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;">
    BOXED TEXT HERE
    </div>

    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;">
    BOXED TEXT HERE
    </div>

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

    Rod Whiteley
    Member

    @rod-whiteley

    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);
    littlebizonline
    Participant

    @littlebizonline

    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Resolved] how to add background image to a text container?’ is closed to new replies.