отзывчивое стабильное фоновое изображение в заголовке - PullRequest
Новая
       0

отзывчивое стабильное фоновое изображение в заголовке

0 голосов
/ 24 октября 2018

Я пытался конвертировать PSD в HTML, и у меня возникла небольшая проблема, решающая эту проблему.Посмотрите на изображение ниже:

enter image description here

Как я уже говорил с красной стрелкой, в заголовкешаблон!Как я могу добавить этот фон с отзывчивым и стабильным положением, даже если размер браузера изменяется?Фон всегда должен содержать 70% экрана (заканчивается между логотипом и первым навигационным элементом).

Вот jsfiddle моей работы: https://jsfiddle.net/4dpgbLt9/2/

html,
body {
  height: 100%;
}

body {
  font-family: IranSans, sans-serif;
}

.header {
  height: 100vh;
  width: 100vh;
  background: url("https://i.imgur.com/aN7jCZE.png") left no-repeat;
  background-size: contain;
}

.navbar {
  direction: rtl;
  padding-top: 16px;
}

.nav-item .nav-link {
  font-size: 16px;
  padding: 0 20px 0 20px !important;
}

.nav-item.active .nav-link {
  color: #ffd738 !important;
}

.nav-item .nav-link {
  color: #ffffff !important;
}

.nav-account-parent {
  position: relative;
}

.nav-account {
  position: absolute;
  width: 100%;
  height: 100px;
  top: -50px;
  z-index: -1;
  background-color: #025c64;
  border-radius: 16px;
}

.navbar-brand img {
  width: 220px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<html lang="en">

<body>
  <nav class="navbar navbar-expand-md navbar-light bg-transparent justify-content-center">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="https://i.imgur.com/gURHBju.png" alt="Logo">
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">صفحه اصلی</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درباره ما</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">درخواست مشاوره</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">خدمات</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">فروشگاه</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">ارتباط با ما</a>
          </li>
          <li class="nav-item nav-account-parent">
            <div class="nav-account"></div>
            <a class="nav-link" href="#">ورود / عضویت</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <div class="header">

  </div>

Спасибо за ваше время 101

1 Ответ

0 голосов
/ 24 октября 2018

Это мое решение:

  1. Изменить .header width с 100vw на 100%
  2. Измените background-size с contain на 70% в пределах .header
  3. Добавить topbackground: для привязки к верхнему левому углу

CSS: 

.header {
    height: 100vh;
    width: 100%;
    background: url("https://i.imgur.com/aN7jCZE.png") top left no-repeat;
    background-size: contain;
    background-size: 70%;
}

codepen: https://codepen.io/CodeBoyCode/pen/VEEoQW

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...