CODEWITHSUNDEEP
htmlcss
Flip
Flip

Reputation: 6761

How can I set different background colors for parts of a single page that overlap the page structure?

I have a page that contains several sections. Like for example:

<nav>
</nav>
<div class="A">
</div>
<div class="B">
</div>    
<div class="C">
</div>
<footer>
</footer>

Now I want to have a background with different colours. The colours shouldn't match the existing sections though, but change inside a section.

For example I want to start with white, covering the nav section and the first half of div.A, then black should cover the 2nd half of div.A and the first half of div.B, and so on.

Is that possible? Using divs just for styling the background wouldn't work here, as I can only nest the divs with the content inside another div but not across two divs.

Upvotes: 0

Views: 87

Answers (1)

Paulie_D
Paulie_D

Reputation: 115174

It is but you would need to use linear-gradients.

something like this:

nav,
div,
footer {
  height: 100px;
  ;
  border: 1px solid grey;
}
nav {
  background: lightblue;
}
.A {
  background-image: linear-gradient(lightblue, lightblue 50%, lightgreen 50%);
  height: 150px;
}
.B {
  background-image: linear-gradient(lightgreen, lightgreen 50%, red 50%);
}
<nav>
</nav>
<div class="A">
</div>
<div class="B">
</div>
<div class="C">
</div>
<footer>
</footer>

I've only done the first three elements here but I think the basis is established.

Note however, that these are individual gradients and so maintainablity would be an issue. A CSS pre-processor mixin or map might be advisable here.

Upvotes: 1

Related Questions