Benny Sutton is 4 hire - just click here

Hero Image CSS

A hero image is often found at the top of a landing page, usually a homepage. Often animated in an owl carousel but that could be quite distracting - a single image with a short text message is far more effective

See the working demo below.

Demo: How to create Hero Image with pure CSS

CSS

This is an exercise in positioning and sizing with CSS. You might not want the linear gradient, delete if you don't.

           
        body, html {
            height: 100%;
        }

        /* The hero image */
        .hero-image {
          /* Use "linear-gradient" to add a darken background effect to the image. This will make the text easier to read */
          background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://developer.bennysutton.com/img/jimi.jpg");

          /* Set a specific height */
          height: 50%;
          min-height: 500px;

          /* Position and center the image to scale nicely on all screens */
          background-position: center;
          background-repeat: no-repeat;
          background-size: cover;
          position: relative;
        }

        /* Place text in the middle of the image */
        .hero-text {
          text-align: center;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
        }
        
    

Conclusion

A few lines of CSS (and an image) is all you need for a hero image css