Why Does the Linear-Gradient Disappear When I Make an Element Position:Absolute

Why does the linear-gradient disappear when I make an element position:absolute?

Add some height to the body to see the background:

* {  margin: 0px;  padding: 0px;}
body {  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);  min-height: 100vh;}
header {  position: absolute;  top: 50%;  left: 50%;  margin-right: -50%;  transform: translate(-50%, -50%);}

<header>  <h1>Hello!</h1></header>

Linear gradient won't show after centering vertically and horizontally

Because your body is set to absolute its size is 0 for your html. Setting your html to 100% height will fix it.

html {  height: 100%;}
body{  background: linear-gradient(to right, #CB356B 0%, #BD3F32 100%);  margin: 0;  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%);}

<h1>Lorem Ipsum</h1>

Position absolute makes the background image disappear and I'm not sure why

About the image that disappears when you set position to absolute it happens because you have set in body the overflow to hidden

body,
html {
  background-color: var(--background-color);
  scroll-behavior: smooth;
  position: relative;
  overflow: hidden; /*this causes the background-image to disappear*/
}

Delete this line and the image will reappear.

About the orientation of the background image see this article https://www.sitepoint.com/css3-transform-background-image/ or this stackoverflow post How to rotate the background image in the container?

While using position absolute my background disappears

div to have height 100% and width 100% body also needs to have height as 100% and width as 100% which is a bad practice

instead you can consider using viewport widths and viewport height

check the following snippet

body {  margin: 0;  padding: 0;  background-image: repeating-linear-gradient(90deg, #FFFFFF, #FFFFFF 18px, #CA1D20 0px, #CA1D20 28px);}/* TRADITIONS */
.jumbotron.map {  width: 60vw;  height: 100vh;  background-color: #669900;}

<body>  <div class="body">    <div class="container">      <div class="jumbotron map">        <div id="map"></div>      </div>    </div>  </div></body>

Using position absolute is making my images disappear

Your .front and .back elements are absolutely positioned inside the .card parent. You need to specify a height/width on the containing element because absolute takes the children out of the normal flow.

You have referenced images in your code and I don't know how big they are meant to be, so I've made an assumption here. You'll need to adjust the pixel values as needed.

If you make this change you should see the images no longer "disappear":

.card {
  position: relative;
  transform-style: preserve-3d;
  transform: rotateY(90deg); 
  border:1px solid red;
  height:100px;
  width:100px;
}

Why Does the Linear-Gradient Disappear When I Make an Element Position:Absolute