Background image on Header centered in the page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Header

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Header

Description

Background image on Header centered in the page

Demo Code

ResultView the demo in separate window 


<html lang="en">
 <head> 
  <link rel="stylesheet" type="text/css" href="vendors/css/normalize.css"> 
  <link rel="stylesheet" type="text/css" href="vendors/css/fluid-    grid.css"> 
  <link rel="stylesheet" type="text/css" href="resources/css/style.css"> 
  <link href="https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic" rel="stylesheet" type="text/css"> 
  <style>

* {<!--from w  w w .  j  a  v  a2s .  co m-->
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
html {
   color: #555;
   font-family: 'Lato', 'Arial', sans-serif;
   font-weight: 300;
   font-size: 20px;
   text-rendering: optimizeLegibility;
   height: 100%;
}
.row {
   max-width: 1140px;
}
header {
   background: url(img/hero.jpg);
   background-size: cover;
   background-position:center;
}
.hero-text-box {
   position: absolute;
   width: 1140px;
   max-width: 100%;
   text-align: center;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
h1 {
   margin: 0;
}

      </style> 
 </head> 
 <body> 
  <header> 
   <div class="hero-text-box"> 
    <h1>Welcome to my site</h1> 
    <a href="#">Call me</a> 
    <a href="#">Show me more</a> 
   </div> 
  </header>  
 </body>
</html>

Related Tutorials