There are two areas that you point to in your image. The first one relates to the area at the very top of the page, that contains the site title, your logo and so on. For this, there is no easy way to change the area you point to. It is not a background. It’s white because the background image is white; as opposed to the area immediately to its left which is taking the page’s background colour because the corresponding area in the background image is transparent.
The only way you would be able to change this, that I can think of, would be to change the image, using the GIMP, or Photoshop or other image manipulation program.
The situation is a bit different with the sidebar widget. The rule covering this is:
#sidebar .widget {
background: url("images/sidebar-links-background.png") repeat-y scroll right top transparent;
margin: 0 0 0 14px;
}
So you need to do two things: get rid of (or change) the background image, and change the background colour.
#sidebar .widget {
background-image: none; /* or your replacement image */
background-color: #005588; /* or whatever you want */
}
As ever, I would advise you to make all modifications to a theme in a Child Theme, unless you have total control over the code (e.g. you wrote it).
HTH
PAE