Can't set background for body element

Hi,

In my Neat Bourbon website, I want to set the background for the body element:

body {
background-color: lighten($brokenwhite, 5);
}

However, when I check in the browser (with Chrome DevTools), the background style for the body element still is:

background: white;

I can’t seem to find which style is overriding the background color for the body element.

my source code is at: https://github.com/acandael/colloquium

thanks for your help,

Anthony

Check for any background rule that’s defined after yours or is more specific. That’s probably a CSS precedence problem.

Also, in the chrome inspector, you can see in which file and/or line the rule is defined.

You have $brokenwhite defined as #f8f9fc. This color cannot be lightened 5%. It just results in white. Nothing is overriding your CSS, it’s just that lightening is resulting in white.

hi derekprior, I turned of the lightening and just defined

background: $brokenwhite;

but the background of the body element is still white. The odd thing is that I defined also brokenwhite for the section element of the index page, and there the background is brokenwhite

thanks for your help,

Anthony

hi zamith, I tried to see which style definition is overwriting the background color, but in Chrome devtools I only see the mapping to .css files, not to .scss files.

greetings,

Anthony

my bad, forgot to turn on sass

sass --watch .

the background color of the body element now is brokenwhite

thanks,

Anthony

@acandael_acanda Glad that you got it working.

Your SASS files have to be compiled to CSS in order for the browser to understand them, so that’s what Chrome dev tools will point to. Not sure if there’s a plugin to chrome to link to SASS files, but it is usually easy to understand the mapping between CSS and SASS.

1 Like