I am in the process of creating a web UI that currently features a blue banner. I have attempted to adjust its size in the CSS code below, but unfortunately, the changes do not seem to take effect. Previously, the background-size property was set to cover, however, I now require the banner's height to be reduced.
#header {
background-color: #04f;
color: rgba(255, 255, 255, 0.75);
display: -moz-flex;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-moz-align-items: center;
-webkit-align-items: center;
-ms-align-items: center;
align-items: center;
-moz-justify-content: center;
-webkit-justify-content: center;
-ms-justify-content: center;
justify-content: center;
-moz-flex-direction: column;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
padding: 8em 0 6em 0;
background-size: 20px 20px;
background-position: center top;
background-attachment: fixed;
text-align: center;
position: relative;
cursor: default;
}<!DOCTYPE HTML>
<html>
<head>
<title>Author Script by SANDERS</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="static/main.css?version=1" />
</head>
<body>
<!-- Header -->
<header id="header" class="alt">
<div class="inner">
<h1>Sanders Author Script</h1>
<p>A free author formatting script by Stephan J. Sanders</p>
</div>
</header>
</body>
</html>