Css help - background images and margins - css

Question

im trying to change the custom CSS of my page headers, but every time i try to add a top-margin to one of the nested divs, it moves the entire background image down.
Current code (abridged):
<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>
Ideally, all Im trying to do is have a background image that spans the entire header (150px), and then a transparent-color overlay on the background text.
Using margin-top:25px because when i tried adding a vertical-align:middle to .wf-table, nothing happened.
Suggestions?

Answer 1

The trouble is that your .wf-table element was not respecting #fancy-header as its parent. The trick is to add float: left and it'll behave in this case as you expect. Check it out here - https://jsfiddle.net/96hf0nqa/
Floats are a little tricky but super important for effective CSS. You can read a lot about them here. Good luck!

Answer 2

If your <header> is the main container to be full-screen then ideally you should be using a grid approach.
Not sure if you use a grid or not? In this case the wf-wrap is your grid-row:
.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 */
}
Then your wf-table should be positioned absolute to have full control:
.wf-table {
position: absolute; /* to control top left right bottom */
top: 2.5rem; /* default offset */
z-index: 1 /* if overlap requires it */;
}
DEMO
Typically a grid-row is divided into columns. The position relative belongs on a column actually.
.column {
box-sizing: border-box;
padding: 0 1rem;
float: left;
height: 100%;
position: relative;
}
.g50 { max-width: 50%; width: 100%; }
So your HTML can be made a little bit more generic to gain control on the position of elements inside columns.
<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
Additionally there is a way to vertically align a block element in 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%);
}