Background color not showing

HTML-CSS
1

Tell us what’s happening:
why is my background color not showing - i mean any background color for body

Your code so far

body {
  background: #85a0be;
  color: #354453;
  line-height: 1.6;
  font-family: 'Roboto Condensed', sans-serif;
  padding: 1rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

2

try instead of ‘background’
background-color

1 Like
3

The code as written should work. It works for me when I dump it into a <style> tag in an otherwise skeletal html document.

‘background’ is just a shorthand for all the background properties below. Here’s MDN on the topic:

“The property is a shorthand that sets the following properties in a single declaration: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, and background-attachment.”

1 Like
4

can you share your pen?

5

Yeah I just wrote - !important - after color and it worked.

It’s weird how it will not even work when I wrote something as simple as background-color: blue,

Anyways - Thank you for your help.

1 Like
6

That suggests that something else is overwriting it. Look for other color declarations that can overwrite it…

7

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

8

hi @ArielLeslie I’m not familiar with the ‘preformatted text tool’ can you post something to explain what that is?

ps. nice gif! Would be great to have that gif in a separate post so I can refer to it anytime I’m trying to tell someone to use backticks around their code.

9

It’s the tool in the editor that I included an image of in my last post.
image

1 Like
10

Yeah - it’s wired though - I have to write !important a lot - when I paste to codepen.

Everything works fine when I’m on Vs code - but there’s always bugs when I paste to codepen.

I’m sure I’m doing something wrong.

Here are my two pen projects - if you’re interested in looking at it - Thanks.

https://codepen.io/CaptainBoots/pen/vrmYBX

11

In the survey form, the stylesheets you are importing are the cause of your body background not being seen.
For a quick test, I commented them out and your background was showing without a problem (without !important). So using important does make sense here because when you use a CSS framework it will impose its style on you unless you specifically do something to prevent it.

(the stylesheets below are the ones I commented out)

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB"
    crossorigin="anonymous">
  <link rel="stylesheet" <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
  <link rel="stylesheet" href="css/style.css">
12

Yes - well that defeats the whole purpose of using those style sheets -

You just have to comment out the bootstrap - and load it trough the CSS external resource settings

The other style sheets work fine if left in - plus they are needed for the web page Fonts and CSS edits.

13

Sorry I wasn’t trying to suggest that you should stop using the stylesheets, just that it makes sense to me that you have to override them since they will impose their styles on your if you don’t.

14

No - you were very helpful - I figured out that it was the CSS settings that were conflicting.

You just have to load it through - codePens setting option - to use external style sheets.

Thanks to you - I figured it out.

15

did loading through codepens settings change something though about how the body background tag is seen? Just curious.

16

I don’t know - I’m assuming that there’s must of been some kind of conflict.

Because loading bootstrap through codepen setting lets the background color work.

While leaving a link to bootstrap in the HTML - doesn’t.

I mean this is a really simple color edit in CSS - nothing extreme in any way.

Plus all this works fine in VS code of course.

Regardless - Thank you very much for your help.

1 Like
17

Try
background-color: #85a0be;

18