Override backgroud colour with image

  • Resolved chloeponee

    (@chloeponee)


    1 year, 12 months ago

    Hi, I’d like to override the solid background colour on my website with a background image.

    My theme gives me the option to upload the image and set it as the background, but when I do so, nothing happens. I think something else needs to be overriden first, but I’m not sure what section or class on my website to target.

    This is the image I uploaded and wanted to use as a test: https://test01.mug-cakes.nl/wp-content/uploads/2023/02/Background.png

    Any ideas? Thanks ??

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    Try adding the following to the customizer’s Additional CSS panel:

    .outter-wrapper-parent {
    background-image: url(https://test01.mug-cakes.nl/wp-content/uploads/2023/02/Background.png);
    background-size: contain;
    background-repeat: no-repeat;
}

    I assumed you didn’t want it to repeat. You can remove that rule if you like. Depending on the page, other content may obscure most of the image to the point it may not be evident that it’s there. It does at least appear on single recipe pages.

    It is possible for other content to have its own background color which would obscure the image. Setting these elements background color to be transparent might be desirable. Use your browser’s element inspector tool to help you learn what elements may be obscuring the desired background, and which CSS rules might need modification to correct this.

    Thread Starter chloeponee

    (@chloeponee)

    That worked- thanks so much! ??

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Override backgroud colour with image’ is closed to new replies.