background image instead of section color?

[PaintedPixels]

Hey, I'm hoping someone can help me! I've been working on revamping my website, and I'm not super familiar with CSS, and I'm kinda Frankensteining this thing together and learning as I go. I'm getting pretty close, but now I've got this weird problem where I have a sidebar on the left and right of my main content. As you can see, the sidebars both have the correct background color, but for some reason the main content just has the background image, making the text impossible to read. Does anyone have any clues on where to begin looking to get this looking right?

I've used sadgrlonline's layout generator as my base, and I'm not sure where I'm going wrong here.
Any help would be greatly appreciated! Please forgive my noobness.

[IndigoGolem]

Can you link to that page so we can see the code?

I haven't used sadgrl's generators, but from what i can see here it looks like you have a <div> for content that's split into header, left sidebar, and right sidebar. You probably need to either make another section for the middle with text that has a background color set, or set a background color in the <div> containing the sidebars.

[PaintedPixels]

Ah, I can't link to it because I haven't put it online yet, I was hoping to get it all working first. But actually maybe I'll just upload it so it will be easier to link to. Can't do it from here though, but I'll do it this evening.

But yeah, there's a <div> dividing the left sidebar, middle, and right sidebar. Although the middle is just labeled <main>? No div? I'm not familiar enough to know why that is, or if that's significant.

Anyway, I'll post later tonight with the link. Thanks!

EDIT: Hmm, yeah, maybe it has something to do with that main tag it's using instead of <div>...If I specify a color for main in CSS, then the entire page is that background color and I lose the background image.

[IndigoGolem]

I'm not familiar with <main> as an element but it's in Mozilla's developer docs. You could probably add style="background-color:blue" to it, or replace it with a <div> and add the same CSS.

[PaintedPixels]

Oof, actually, as I found out later, I was so focused on trying to get the homepage look right, that the CSS was breaking everything else on my page! Particularly my blog posts. Soooo...I'm thinking I'll have to try a different approach for now.

I'm using Publii, a static site generator, to make my site, which has been mainly a blog. You can add individual pages, but if you try to add something like <style> tags into the html of the pages, it just deletes them when you save, as I think it relies only on the CSS files. So I might have to figure out a different way to do it. I appreciate all the advise so far though.

[Dan Q]

But yeah, there's a <div> dividing the left sidebar, middle, and right sidebar. Although the middle is just labeled <main>? No div? I'm not familiar enough to know why that is, or if that's significant.

Nope, <main> is only semantically-special.

So as part of HTML5, the standards evolved to invent a stack of new elements, like <header>, <footer>, <main>, <article>, <section>, <aside>, and <nav>.

Here's the secret about them: they're all just generic block elements, like <div>! The only difference is that they have semantic meaning: so accessibility technologies know where to find things. There are guidelines about how you should use them (your site will "work" if you break the guidelines, though), but it's basically "rules" like this:

• <main> should contain the main content of your page, you should only have one <main> on a page
• An <article> is expected to be a piece of content that "stands alone", i.e. it would make sense even if it were delivered separately from everything else on the page: so it could be e.g. a blog post
• A <section> is similar, but it doesn't have to make sense on its own
• <nav> should contain navigation links, e.g. a menu (possibly within an inner list or something): this one's helpful for people using screen readers because they can ask their browser to "jump to the navigation" if one is detected, for example [the same's true for main content, etc.])

But in practice, what these new semantic block elements are best for is to turn <div>-soup and a ton of class names into something more-readable for you, the developer.

Anyway, the tl;dr: is no, <main> doesn't mean anything special, and you can treat it just as a <div>. The one convenience is that you can refer specifically to that element in your CSS with a nice shorthand syntax:

Code

main {
  background: lightgray;
  color: black;
}

if you try to add something like <style> tags into the html of the pages, it just deletes them when you save, as I think it relies only on the CSS files. So I might have to figure out a different way to do it. I appreciate all the advise so far though.

(Almost) everything you can do with inline CSS you can translate to using a CSS file. So, for example, @IndigoGolem suggested

You could probably add style="background-color:blue" to it

It sounds like they're suggesting you did something like this:

Code

<main style="background-color:blue">
  ...
</main>

But you could equally well do this (if only you were allowed <style> tags):

Code

<style>
main {
  background-color: blue;
}
</style>

<main>
  ...
</main>

Or you could use an external CSS file, which contained something like this:

Code

main {
  background-color: blue;
}

These approaches are all functionally-identical for your purposes: either a style="..." attribute, or a <style>...</style> block, or a separate stylesheet can all be made to work the same.

It's a little surprising that your <style> tags are getting stripped, though!