Home>Support>Background Image Size

Background Image Size

By haydrw, 8 years ago. Last reply by haydrw, 8 years ago.

Hi there,

I am using the site origin slider from prebuild layout (MODERN DESIGN) and have inserted an image using “choose media” for background image.
It’s currently at an idea size because it has the foreground http://layouts.siteorigin.com/wp-content/uploads/2015/08/Modern-Design-Overlay.png#1280×500 placed on top of it.

However, when I remove that, the overall size of the image changes.

Could someone please tell me how to keep the size of my picture when the foreground info is there but I want to be able to remove/ and or change the wording “MODERN DESIGN, architecture, construction and project management.”

Thank you.

and if it’s possible, how to raise or lower the text on the picture.

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

  1. 8 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Haydrw,

    The overlay.png image is there to automate the height of the row. If you want to manually set it you’ll have to use some custom CSS. Do you have a public URL where I can take a look? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    • 8 years, 7 months ago Private Message - haydrw

      This is a private message.

      • 8 years, 7 months ago Alex S
        Hi, I Work Here

        Hi Haydrw,

        Please try the following CSS to make up for the overlay not being there. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

        #pgc-153-0-0 { 
    height: 500px;
}

        To remove the title from all posts use the following CSS.

        .entry-header {
    display: none !important;
}

        You might also need to install the SiteOrigin CSS Editor.

        • 8 years, 7 months ago haydrw

          Hey Alex,

          Thanks! I got rid of the entry header but did not solve the overlay issue.
          I removed the overlay external url to get rid of the wording but the size has made the pictures really big again.

          http://nordicnorth.com/index.php/sweden-2/

          • 8 years, 7 months ago Alex S
            Hi, I Work Here

            Hi Haydrw

            Oh my mistake. Please try the following CSS isntead. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

            .sow-slider-image img {
    max-height: 500px;
}

            You might also need to install the SiteOrigin CSS Editor.

  2. 8 years, 7 months ago haydrw

    Awesome thanks heaps!

  3. 8 years, 7 months ago haydrw

    Sorry to be a pain but now the picture has stretched? Any ideas?

  4. 8 years, 7 months ago Alex S
    Hi, I Work Here

    Hi Haydrw,

    I would suggest adjusting the above set max-height to the desired height of the image.

  5. 8 years, 7 months ago haydrw

    Good call!

    Cheers

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

    Hi Haydrw,

    Awesome. Is there anything else I can help you with?

  7. 8 years, 7 months ago haydrw

    For now, no.

    You’ve been great! Cheers for the help Alex.

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