Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Centred, non-repeating hero image */ .hero { background-image: url("/img/hero.webp"); background-repeat: no-repeat; background-position: center center; min-height: 60vh; } /* Repeating pattern tile */ .pattern { background-image: url("/img/dot.png"); background-repeat: repeat; background-position: 0 0; } /* Logo pinned to bottom-right with offset */ .watermark { background-image: url("/img/logo.svg"); background-repeat: no-repeat; background-position: right 16px bottom 16px; } /* Horizontally repeating divider */ .divider { background-image: url("/img/wave.svg"); background-repeat: repeat-x; background-position: bottom center; height: 60px; }
Result
Open