0

I have a box shadow on the body and it works perfectly until I add content that makes the page longer than the viewport. The body's background continues however the box shadow stops. Is there a way to make it so the box shadow reaches to the bottom of the page.

CSS:

body {
  width:100%;
  height: 100%;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
}

enter image description here

Full code: https://codepen.io/jsa2025/pen/vYmbzmM

Jack Adee
  • 73
  • 1
  • 1
  • 6

2 Answers2

0

Give this a try:

body {
  width:100%;
  height: 100%;
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 490px black;
  margin-bottom: -20px;
}
<body>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
  <h1>My Stuff </h1>
</body>

Also, take a look at this question regarding the natural Body tag margin. I am it may be what you are looking for: Post on natural body tag margin

Juan C
  • 82
  • 1
  • 10
  • i added the codepen to the question so that you could see the full html. It does not appear to be a problem with the margins. – Jack Adee Aug 11 '21 at 22:41
  • I guess maybe try including !important to the margin-bottom to force it, it may work. Otherwise, I am out of ideas and hope a CSS wizard comes to help you. Best of luck! – Juan C Aug 11 '21 at 22:43
  • Thanks for the help! – Jack Adee Aug 11 '21 at 22:44
0

This was an error with the rendering of the preview.

EDIT: The error is still happening

Jack Adee
  • 73
  • 1
  • 1
  • 6