Foundation: Create a White Background

[Karen Gordon]

Due to the dark color of the web background, the text cannot be read. I would like to change ONLY the page background to white, but NOT the header section.

I currently have it set to a forum response solution that shows the custom CSS. How can I remove the white from the header and footer sections?

Thanks,
Karen

[Bill Robbins]

Hi Karen,

That is an excellent question. The simplest way to go about that would be to apply the same background to the header that we do to the site background. That way we can still apply a background to the “wrapper” so that it covers all the content, but the header will appear to have the same background as the main site background. I would change the CSS in your Custom CSS so it is like this:

#wrap {
	background-color: #fff;
}

@media only screen and (min-width: 1024px) {

	#wrap {
		width: 1020px;
		padding-left: 30px;
		padding-right: 30px;
	}

}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	
	#wrap { 
		width: 760px;
		padding-left: 10px;
		padding-right: 10px;
	}

}

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

	#wrap {
		width: 100%;
		padding-left: 5%;
		padding-right: 5%;
	}	
	
}

#header {
	background-image: url(https://usafraa.org/wordpress/wp-content/uploads/back.png);
	margin-left: -30px;
	margin-right: -30px;
}

and see how that works for you. If you run into any questions or trouble, let me know.

Thanks,
Bill

[Bill Robbins]

Good question. With the tagline added in, we have some “floats” that will need to be cleared to keep them from interfering them with what’s below. Try adding this to your Custom CSS too:

#tagline,
#logo {
	float: none;
}

#header #tagline h2,
#header #tagline p {
	margin-top: 6px;
	margin-bottom: 6px;
}

See if that doesn’t do the trick at removing that space. If you run into trouble, let me know.

Glad you’re enjoying the themes 🙂

Bill

[Author]

Posts