This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Background Images

Open 10 replies pluginplugin-page-builder
Alexander Amos
10 years ago · Last reply by Magus 10 years ago

Hello, I am using page builder with the evolve theme. Is there a way to insert a full screen background image behind the rows? When I try right now the image only appears at the footer. I think the rows are blocking the background image.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

10
  1. Magus Staff 10 years, 8 months ago

    Hi Alexander Amos

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

    Thanks

    Magus

  2. Alexander Amos 10 years, 8 months ago

    hey Margus, thanks for replying!

    My website is test.eicanada.org

  3. Magus Staff 10 years, 8 months ago

    Hi Alexander

    I have tried to view your site a couple of times and am just getting a ‘page cannot be found’ error.

    Google is showing results from that site but I cannot Access from there either.

    Have you localized your site for specific countries only? If so could you please unlock for UK and South Africa so we can gain access.

    Magus

  4. Alexander Amos 10 years, 8 months ago

    Hey Margus,

    I am honestly not even sure how to localize my website, is it still giving you that error?
    Thanks for trying to help though

    Alex

  5. Alexander Amos 10 years, 8 months ago

    How would I go about unlocalizing a website?

  6. Magus Staff 10 years, 8 months ago

    Hi Alexander

    Website is now accessible. Please try adding the following to your Custom CSS Editor. If you do not have a custom CSS editor already I would recommend this one

    https://wordpress.org/plugins/so-css/

    body.myatu_bgm_body {
    background: url(http://test.eicanada.org/wp-content/uploads/2015/06/Grass_PNG_Clipart_Picture.png) center center repeat-x;
    background-size: cover;
    background-color: transparent !important;
}
#wrapper, .home-content-boxes {
    background-color: transparent;
}

    Please change the image path to the image you want to use for your background.

    Let us know how you get on

    Magus

  7. Alexander Amos 10 years, 8 months ago

    Hey Margus,

    Unfortunately, that didn’t seem to work

  8. Magus Staff 10 years, 8 months ago

    Hi Alexander

    Is it on any particular page that you want this. Or any page where you do not want this.

    Could you also please supply a link to the image you want to use.

    Thanks

    Magus

  9. Alexander Amos 10 years, 8 months ago

    Hi Margus,

    Say I wanted a background image on the “Conservation Agriculture” page.
    Here is the image http://test.eicanada.org/wp-content/uploads/2015/06/malawi-0070-e1434381913322.jpg

  10. Magus Staff 10 years, 8 months ago

    Hi Alexander

    For that page the CSS would be this

    .page-id-276 .content {
    background-image: url("http://test.eicanada.org/wp-content/uploads/2015/06/malawi-0070-e1434381913322.jpg");
    background-size: cover;
}

    You can use the same code for other pages, just replace the image URL and the page-ID number.

    To find the page ID please inspect the page using your browser’s developer tools (Usually F12 or available through your browser’s menu). Find the Body Tag and look at the class section. In there you will find an entry like this

    page-id-##

    Just update that for other pages.

    Let us know how you get on

    Magus

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.

Have a different question or issue?

Start New Thread