How to increase height in background url()?

E

Edgar Balyan2021-06-20 21:59:14

css

Edgar Balyan, 2021-06-20 21:59:14

I want to re-create this site https://www.w3schools.com/w3css/tryw3css_templates...
But there is a girl's photo on the first screen and I don't want to make a separate img tag, I want to make it background url() because I know that it's possible but I don't understand how.
But at the same time I want the site to be adaptive, when the site is reduced, the picture also decreased as in the original site.
And the problem is that the picture does not come out in height because, as I understand it, the parent does not have a height set and it cannot be with full height.
I may have explained it poorly if you have any questions, write

HTML

<!DOCTYPE html>
<html lang="en">
<head>
   <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Oswald&display=swap" rel="stylesheet">
   <script src="https://kit.fontawesome.com/a0035f4891.js" crossorigin="anonymous"></script>
   <link rel="stylesheet" href="css/style.css">
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<body>
    <div class="top">
         <div class="top__left">
            <a href="#" class="top__icon"><i class="fab fa-facebook-square"></i></a>
            <a href="#" class="top__icon"><i class="fab fa-instagram"></i></a>
            <a href="#" class="top__icon"><i class="fab fa-snapchat"></i></a>
            <a href="#" class="top__icon"><i class="fab fa-flickr"></i></a>
            <a href="#" class="top__icon"><i class="fab fa-twitter"></i>  </a>
            <a href="#" class="top__icon"><i class="fab fa-linkedin-in"></i></a>
         </div>
         <a href="#" class="top__icon top__icon_right"><i class="fas fa-search"></i></a>
    </div>
    <header class="header">
      <div class="header__heading-group">
         <h1 class="header__heading">
            Jane Bloglife
         </h1>
         <h4 class="header__heading-second">
            Welcome to the blog of
            <span class="header__heading-second_bg">Jane's world</span>
         </h4>
      </div>
    </header>
    <section class="sec-woman">
      <div class="sec-woman__heading-group">
         <h3 class="sec-woman__heading-second">Janes</h3>
         <h2 class="sec-woman__heading">Fashion Blog</h2>
         <a href="#" class="sec-woman__btn">Subscribe</a>
      </div>
    </section>
</body>
</html>

css

/*Обнуление*/
*{
  padding: 0;
  margin: 0;
  border: 0;
}
*,*:before,*:after{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
  height: 100%;
  width: 100%;
  font-size: 100%;
  line-height: 1;
  font-size: 14px;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/

h1,h2,h3,h4,h5,h6 {
   font-family: 'Oswald', sans-serif;
}

body {
   padding: 0;
   margin: 0;
   font-family: 'Open Sans', sans-serif;
}

a{
   color: #fff;
}

.top {
   color: #fff;
   background-color: #000; 
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.top__icon {
   padding: 11.5px 16px;
   font-size: 15px;
}

.top__icon:hover {
   background-color: #ccc;
   color: #000;
}

.header {
   color: #000;
   padding: 48px 16px;
}

.header__heading-group {
   text-align: center;
}

.header__heading {
   font-size: 48px;
   margin: 10px 0;
   font-weight: bolder;
   text-transform: uppercase;
}
.header__heading-second {
   margin: 20px 0 10px;
   font-size: 16px;
}
.header__heading-second_bg {
   padding: 0 8px;
   background-color: #000;
   color: #fff;
}

.sec-woman {
   color: #fff;
}
.sec-woman__heading-group {
   padding: 12px 24px;
   background: url(../img/jane.jpg)no-repeat;
}
.sec-woman__heading-second {
   margin: 10px 0 20px;
   font-size: 36px;
}
.sec-woman__heading {
   margin: 20px 0;
   font-weight: bolder;
   font-size: 64px; 
   text-transform: uppercase;
}
.sec-woman__btn {
   font-family: 'Oswald', sans-serif;
   font-size: 18px;
   display: inline-block;
   margin: 10px 0;
   text-transform: uppercase;
   color: #000;
   padding: 16.5px 24px;
   background-color: #fff;
   opacity: 0.6;
}

.sec-woman__btn:hover {
   background-color: #ccc;
   opacity: 1;
}

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

D

Damir Shaniyazov, 2021-06-20
@shaniyazovdamir

I really didn’t understand, here you need to understand who the parent is and what size he has. It may be that the picture should also be in a different place :)) here only by experience
I want to pay attention in your example img has a width of 100% and a height of auto, in this case img sets the dimensions of the parent element.
And you can go from the opposite, when the parent has a certain size. In this case, you need to use background-size and possibly background-position. Probably going to have to make sacrifices