how to add background image to a text container?

  • Resolved littlebizonline

    (@littlebizonline)


    10 years, 7 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

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

    (@esmi)

    10 years, 7 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.

    Borko

    (@media-x)

    10 years, 7 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.

    Rod Whiteley

    (@rod-whiteley)

    10 years, 7 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.

    Thread Starter littlebizonline

    (@littlebizonline)

    10 years, 7 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!!

    Rod Whiteley

    (@rod-whiteley)

    10 years, 7 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);
    Thread Starter littlebizonline

    (@littlebizonline)

    10 years, 7 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.

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