Как мне уменьшить размер моего фонового изображения, не перекрывая содержимое моей веб-страницы

Question

Привет, я довольно новичок в HTML / CSS / Javascript, я изо всех сил стараюсь уменьшить размер моих фоновых изображений в карусели слайдеров на моей веб-странице.То, что я пытаюсь сделать, это уменьшить размер моего фонового изображения, чтобы оно располагалось поверх моего имени входа, а не под ним, а затем иметь черный фон за моим именем входа.

Пожалуйста, посмотрите мое изображение веб-страницы>https://imgur.com/NcqqZk1

    html body
    {
        margin:0;
        padding:0;
    }
    
    body{
        height:100%;
        background-color:black !important;
    }
    
    /*-------------header-----------*/
    
    
    header
    {
        height:110px;
        line-height: 110px;
        position:fixed;
        z-index:1;
        width:100%;
    }
    
    .secondary{
        background-color:darkorange;
        box-shadow:0px 0px 15px 0px;
        transition:all 0.5s ease-in-out;
    }
    
    /*-------------nav-----------*/
    
    
    ul
    {
        list-style:none;
       
    }
    
    ul li
    {
        display:inline-block;
        
    }
    
    header nav
    {
        float: right;
    }
    
    .logo img
    {
        margin-top:-20px;
        height:30px;
    }
    
    header nav ul li a 
    {
        padding-right: 25px;
        font-weight: bold;
        color: white;
        transition: all 0.5s ease-in;
    }
    
    header nav ul li a:hover
    {
        text-decoration: none;
        color:black;
    }
    
    /*-------------slider-----------*/
    
    
    .img1
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work.jpg);
        background-size:100% 100%;
        
        
    }
    
    .slider,.slider ul,.slider ul li
    {
        height:100%;
        width:100%;
        color:white;
        text-align: center;
        padding:0px;
        
    }
    
    .slider h2
    {
        font-weight: bold;
        margin-top:260px;
    }
    
    .slider span
    {
        color:orange;
    }
    
    .slider a 
    {
        padding: 10px 40px;
        margin-right: 10px;
        
    }
    
    /*-------------slider-button-----------*/
    
    
    .slider a.btn-half
    
    {
        background-color: orange;
        color: white;
        width:200px;
    }
    
    .slider a.btn-half:hover
    {
        opacity:0.7;
        transition:0.5s ease-in;
    }
    
    
    
    
    .img2
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work2.jpg);
        background-size:100% 100%;
    }
    
    .img3
    {
        background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.7)),url(work3.jpg);
        background-size:100% 100%;
    }
    
    .slider i
    {
        font-size:30px;
        margin-right:10px;
    }
    
    /*-------------login-----------*/
    
    
    
    .login-box
    {
        width:280px;
        position:absolute;
        top:1000px;
        left:50%;
        transform: translate(-50%, -50%);
        color:white;
    }
    
    .login-box h1 
    {
        width:100px;
        font-size:40px;
        border-bottom: 6px solid darkorange;
        margin-bottom:50px;
        padding:13 px 0;
    }
    
    .textbox
    {
        width:100%;
        overflow:hidden;
        font-size:20px;
        padding:8px 0;
        margin:8px 0;
        border-bottom: 1px solid darkorange;
    }
    
    .textbox i 
    {
        width:26px;
        float:left;
        text-align:center;
    }
    
    .textbox input
    {
        border:none;
        outline:none;
        background:none;
        color:white;
        font-size:17px;
        width:80%;
        float:left;
        margin:0 10px;
    }
    
    .btn
    {
        width:100%;
        background:none;
        border:2px solid darkorange;
        color:white;
        padding:5px;
        font-size:17px;
        cursor:pointer;
        margin:12px 0;
    }
    
    .btn:hover
    {
        opacity:0.7;
        transition:0.5s ease-in;
    }
    
    /*-------------FAQ-----------*/
    
    .fqcontainer
    {
        max-width: 60%;
        margin:0 auto;
        padding:70px 0 20px;
        width:100%;
    }
    
    
    .fqcontainer h1
    {
        text-align: center;
        font-family: 'roboto', 'sans-serif';
        font-size: 60px;
        margin:50px 0 0;
        color: white;
    }
    
    .acc
    {
        border-bottom:1px solid white;
    }
    
    .acc h3
    {
        font-size:25px;
        background-color: black rgba(0,0,0,0.6);
        color: white;
        padding:15px;
        margin:0;
        cursor:pointer;
        font-family:'roboto','sans-serif';
        letter-spacing: 2px;
        position:relative;
    }
    
    .acc h3:after
    {
        content: '+';
        position:absolute;
        right: 20px;
        font-size:40px;
        top:50%;
        transform:translateY(-50%);
    }
    
    .acc.active h3:after
    {
        content:'-';
    }
    
    .fqcontent
    {
        background-color:white;
        margin-top:0;
        line-height:1.5;
        display:none;
    }
    
    
    .content-inner
    {
        padding:15px;
        
    }
    
    
    
    
    
    /*-------------footer-----------*/
    
    
    .footer {
       width:100%;
        background-color: darkorange;
        padding:50px 0px;
        
        
    }
    
    
    footer nav
    {
        text-align:center;
    }
    
    
    footer nav ul li a 
    {
        padding-right: 25px;
        font-weight: bold;
        color: white;
        transition: all 0.5s ease-in;
    }
    
    footer nav ul li a:hover
    {
        text-decoration: none;
        color:black;
    }

   <html>
   <body>
        <!-------------Header/Nav----------->
        <header>
            <div class="container">
                <div class="row">
                    <a href="index.html" class="logo"><img src="logo.png"></a>
                    <nav>
                        <ul>
    
                            <li><a href="#login-box">Log In</a></li>
                            <li><a href="">FAQ</a></li>
                            <li><a href="">My Surveys</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    
        <!-------------Slider----------->
    
        <section class="slider">
            <ul class="slider-carousel" id="slider-carousel">
    
                <li class="img1">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
    
                <li class="img2">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
    
                <li class="img3">
                    <h2>Slider<span>Slider</span></h2>
                    <p>Hello World</p>
                    <i class="fab fa-apple"></i>
                    <i class="fab fa-android"></i>
                    <i class="fab fa-windows"></i>
                    <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
                    </p><br>
                    <a href="" class="btn btn-half">Get Started</a>
    
                </li>
    
            </ul>
    
        </section>
    
        <!-------------Login----------->
    
        <div class="login-box">
            <div id="login-box">
                <h1>Login</h1>
    
                <div class="textbox">
                    <i class="fas fa-user"></i>
                    <input type="text" placeholder="Username" name="" value="">
                </div>
    
    
                <div class="textbox">
                    <i class="fas fa-lock"></i>
                    <input type="text" placeholder="Password" name="" value="">
                </div>
    
                <input class="btn" type="button" name="" value="Sign In">
    
            </div>
        </div>
    
        <!-------------FAQ----------->
    
    
        <div class="fqcontainer">
            <h1>FAQ Section</h1>
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
            <div class="acc">
                <h3>Question 1: What is?</h3>
                <div class="fqcontent">
                    <div class="content-inner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius
                            turpis, eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et
                            nulla rutrum, convallis tellus vitae, eleifend massa</p>
                    </div>
                </div>
            </div>
    
        </div>
    
        <!-------------Footer----------->
    
        <footer>
            <div class="footer">
                <nav>
                    <ul>
                        <li><a href="">Log In</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">My Surveys</a></li>
                    </ul>
                </nav>
            </div>
        </footer>
        <script src="main.js"></script>
    </body>
    </html>

