Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Full-bleed hero — always covers the container */ .hero { background-image: url("/img/hero.webp"); background-size: cover; background-position: center; background-repeat: no-repeat; min-height: 100vh; } /* Logo shown in full, no crop */ .logo-bg { background-image: url("/img/logo.svg"); background-size: contain; background-position: center; background-repeat: no-repeat; width: 200px; height: 80px; } /* Explicit size — HiDPI icon at half size */ .icon-bg { background-image: url("/img/icon@2x.png"); background-size: 24px 24px; background-repeat: no-repeat; width: 24px; height: 24px; } /* Percentage width — fluid pattern */ .pattern { background-image: url("/img/dot.svg"); background-size: 5% auto; }
Result
Open