Background Problem With Vignette and Flexbox

HTML-CSS
1

Hello All,

I ran into an issue that I believe is related to my use of flexbox and my wanting to have a vignette and repeating linear gradient background applied to my body tag. The repeating linear gradient seems to break in some places, seemingly because of flexbox doing what it does - flexing.

Curious if anyone can see what I don’t and help me clean the styling of the background.

Here’s the codepen:
https://codepen.io/logancollman/pen/MdrWOP?editors=1100

2

Not sure if this is the issues you are having but the height 100% on the html selector is breaking the gradient.

2 Likes
3

@lasjorg agreed 100%. That is the only problem I see.
@logancollman Is that the problem you were referring to?

Not sure if this is the issues you are having but the height 100% on the html selector is breaking the gradient.

4

@brandon_wallace
@lasjorg

facepalm
I thought it was necessary to use 100% body height for flexbox in regard to my footer being pushed down. Removing height 100% solved exactly the issue I was having. Thanks for the help!

1 Like
5

@logancollman You usually set width and height on the flex container (the parent of the flex items) so that they know how they should position themselves.

Example: If you comment out the height: 50vh, the tiles will not space themselves out properly.

<div class="row">
  <div class="tile"></div>
  <div class="tile"></div>
  <div class="tile"></div>
</div>

.row {
  height: 50vh;
  display: flex;
  border: green solid;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}

.tile {
  width: 100px;
  height: 100px;
  border: red solid;
}
1 Like
6

Makes complete sense. I think I was being lazy by applying it the way I did, avoiding making additional divs. Thanks for pointing out why the way I did it was flawed. :slight_smile: