how to set background colour of #wrapper

  • Hi,

    I have a WordPress site https://edinatuition.com

    It’s a static web site.

    I can set the background colour for the site in Customise part of the Dashboard. However, what I’d call the main background of the page, ie the part of the page below my content, remains white, and I would like it to match the colour of the surrounding background.

    I have used developer tools to discover that the part of the page that I need to set is div#wrapper and have tried to set the background-color of this in the styles.css of my child theme, but can’t get it to work. From what I’ve seen in various forums searching from google on this topic this is not so easy to do, but I’m hoping someone here might be able to point me to a relatively easy fix.

    Thanks for reading this.

    Kind regards,

    Gary

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

  • If you’re trying to target a specific element, or div, find the opening tag and add a style=”background-color:insertcolorhere;”

    Example

    <div style=”background-color:blue;”>

    You can use hexadecimal or rgb color instead if you prefer.

    Cheers

    Thread Starter garythomson

    (@garythomson)

    Thanks. How can I do that in styles.css?

    If it’s the content like on the front page that you are trying to color the background in I would use –

    article .content {
    background-color:blue; !important
    }

    Go to Appearance>Customize then choose Additional CSS and add the above CSS.

    Cheers

    Moderator bcworkz

    (@bcworkz)

    Add this to your child theme’s style.css:

    .background-image #wrapper {
  background: blue none repeat scroll 0 0;
}

    That usually works. If not, try adding it in the Additional CSS part of your customizer. You could add the !important modifier if you still have trouble. Finally, element style attributes like jonpeck777 suggests will do it. These last two are usually avoided because they make it impossible for other CSS to override, which is also why they are sometimes useful.

    This will not make the entire viewport background blue. For that set the body background. This is set as inline CSS, apparently by your parent theme. You’ll need to find where this is set to override it, it cannot be done in an external file. The only other way to override is adding the style attribute to the body tag on header.php.

    Thread Starter garythomson

    (@garythomson)

    That has worked, thanks all.

    Maybe this isn’t the same question, but I am trying to create a color background behind a section of text on my page. I want the color to extend to both sides, but the content to remain centered on page. Would I use that methods described here? Thanks.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘how to set background colour of #wrapper’ is closed to new replies.