Answer 1

это то, что вам нужно изменить / добавить в вашем CSS:

/*-------------login-----------*/
.login-box{
  position: relative;
  height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

ваш родительский div вашего раздела входа в систему ( .login-box ) нуждается в значении "position" (например: position: относительный), затем вашПоле входа получает позицию внутри .login-box .

с фоновым изображением, вы должны установить конкретную высоту для родительского элемента div.

Если вы используете тег изображения внутри вашего .login-box div, то div будет такой же высоты, как и само изображение

пример выполнения (полный код):

html body {
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  background-color: black !important;
}


/*-------------header-----------*/

header {
  height: 110px;
  line-height: 110px;
  position: fixed;
  z-index: 1;
  width: 100%;
}

.secondary {
  background-color: darkorange;
  box-shadow: 0px 0px 15px 0px;
  transition: all 0.5s ease-in-out;
}


/*-------------nav-----------*/

ul {
  list-style: none;
}

ul li {
  display: inline-block;
}

header nav {
  float: right;
}

.logo img {
  margin-top: -20px;
  height: 30px;
}

header nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

header nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/*-------------slider-----------*/

.img1 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider,
.slider ul,
.slider ul li {
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  padding: 0px;
}

.slider h2 {
  font-weight: bold;
  margin-top: 260px;
}

.slider span {
  color: orange;
}

.slider a {
  padding: 10px 40px;
  margin-right: 10px;
}


/*-------------slider-button-----------*/

.slider a.btn-half {
  background-color: orange;
  color: white;
  width: 200px;
}

.slider a.btn-half:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}

.img2 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.img3 {
  background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.7)), url(http://lorempixel.com/1920/1080/);
  background-size: 100% 100%;
}

.slider i {
  font-size: 30px;
  margin-right: 10px;
}


/*-------------login-----------*/
.login-box{
position: relative;
height: 100vh;
}
#login-box {
  width: 280px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.login-box h1 {
  width: 100px;
  font-size: 40px;
  border-bottom: 6px solid darkorange;
  margin-bottom: 50px;
  padding: 13 px 0;
}

