Grade3
@Grade3
Начинающий front-end разработчик

Как увеличить высоту в background url()?

Хочу пере создать вот этот сайт https://www.w3schools.com/w3css/tryw3css_templates...
Но там на первом экране есть фото девушки и я не хочу сделать отдельный тег img, хочу сделать это background url() потому что знаю что так можно но не понимаю как.
Но при этом хочу чтоб сайт был адаптивным, при уменьшении сайта картинка тоже уменьшилась как в оригинальном сайте.
И проблема в том что картинка по высоте не выходит потому что как я понял у родителя не задано высота и он не может с полной высотой быть.
Я возможно как то плохо обьяснил если вопросы будут напишите
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;
}

  • Вопрос задан
  • 77 просмотров
Пригласить эксперта
Ответы на вопрос 1
Действительно не понял, тут надо понимать кто есть родитель и какие у него размеры. Может быть такое, что и рисунок должен стоять в другом месте :)) тут только опытным путем

Хочу обратить внимание в вашем примере img имеет ширину 100% и высоту auto, в таком случае img задает размеры родительскому элементу.

А можно пойти от обратного, когда у родителя есть определенные размеры. В таком случае надо пользоваться background-size и возможно background-position. Скорее всего придется пойти на жертвы)
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы