Issuing background-color for page

I’m having problems issuing background-color to my tribute page. I’ve tried using id’s labelled for my main in CSS style, and that doesn’t work. I’ve even tried the body element in CSS style, and that isn’t doing anything either. Not sure where I’ve gone wrong with this. Tried reading through my notes, and going back over the curriculum exercises. Still can’t figure it out.

<main id="main"> 
  <div id="img-div">
  <img id="image" src="https://res.cloudinary.com/dgxqbvbdv/image/upload/v1576072340/First%20Project/Elliott_Smith_nh4inw.jpg" alt="Elliott Smith staring out a window">
    <figcaption id="img-caption"> "I didn't have a hard time making it, I had a hard time letting it go"  </div>
</main>
“Ididn’t ”

It may be helpful to include your CSS (or post a CodePen link with your tribute page) to show what you’ve tried to do already, that will help us help you out. Did you want a background color for the whole page, or only a specific section? I can try to help once I see more than just some HTML code.

Here are some examples of what you can try, without giving a direct answer.

Inline CSS is simple but probably not the most flexible to format your entire page in:

<main id="main" style="text-align:right;">
   <!--anything in main goes here-->
</main> <!-- this will align your text to the right -->

Internal CSS is also viable, this does the same as above. Don’t forget to use the style tags.


<style>
  body {
     text-align: right;
  }
</style>

<main id="main"> 
<!-- etc, rest of html code and so on -->

Alternatively, if you’re using CodePen, I assume you know how to add CSS there without inline or internal. Adding a background color uses a similar format, if you are still having trouble check carefully for typos and missing semicolons.

1 Like

Thank you for your help. I will try this when I have time. Busy right now. By the way, how do I get the URL or CodePen link to share my code with others?

If you are still running into issues I can give you more specific help once you have time, I based my response mostly off of guesses.

Do you already have a codepen account? All you have to do is open one of your projects in editor view (or whichever) and copy the link, it should be public to view.

I tried a few different things, and I’m still not getting the background to change color like I want it to. Let me know if this link doesn’t work for you to see my code.

1 Like

Thanks for posting! A couple small things.

  • First, you don’t need to add the <style></style> tags this time in the CSS CodePen, those are just useful if you are writing the CSS and HTML together in one text box.
  • Using #body{} means it will apply the CSS to anything with an id="body" because you have used the # symbol, which you don’t have in your HTML. I would avoid adding id="body" to anything right now, however:

Body is a special purpose case where you don’t need any <body></body> tags etc. because it simply applies to the base page style by default.

So, to get your code working, removing the style tags and the # should apply your CSS in the way you want it.

1 Like
  1. To set the background color on the body you can select it by its element name.
body {
  background-color: gray;
}
  1. You need to close the figcaption element, you are missing the closing tag.

  2. style="body" is an invalid inline style. For inline styles you just set the properties and values you want. The element the inline style is located on is the “selector”.

<main id="main" style="background-color: red">
</main>
1 Like