Фоновое изображение за шириной содержимого тела - PullRequest
Новая
       7

Фоновое изображение за шириной содержимого тела

0 голосов
/ 05 декабря 2018

Я пытаюсь найти любой ответ на мою проблему, но без.Имейте селектор Body с максимальной шириной: 85%, и какой-то селектор с заголовком, и я хочу, чтобы его фоновое изображение получало 100% ширины - за атрибутом селектора тела.

HTML Code - 

<body>
  <header>
    <div></div>
   </header>
</body>

код CSS - 

body {  
  width: 85%;
}

.header {
        display:flex;
        position: relative;
        flex-direction: row;
        align-items: center;
        text-align: center;
        justify-content: center;
        background-color: rgba(0,0,0,0.8);
        background-image: url(../assets/header-bg.png);
        background-repeat: no-repeat;
        background-position: center 120%;
        background-size: cover;
        overflow: visible;
        padding: 10% 0 10% 0;

.header::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,.5);
    }

Ответы [ 2 ]

0 голосов
/ 05 декабря 2018

Я считаю, что это то, что вы ищете, но если это не так, пожалуйста, уточните свой вопрос:

Вместо того, чтобы сделать тело шириной 85%, просто сделайте его 100% и примените фон к телутаким образом фон будет иметь ширину 100% и ширину заголовка 85%. 

<body>
    <header>
        <div></div>
    </header>
</body>

body {
    width: 100vw;
    min-height: 100vh;
    background-image: url(../assets/header-bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0;
}

header {
    height: 10%;
    width: 85%;
    margin: auto;
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    text-align: center;
    justify-content: center;
    background-color: black;
    padding: 10% 0 10% 0;
}
0 голосов
/ 05 декабря 2018

Прежде всего, ваш селектор ошибочен.Вы выбираете не class header, а элемент, поэтому вам не нужен селектор классов ..Во-вторых, вы, вероятно, хотите установить свой заголовок на всю ширину экрана?Для этого вы можете использовать единицы просмотра.100vw - полная ширина области просмотра, 1vw - 1/100 от нее.Затем вам все равно придется переместить заголовок влево, чтобы компенсировать его начальное положение внутри тела.

Ваш код будет выглядеть так: 

body {
  width: 85%;
}

header {
  display: flex;
  position: relative;
  flex-direction: row;
  align-items: center;
  text-align: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.8);
  background-image: url(../assets/header-bg.png);
  background-repeat: no-repeat;
  background-position: center 120%;
  background-size: cover;
  overflow: visible;
  padding: 10% 0 10% 0;
  /* here */
  width: 100vw;
  margin-left: 7.5vw;
}

header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, .5);
}
<body>
  <header>
    <div></div>
  </header>
</body>
...