Search Results for 'image size cover'

I think the same solution would work for this image as well, except I would try this first –

.front-page-5 {
    background-position: 30% !important;
}

Add that code to your CSS.

Usually the parallax adds 50% by default and changes depending on how you scroll…..but 30% makes the person in the picture show up in the middle. You can adjust that percentage to change the position if you want.

This is assuming you’re referring to the image not covering the entire content background in mobile/tablet screen sizes? It seems to work fine on Desktop/Laptop screens.

Let me know if that works.

Ok, now I see. I just opened it up on a larger monitor.

This can be fixed by adding this to the CSS –

.front-page-1 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

This code is already added to the other widget background sections, but this will make it also work for the Front Page 1 widget if you plan to use a background image.

One more thing, I thought I added this yesterday. If you look around line 1555 you’ll see this code –

.front-page-1 {
    height: 100vh;
}

Once you remove that then the height should return back to normal.

Also, I would remove the Parallax effect since your images aren’t large enough for the content you have. If you have a background image that moves with the Parallax style, then that means the image needs to be large enough to cover the height of the text/content. If you have too much text/content and the background image isn’t large enough, then the image will stop at a certain point while the content keeps going. If you remove the Parallax effect, then this will allow the background image to resize and cover the entire area of the content without looking “cut off”.

The parallax effect can be disabled on the front-page.php file. Looks like this –

		//* Enqueue parallax script
		add_action( 'wp_enqueue_scripts', 'aspire_enqueue_parallax_script' );
		function aspire_enqueue_parallax_script() {

			if ( ! wp_is_mobile() ) {

				wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

			}

		}

********************************************************************************

For front-page-6 add .solid-section right after like this –

