Live Code Editor Version 2.0

Hướng dẫn tạo Hero Image với CSS - demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
          .container {
            width: 90%;
            height: 700px;
            margin: auto;
            text-align: center;
          }
          body, html {
              height: 100%;
          }

/* Phần khung chứa hình ảnh*/
          .hero-image {
              /* The image used */
              background-image: url("https://freetuts.net/upload/tut_post/images/2017/08/06/985/demo-2.jpg");

/* chiều cao của khung chứa */
              height: 70%;

/* đặt vị trí cho hình ảnh */
              background-position: center;
              background-repeat: no-repeat;
              background-size: cover;
              position: relative;
          }

/* đặt đặt text lên phần hình ảnh */
          .hero-text {
              text-align: center;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: white;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo Hero Image</h2>

<div class="hero-image">
          <div class="hero-text">
            <h1>I am Lionel Messi</h1>
            <p>And I'm a Football player</p>
          </div>
        </div>

<div class="content">
          <p>Đây là nội dung của trang web</p>
          <p>Lionel Andrés "Leo" Messi, thường biết tới với tên gọi Lionel Messi, 
          là một cầu thủ bóng đá người Argentina hiện đang chơi ở vị trí tiền đạo 
          cho câu lạc bộ Barcelona và đội tuyển bóng đá quốc gia Argentina.</p>
        </div>
      </div>
    </body>
</html>