How to Overlay or Write Text Over a Background Image in Browser Using HTML5 & CSS3 Full Tutorial For Beginners



<!DOCTYPE html>
    <title>Title of the document</title>
      body {
        font-family: 'Source Sans Pro', sans-serif;
      header {
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(;
        background-size: cover;
        height: 100vh;
      .container {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        text-align: center;
      h1 {
        text-transform: uppercase;
        margin: 0;
        font-size: 3rem;
        white-space: nowrap;
      <div class="container">
        <h1>Cakes and Fruits</h1>

Leave a Reply