.front-page-6 .solid-section {
    background-image: url(http://toedeloe.codebase.space/wp-content/uploads/2017/09/geschenken.jpg);
}

The .solid-section class is a div that displays a white background that shows up on line 1508 for every widget area you see with a white background. If you add a background image to front-page-6 then the solid section div shows up on top of it. So we would need to override that with the code above.

Let me know if you need help making any of these adjustments.

I’m not sure what you mean by “blind” effect? Are you referring to how it opens up when you hover? If so, I think that has something to do with the superfish/javascript that is used in the Genesis Framework. It shows up that way by default. Example – https://demo.studiopress.com/genesis-sample/

Try adding this code in your functions file –

add_action( 'wp_enqueue_scripts', 'sp_disable_superfish' );
function sp_disable_superfish() {
    wp_deregister_script( 'superfish' );
    wp_deregister_script( 'superfish-args' );
}

To remove the Parallax effects, take a look in your front-page.php file and Comment Out or Remove this code –

//* Enqueue parallax script
add_action( 'wp_enqueue_scripts', 'guru_enqueue_parallax_script' );
function guru_enqueue_parallax_script() {

  if ( ! wp_is_mobile() ) {

    wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

  }

}

The background images will still be in a fixed position, but the Parallax effect will be disabled. If you want to ALSO remove the fixed background images then you’ll need to look at line 1456 or search for this –

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-11 {
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

…then comment out or remove this part – background-attachment: fixed;

The background images are set to background-attachment: fixed;, so if you remove that then the text should scroll with the image.

The code that is creating this effect looks like this –

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-11,
.front-page-13 {
	background-attachment: fixed;
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

It looks like this is coming from your custom CSS….Did you add this in? Or is this coming from the main stylesheet?

There is a slight Parallax effect that goes with it since it’s included within the theme, but that could be removed too if you want. To remove the Parallax, you can comment it out or remove from the front-page.php file. You can see that section where it links to the parallax file.

It’s kind of already set that way, but since some background images are designed differently (different widths, different heights) you would probably have to add in custom modifications depending on the size of those images.

You can look near the bottom of the css to see the responsive section. Here’s what you could copy and adjust –

@media only screen and (max-width: 760px) {

	.front-page-1,
	.front-page-4,
	.front-page-6 {
		/*background-attachment: scroll;*/
		-webkit-background-size: cover;
		-moz-background-size:    cover;
		background-size:         cover;
	}

}

In that example I changed the background size from auto to cover. You can use contain, cover, and auto to have the image adjust on different browser sizes. This is what all other sites use to make background images responsive. The browsers job is to scale the image without distorting it….the best it can. There are still limits though, not every image is going to show 100% width and 100% height from end to end. It really just depends on the type of image.

You can copy/paste that code and make any more adjustments you need to it, as well as change the browser width 760px to other screen sizes.

It looks like it’s working normally on my end. The background image covers each side full width. I’m viewing from a large monitor/browser, but I’m also resizing the browser and watching the image resize and adjust to the change in browser width. How is it showing up on your end, and how are you expecting it to show up exactly?

Responsive Background Images sometimes aren’t able to display every pixel of the full image (top to bottom, left to right) because of the Browser. The browser’s job is to scale the image the best it can without overstretching, or shrinking the image too much. It’s supposed to resize the image the best it can without losing quality.

So if you upload any type of full width image on any theme or website, the same thing will happen. If you have an image that is very wide, but doesn’t equally contain much height, then the height will struggle to show in certain positions especially if you have text/content inside the same div container…..Vice versa.

The only way an image will show the entire image from top to bottom, left and right, is if you upload an Inline Image instead of a Background Image. The issue with inline images, is that it’s much more difficult to add text on top of an inline image. You would need to make some customizations to do something like that. The recommended way is to use a full width image as a background image since it’s already setup for you in the theme.

Are you saying you want the background to be white? Or do you want the text to be white with a background image? We can manually add this in through the CSS, or through the Customizer CSS section.

Example, if you added this to the Customizer CSS section, then the background image will show up on the homepage only (not the rest of the site) –

.home-feature-7 {
	-webkit-background-size: cover;
    -moz-background-size: cover;
    background: url("http://grassrootsrockwall.com/wp-content/uploads/2017/02/lawn-service-rockwall-hm-1.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    clear: both;
}

It looks like you uploaded a background image for the main BODY of your site and that’s why it’s showing up on other pages as well.

Until I’m able to get the update done for the inSync theme, I would add background images using CSS for now. I can help you with this so you won’t have to worry about dealing with the code. Just let me know.

Most browsers can only resize a background image so far. They do their best to scale them to best fit the browser without stretching or shrinking the image too much. The goal is to adjust the image without losing quality. This is how it works on any theme or any site that attempts to resize a background image for smaller mobile browsers.

Most sites (including large sites/companies) will include a 2nd image that is designed for mobile devices. So if you have a large/wide image for desktop/laptop, you could also have a slim, more vertical background image that appears for mobile devices.

This applies to background images. Inline images usually resize for mobile devices much easier….but it’s difficult to make an inline image show up as a background image with text, buttons, and widgets on top of it at the same time, which is why most will have the 2nd image appear if necessary.

Having a 2nd image is not always necessary though, it really just depends on the type of image you’re using and how much of it needs to be seen on a mobile device. On mobile browsers it’s expected to sacrifice some of the background due to the size of the browser.

Depending on how you want things to be displayed, you can try changing the background-size: auto; to background-size: contain; or cover to see if you get a better result for the image you’re using. You can find this code in the responsive section around line 2390 in your style.css file

	.front-page-1,
	.front-page-4,
	.front-page-6 {
		/*background-attachment: scroll;*/
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size:         auto;
	}

.front-page-1 .flexible-widgets  {
      background: url( http://andykev.com/wp-content/uploads/2017/01/Craig-Beckta.jpg) no-repeat!important;
      background-position: center !important;
      background-size: cover !important;
	  background-repeat: no-repeat;
      height: 100%;
      width: 100%;
  }

THe ABOVE IS CORRRRECT. I made a mistake copying the code. This will work for your site. I have left my URL here for you to see. Replace it with your URL when you upload the proper image to your media library. I simply downloaded your image and cropped it. You may want to play with the image to make it nice. As shown it’s pretty close.

Hopefully I can explain this without making it sound too difficult. Basically there’s Javascript code that works on the Homepage to make the first Front Page 1 widget/Image area scale/adjust and fit the entire screen. As you adjust the browser size and look at the height of this widget area, you’ll notice the height ratio adjusts (in the code). The height can show up around 950+ px depending on the browser size. Once that happens, if the height exceeds beyond where the social media links are currently located, then they won’t be clickable. Think of it as a hidden invisible layer that covers from the very top of the Front Page 1 all the way down to just under the widget area (about 950px+ from top to bottom).

Look at where you see the Blue Background – http://i.imgur.com/RwIEIeA.png

Everywhere you see blue is what the Front Page 1 widget covers when the Javascript is active.

When you disable the javascript and manually add Padding to the top and bottom (which means it won’t adjust to the screen, it’s a fixed size) this is what it looks like – http://i.imgur.com/CrXqQUi.png

In the second image, the links are clickable because there’s no hidden layer on top of them.

You can remove the javascript by commenting out or removing the home.js link in the front-page.php file….or you can remove the fp1 class in the front-page-1 widget area in the front-page.php file to get rid of the javascript.

Other users haven’t ran into this issue because they are most likely using more than 1 widget on the homepage. So if you want to fix this without messing with any of the code then you can simply add another widget to the homepage and it should fix itself.

“I don’t think I had added that line. I just did but didn’t see any difference.”

Can you add it again and let me know so I can see it with the code active? It should work as I’ve tested it myself –

You may need to hit your Reload button on your browser in order to see the changes (this clears your Browser Cache).

“My question is could an image be used for the background of the header instead of a solid color”

Yep, I’ll use the image from that site as an example –

Here’s the code I added to your .site-header

	background: url("http://www.claranartey.com/images/header.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;

It looks like this code is missing – background-repeat: no-repeat; Did you remove that from your CSS? If you add that back in on line 1473 in your CSS then it will work again –

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.footer-widgets {
	/*background-attachment: scroll;*/
	background-repeat: no-repeat;
	-webkit-background-size: auto;
	-moz-background-size:    auto;
	background-size:         auto;
}

Also, I just did some more tests on the Theme Demo’s homepage, and I’m going to make an update which should make the background image cover a bit more when viewed on mobile devices. What I’ll be changing is the background-size: auto to cover instead. You can change this in your css in the responsive section mentioned in my first reply above like this –

.front-page-1,
.front-page-3,
.front-page-5,
.front-page-7,
.footer-widgets {
	/*background-attachment: scroll;*/
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

If you want me to add these 2 adjustments in your CSS for you just let me know. All I would need is a Temporary login and I can get this added in immediately.

Just let me know

Yes remove the code under – @media only screen and (max-width: 1800px) since this is removed in the new version (coming soon). You can check out the demo to see that the images show up in full width now.

After you do that, look on line 1504 and make sure the code looks like this –

.front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

I am still doing tests to get it to be full width AND work on mobile devices, so there may be some minor changes added later.

Parallax Background images are meant to scale to fit the browser as best as possible without losing quality or looking too stretched. So when you add something with words that cover most of the image, it’s most likely going to get cut off depending on where they are positioned.

You could add background-size: contain !important; for the .front-page-1 in your responsive section so it is only applied to the first widget area and not the rest. That will make the image show up in full, but you’ll have a lot of space right under the image which you’ll need to account for in other areas of the code.

You could do that, or just have a completely separate image show up when in mobile responsive mode…..Specifically a smaller image designed for mobile devices.

Not sure about your Parallax Code/Customization, but I can help with the Background images on the homepage.

To make them full width, remove this from your responsive section –

@media only screen and (max-width: 1800px) {
	
	.front-page-1,
	.front-page-4,
	.front-page-5,
	.front-page-7,
	.front-page-9,
	.front-page-12 {
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size: auto;
	}

}

Then add background-size: cover; to the area of your CSS that looks like this –

	.front-page-1,
	.front-page-4,
	.front-page-5,
	.front-page-7,
	.front-page-9,
	.front-page-12

I would be able to tell you the exact line number the code is located on, but you’re using a CSS compressor so it’s all condensed on 1 line. If you’re unable to find the locations I’m referring to, try and disable that plugin temporarily and then I can find out which lines the above code is located on.

It looks like you got the background colors changed? I couldn’t remember what color you had them before. Let me know if you didn’t.

Also, if you want to change the Footer at the very bottom (instead of the footer widgets area), then you can do so by editing this in your CSS around line 2371 –

/* # Site Footer
---------------------------------------------------------------------------------------------------- */

.site-footer {
	background-color: #000;
	color: #fff;
	font-size: 16px;
	font-size: 1.6rem;
	line-height: 1;
	padding: 30px 0;
	text-align: center;
	

For the background images, there will be a small fix for this in the next update. For now, you can fix it by looking in your code around line 1504, and you’ll see this –

.front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	/*-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;*/
}

In the new version, it will look something like this –

.front-page-1,
.front-page-4,
.front-page-5,
.front-page-7,
.front-page-9,
.front-page-12 {
	/*background-attachment: fixed;*/
	background-position: 50% 0;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size:    cover;
	background-size:         cover;
}

Replace the 1st code with the 2nd and it should fix the width of your background images so they stretch to the screen.

If you remove or comment out this code near the bottom of your CSS (in the responsive section) it should make the image adjust a bit more –

@media only screen and (max-width: 1800px) {
	
	.front-page-1,
	.front-page-4,
	.front-page-5,
	.front-page-7,
	.front-page-9,
	.front-page-12 {
		-webkit-background-size: auto;
		-moz-background-size:    auto;
		background-size: auto; 
	}

}

You would need to add background-size: cover; to the front-page-1 code in your CSS.

.front-page-1 {
    -webkit-background-size: cover;
    -moz-background-size:    cover;
    background-size: cover; 
}

Keep in mind, the image itself won’t show up in the exact same size and position on all browsers especially since it is being resized to fit the screen.

The way responsive images work, is the browser will try to resize the image the best it can without stretching it too much while also making sure to fill the entire width of the screen without losing quality. That’s why it will show up in different places on certain devices since the browser is trying to scale the image the best it can to fit the screen it’s being viewed on. If you tried to do this with any other theme that uses Responsive Background images/Parallax it would have the same result.

Also, it’s going to be hard to see White text on top of that image since your background is white. I’d recommend either placing a tint to the background, or changing your font color.

I was originally viewing it from a larger screen which is why I didn’t see the white space.

Add this in the responsive section inside the 1024px width area –

.front-page-1 .image-section .widget-area {
    display: block;
}

That shoots it back up to the top to cover the white space above the video.

For the white space on the sides, add this to the 800px Responsive section –

.front-page-1 .wrap {
    max-width: 100%;
}

The space on the side shows up because of the padding that is supposed to show up for .wrap….but this should override it for the front-page-1 widget only since you’ll need that for everything else.

You’ll probably need to customize how the front-page-2 sub box shows up on mobile/smaller screen sizes since it may look weird due to the changes we’ve added above. This is due to the max-height: on the FP1. You can add a responsive override for the height in your responsive section. I’ll let you handle those customizations.

It looks like everything is already setup. I forgot that the code is already included in this theme. If you look at line 1594 in your style.css file you’ll it –

.hf1,
.hf3,
.hf4,
.hf5,
.hf6,
.hf7,
.hf8,
.hf9,
.hf14 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	background-position: 50% 0px;
	background-repeat: no-repeat;
	background-size: cover;
}

I don’t think that would work with the slider, but every other area you add a Background image to will automatically use that code above.

I looked at the image of the plane near the bottom, and it appears to be working.

Oh, now I see what you’re talking about. That is actually the background of the site that is showing. What happens is the background Images are limited to how far they can be stretched….depending on the size of the image. For example, if you add a really wide image with a small vertical height, then the image will eventually prevent itself from filling the entire height if there is too much text.

I’ve had this same issue….as a matter fact, everyone that uses Parallax runs into an issue like this if they add a lot of text/content and the images aren’t big enough to contain the size.

What I did for the demo, was make sure and add images that were big enough to cover the space with the amount of content I had inside of it. That’s usually what everyone else does if they are using the Parallax and fixed background features.

The size I used was 1800px width and 1200px height. It looks like you’re already using that size. If you increase the size of the image (while keeping the proportion) then it should fix that issue.

On my homepage I had the exact same issue happen to me in the “Hire Us” section near the bottom. If it’s on desktop, it’s fine, but if you resized the browser there would be so much text that the image was too small to cover it. So what I did was added a 2nd image to show up if/when the browser reaches 1040px or less. The 2nd image was 1800px width and 2000px height. The extra height covered the part that was showing the white space…..or where the image stopped displaying itself.

I apologize if this sounds confusing at first, it’s kind of hard to explain.

Let me know if this helps.

<div class=”tp-bgimg defaultimg” style=”width: 100%; height: 100%; opacity: 1; visibility: inherit; z-index: 20; background-image: url(http://cdn7.jonathon.co/wp-content/uploads/portrait-photographers-in-edinburgh-1111.jpg); background-color: rgba(0, 0, 0, 0); background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;” src=”http://cdn7.jonathon.co/wp-content/uploads/portrait-photographers-in-edinburgh-1111.jpg”></div&gt;

The above code from your website seems to work. On my 27 inch monitor it fills the screen.

This is a common question, and was covered in this thread:

<img class="aligncenter size-full wp-image-67" kasperskylab_antibanner="on" src="http://cdcri.katie.design/wp-content/uploads/2015/05/home-banner-with-text1.jpg" alt="home-banner-with-text" height="507" width="1567">

.slider-wide .wrap {
    max-width: 100%;
    margin: 0px auto -25px;
}

The top you need to change “aligncenter”. Your image is off to the left. The Slider wide margin, -25px seemed to work.

When I check on the iPhone 5S the right side is cut off. Try adding this to the code around line 3261 –

background-size: cover !important;

So it should look like this in the end –

	.header-image .site-header,
	.header-image .site-header .wrap {
		background-position: center top !important;
		background-size: cover !important;
	}

Once you do that, let me know so I can check on my phone. If you can provide a temporary login, I can get this figured out much faster without having to go back and forward. If I have a login, then I can try different variations of the code to get it working on my own…..which would be much faster, more convenient and save some time for you.

Just let me know

Yeah I may need admin access to try a few things. The size of the image doesn’t appear large enough to cover the space…..in addition to that, the Parralax code may have something to do with it as well. The Parralax feature works by default, but I think the size of the image is what is causing it to not work right….I should be able to find out exactly what it is.

What would be best is if you can create a temporary FTP login. FTP login is the safest way to do this just in case there is an error during the process. It will allow us to revert/undo any mistakes without being locked out of the site.

I think thats because you have a background image that is limited in size, and doesn’t have the height to cover the entire page/site. The two div section/areas you mentioned actually have a clear background…..it’s just that your main background image doesn’t stretch that far.

Ok just got it done.

As mentioned earlier, I first changed the .site-title a on line 2039 –

.site-title a {
    background-size: contain !important;
}

to this instead –

.head-wrap .site-title a {
    background-size: contain !important;
}

Then I changed this on line 4001 from this –

.content,
.site-header .widget-area {
    width: 620px;
}

and replaced it with this –

.content,
.site-header .widget-area {
	width: 60%;
}

^ That covered the widget area space. It changed it from 620px to 60%….which means it covered 60% of the space in the header…..while the logo area covered most of the rest (not including padding/margin)

I also noticed that the logo wasn’t centered due to the size of the image. So I added some code to make it center when viewed in responsive mode. I did so by adding this code around line 2041 –

background-position: center top !important; So in the end, it should look like this –

.head-wrap .site-title a {
    background-size: contain !important;
    background-position: center top !important;
}

I just tested this on an iPhone and everything is working perfectly. The entire logo is showing (without being cut off), and it is also Centered which means it will show up as it should on the iPhone, and any other mobile device (all sizes).

Let me know once you take a look.

@bocafit I usually recommend the code that was posted above by Eric. If you do a search in the forum you’ll see more posts that cover different things you can do to adjust how your logo looks in Genesis…..This is how it works in all Genesis themes.

I just checked your site, and scanned your CSS file, but I don’t see the code. Are you sure you added it to your CSS?

Also, once you do add it, you’ll still need to adjust the title-area CSS when the site is in responsive mode. When your browser is adjusted, or when it is viewed on a smaller device, it activates the responsive CSS at the bottom to override the code that is used for the desktop version. At the moment the width is at 300px on line 4103 –

	.sidebar-primary,
	.title-area {
		width: 300px;
	}

^ So once you change that to whatever size you prefer your logo to be, including the code mentioned above, then it should work.

I have an iPhone and an iPad so I can check your site once you make the adjustment to make sure everything is working…..Or since it’s a simple fix, I can login for you and make the adjustment directly. Just let us know

@Genghis7777 you can fix your issue by adding the following code to your responsive section –

.site-header .site-title a {
    background-position: center top !important;
}

That should center it…..however, your image itself needs to be centered. If you open it in photoshop you’ll see that it is off to the left and there is some transparent space on the right side. So once even out both sides and remove the extra space it will center perfectly.

You can add your own image by changing the link in your css file (which should be around line 1121 by default) –

/* Slider
--------------------------------------------- */

.slider {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	background-image: url(images/slider-bg.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;		
        clear: both;
}

You can add in your image inside of the child theme folder labeled “images”. Then change this line – background-image: url(images/slider-bg.jpg); to the name of the image you just uploaded. Then click your Reload button on your browser and it will show up instantly.

The button was added in a text widget for the slider widget area –

<a class="button large">Get Started</a>

More buttons can be found here – http://demo.appfinite.net/insync/buttons/

Ok, so you’re referring to the background colors.

You changed your body (main) background to white #fff….and the widget areas that were gray were empty (didn’t have/need a color applied to them). So by default they would show a gray background since that was the background of the theme. If you want to keep the background as white then you can apply a background color directly to those widget areas. Take a look around line 1584 in your style.css and you can add a background to those 3 sections –

/*
Home Features
---------------------------------------------------------------------------------------------------- */

/* Home Feature Classes */
 
/*You can add background images/colors to each section of the homepage by adding them to the classes below.
*/

.hf1,
.hf3,
.hf4,
.hf5,
.hf6,
.hf7,
.hf8,
.hf9,
.hf14 {
	/* -webkit-background-size: cover; */
	-moz-background-size: cover;
	/* background-attachment: fixed; */
	/* background-repeat: no-repeat; */
	/* background-size: cover; */
}

.hf1 {}

.hf3 {}

.hf4 {}

.hf5 {}

.hf6 {}

.hf7 {}

.hf8 {}

.hf9 {}

.hf14 {}

Add your background colors to hf3, hf7, and hf9 like this (for example) –

.hf3 {
    background-color: #f2f2f2;
}

@Exkalibur your link doesn’t seem to be working at the moment, so I’ll try again later to see what’s going on. Until then, check your css for something like this –

/* Home Feature Classes */
 
/*You can add background images/colors to each section of the homepage by adding them to the classes below.
*/

.hf1,
.hf3,
.hf4,
.hf5,
.hf6,
.hf7,
.hf8,
.hf9,
.hf14 {
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
}

.hf1 {}

.hf3 {}

.hf4 {}

.hf5 {}

.hf6 {}

.hf7 {}

.hf8 {}

.hf9 {}

.hf14 {}

You can add css to each widget background/area individually if you wanted. Let me know once your site is up again and I’ll check if the above info isn’t helpful.