Css help - фоновые изображения и поля

Question

im пытается изменить пользовательский CSS моих заголовков страниц, но каждый раз, когда я пытаюсь добавить верхний край к одному из вложенных div, он перемещает весь фоновый рисунок вниз. Текущий код (в сокращенном виде):

<header id="fancy-header" style=" 
     background-color: #ffffff; background-size: cover; 
     background-repeat: no-repeat; 
     background-image: url(http://thegsc.co.il/wp-content/uploads/2014/07/about-header.jpg); 
     background-position: center center; min-height: 150px"> 
    <div class="wf-wrap"> 
     <div class="wf-table" style=" 
      background:rgba(32,117,200, .6) !important; 
      margin-top:25px;"> 
      <div class="title">title</div><div class="breadcrumbs">breadcrumbs</div> 
     </div> 
    </div> 
</header> 

В идеале, все Им пытаются сделать, это иметь фоновое изображение, которое охватывает весь заголовок (150px), а затем прозрачно-наложение цвета на фоне текста. Использование margin-top:25px, потому что, когда я попытался добавить вертикальную выровненную: от средней до. Wf-таблицы, ничего не произошло.

Предложения?

Answer 1

Проблема в том, что ваш элемент .wf-table не уважал # fancy-header как своего родителя. Хитрость заключается в том, чтобы добавить float: left, и он будет вести себя в этом случае, как вы ожидаете. Здесь вы найдете здесь https://jsfiddle.net/96hf0nqa/

Поплавки немного сложны, но очень важны для эффективного CSS. Вы можете много узнать о них here. Удачи!

Answer 2

Если ваш <header> является основным контейнером для полноэкранного режима, то в идеале вы должны использовать сетку.

Не знаете, используете ли вы сетку или нет? В этом случае wf-wrap ваша сетка-строка:

.wf-wrap { 
    box-sizing: border-box; /* box model fix */ 
    max-width: 94rem; /* 960px - gutter */ 
    padding: 0 1rem; /* grid gutter */ 
    margin: 0 auto; /* to center */ 
    height: 100%; 
    position: relative; /* to init the absolute offset of it's children */ 
} 

Тогда ваш wf-table должен быть установлен абсолютный, чтобы иметь полный контроль:

.wf-table { 
    position: absolute; /* to control top left right bottom */ 
    top: 2.5rem; /* default offset */ 
    z-index: 1 /* if overlap requires it */; 
} 

DEMO

---

Как правило, сетки -row делится на столбцы. Роль позиции принадлежит столбцу.

Таким образом, ваш HTML можно сделать немного более общим, чтобы получить контроль над положением элементов внутри столбцов.

<div class="header"> 
    <div class="row"> 
     <div class="column g50"> 
      <div class="wf-table"><!--content here--></div> 
     </div> 
     <div class="column g50"></div> 
    </div> 
</div> 

DEMO

Кроме того, существует способ вертикального выравнивания блок элемент в CSS3:

.middle-y { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -o-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
}