Having trouble targeting entire pages background color

So I can’t seem to figure out how to change the entire background color of my portfolio site. I’ve tried wrapping it all in a div and using a Bootstrap class but I couldn’t change it from the default (White). I’ve also tried adding a style.css file and targeting the body class. ie. body { background-color: #X }; Still, no luck. Any help or suggestions would be greatly appreciated.

Thanks,
Kyle

Do you have your code hosted somewhere to share?

What are you seeing when you use the CSS body { background-color: #xxxxxx; } ? Do you have a margin around the page? Is the color not showing at all?

By the way, you should have the semi-colon inside the curly braces, not outside of it.

If you’re trying to override a Bootstrap class, your link to your CSS stylesheet (or styling on the page, if you’re doing it that way) needs to be below the link to Bootstrap.

As a last resort, you can do the body selector and add !important to the style to force the override.

Hopefully I’m sharing this right. I’m using codepen. https://codepen.io/kyleshamblin/project/full/XrVOwv/

Normally,

body{
  background-color: #something ;   // put your own color here
}

should work… but since this is hosted on codepen, CP overrides the body background color with it’s own color

You can just inline your background color in your own code.

<body style="background-color:red">    
1 Like

Ok that makes sense now. I was getting frustrated for a moment. Thanks owel!

Huh? No it doesn’t. There are two reasons it wasn’t working:

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css>
  <link rel="stylesheet" type="text/css" href="styles/style.css">
  • First line: href attribute string isn’t terminated with "
  • Second line: that href points to nothing — you don’t have a styles/style.css file in your project.

What you need to do is fix that first line, then create a new directory at the root of your project called styles and create a file within that called style.css. Then you can style away to your heart’s content (but remember to remove any corresponding inline styles first, as they’ll take precedence over what’s in the external stylesheet).