<button><span>BUY NOW</span></button>button{
border: 1px solid #ffffff;
padding-left: 40px;
padding-right: 40px;
padding-top: 10px;
padding-bottom: 10px;
background: none;
transform: skewX(-15deg);
}
span {
transform: skewX(15deg);
font-size: 18px;
color: rgb(255, 255, 255);
text-transform: uppercase;
display:block;
}
background-image: url(img.png), url(img.png);— изображения нужно перечислять в порядке наложения, выше будет то изображение, которое находится раньше в списке. И позиционируем каждое в отдельности через background-position. 
body {
background-image: url(http://example.com/image.png);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #999;
}
div.header_box C высотой 100vh и шириной 100% и задать ему фон и разместить меню и слайдер по центру при помощи css ( я использую Flex-box ), или же как предложил Антон Спирин задать прямо к body ( это в том случае если вы не собираетесь добавлять что то еще ниже этой шапки )