Home>Support>How do I eliminate white spaces around image

How do I eliminate white spaces around image

By tonykerns, 6 years ago. Last reply by Alex S, 6 years ago.
Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

I am currently working within a frame of SiteOrigin Hero. I have centered an image and written text below it as well as set a background image. The issue is that there is a white “bar” running the entire length of the widget with the picture in the middle (the rest of the widget is showing great). I need to keep the image the current size, but need the background image to show through (instead of the white space).

Here is my website: www.aperfectbalancellc.com

Thank you – Tony

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Tony,

    I’ve had a look at your website and I can’t seem to see the white bar you’ve described. Did you manage to remove it? If not, can you please show me a screenshot of what you’re seeing? Please note that we’re unable to process attachments at this time. You’ll need to upload the image to a third party image hosting site like Imgur or vgy.me.

  2. 6 years, 5 months ago tonykerns

    Here is a screenshot:

    https://vgy.me/xOPCY5.jpg

  3. 6 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Tony,

    Thank you for the screenshot. That area has a different color due to a pre element being present. Please open the SiteOrigin Hero widget used to add the image and switch to text mode. Replace:

    <pre><img class="wp-image-181 aligncenter" src="https://aperfectbalancellc.com/wp-content/uploads/2019/01/Lori-England.jpg" alt="" width="193" height="193"></pre>

    With:

    <img class="wp-image-181 aligncenter" src="https://aperfectbalancellc.com/wp-content/uploads/2019/01/Lori-England.jpg" alt="" width="193" height="193">
  4. 6 years, 5 months ago tonykerns

    Thank you – that did get rid of the white space but now the picture is huge. I tried to adjust the height and width in the code, but that did not change anything. I tried to go to the media center and resize the picture, but that did not work. I am really having a time with this one picture.

  5. 6 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Tony,

    That’s odd. Please try changing to a SiteOrigin Editor widget as it appears this is happening due to using a SiteOrigin Hero widget. You can add a background to a widget by opening the widget, head over to the widget styles sidebar and open the Design settings group. Set the Background Image as desired.

  6. 6 years, 5 months ago tonykerns

    That gave me the control I needed.

    Thank you for all your help!

  7. 6 years, 5 months ago Alex S
    Hi, I Work Here

    Hi Tony,

    Great to hear! :)
    Please be sure to post another thread if you have any other questions.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More