WordPress.org

Ready to get started?Download WordPress

Forums

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

  1. littlebizonline
    Member
    Posted 10 months 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

    Thanks

  2. esmi
    Forum Moderator
    Posted 10 months 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. Media X
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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;">
    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!!

  6. Rod Whiteley
    Member
    Posted 10 months 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
    Member
    Posted 10 months 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.

Reply

You must log in to post.

About this Topic