.textbox {
  width: 100%;
  overflow: hidden;
  font-size: 20px;
  padding: 8px 0;
  margin: 8px 0;
  border-bottom: 1px solid darkorange;
}

.textbox i {
  width: 26px;
  float: left;
  text-align: center;
}

.textbox input {
  border: none;
  outline: none;
  background: none;
  color: white;
  font-size: 17px;
  width: 80%;
  float: left;
  margin: 0 10px;
}

.btn {
  width: 100%;
  background: none;
  border: 2px solid darkorange;
  color: white;
  padding: 5px;
  font-size: 17px;
  cursor: pointer;
  margin: 12px 0;
}

.btn:hover {
  opacity: 0.7;
  transition: 0.5s ease-in;
}


/*-------------FAQ-----------*/

.fqcontainer {
  max-width: 60%;
  margin: 0 auto;
  padding: 70px 0 20px;
  width: 100%;
}

.fqcontainer h1 {
  text-align: center;
  font-family: 'roboto', 'sans-serif';
  font-size: 60px;
  margin: 50px 0 0;
  color: white;
}

.acc {
  border-bottom: 1px solid white;
}

.acc h3 {
  font-size: 25px;
  background-color: black rgba(0, 0, 0, 0.6);
  color: white;
  padding: 15px;
  margin: 0;
  cursor: pointer;
  font-family: 'roboto', 'sans-serif';
  letter-spacing: 2px;
  position: relative;
}

.acc h3:after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 40px;
  top: 50%;
  transform: translateY(-50%);
}

.acc.active h3:after {
  content: '-';
}

.fqcontent {
  background-color: white;
  margin-top: 0;
  line-height: 1.5;
  display: none;
}

.content-inner {
  padding: 15px;
}


/*-------------footer-----------*/

.footer {
  width: 100%;
  background-color: darkorange;
  padding: 50px 0px;
}

footer nav {
  text-align: center;
}

footer nav ul li a {
  padding-right: 25px;
  font-weight: bold;
  color: white;
  transition: all 0.5s ease-in;
}

footer nav ul li a:hover {
  text-decoration: none;
  color: black;
}


/* CHANGES */

.slider {
  overflow: hidden;
  max-height: 100vh;
}

<body>

  <!-------------Header/Nav----------->


  <header>
    <div class="container">
      <div class="row">
        <a href="index.html" class="logo"><img src="logo.png"></a>
        <nav>
          <ul>

            <li><a href="#login-box">Log In</a></li>
            <li><a href="">FAQ</a></li>
            <li><a href="">My Surveys</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </header>

  <!-------------Slider----------->

  <section class="slider">
    <ul class="slider-carousel" id="slider-carousel">

      <li class="img1">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img2">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>


      <li class="img3">
        <h2>Slider<span>Slider</span></h2>
        <p>Hello World</p>
        <i class="fab fa-apple"></i>
        <i class="fab fa-android"></i>
        <i class="fab fa-windows"></i>
        <p><br>Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod.Praesent nibh leo, auctor vel po rttitor in, auctor et sapien.<br> Nullam et nulla rutrum, convallis tellus vitae, eleifend massa
        </p><br>
        <a href="" class="btn btn-half">Get Started</a>

      </li>

    </ul>

  </section>

  <!-------------Login----------->

  <div class="login-box">
    <div id="login-box">
      <h1>Login</h1>

      <div class="textbox">
        <i class="fas fa-user"></i>
        <input type="text" placeholder="Username" name="" value="">
      </div>


      <div class="textbox">
        <i class="fas fa-lock"></i>
        <input type="text" placeholder="Password" name="" value="">
      </div>

      <input class="btn" type="button" name="" value="Sign In">

    </div>
  </div>

  <!-------------FAQ----------->


  <div class="fqcontainer">
    <h1>FAQ Section</h1>
    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

    <div class="acc">
      <h3>Question 1: What is?</h3>
      <div class="fqcontent">
        <div class="content-inner">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien turpis, tincidunt nec maximus et, elementum vel massa. Sed quis suscipit tortor, vel lacinia enim. Pellentesque posuere a urna eget fermentum. Vivamus tincidunt varius turpis,
            eget suscipit arcu aliquam vel. Maecenas fermentum tellus vel euismod porttitor. Curabitur sodales sem nec nisl finibus, nec suscipit magna euismod. Praesent nibh leo, auctor vel porttitor in, auctor et sapien. Nullam et nulla rutrum, convallis
            tellus vitae, eleifend massa</p>
        </div>
      </div>
    </div>

  </div>

  <!-------------Footer----------->

  <footer>
    <div class="footer">
      <nav>
        <ul>
          <li><a href="">Log In</a></li>
          <li><a href="">FAQ</a></li>
          <li><a href="">My Surveys</a></li>
        </ul>
      </nav>
    </div>
  </footer>


  <script src="main.js"></script>

</body>

</html>