JSFiddle - React, Tailwind, and code Playground

by omarjuvera

HTML

<span>How to make a <br /> RESPONSIVE BACKGROUND IMAGE</span>

CSS

body {
    background-image: url(https://static.pexels.com/photos/225983/pexels-photo-225983.jpeg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    
    width: 100vw;
    height: 100vh;
}


/* The lines below are just for good looks and NOT needed for a RESPONSIVE BACKGROUND!!! */
span { color: #4CFF00; font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 200%; margin: 0; padding; 0; position: absolute; top: 50%; left: 30vw;}