Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
/* Full shorthand for a cover hero */ .hero { background: url("/img/overlay.png") center / cover no-repeat, #1a237e; /* colour on the last layer */ } /* Multiple layers, shorthand per layer */ .card { background: url("/img/logo.svg") right 16px bottom 16px / 60px no-repeat, linear-gradient(to bottom, #fff 0%, #f5f5f5 100%); } /* Caution: shorthand resets omitted sub-props */ .reset-demo { background-attachment: fixed; /* set longhand first */ background: url("/img/photo.jpg"); /* overwrites attachment! */ } /* Correct: keep fixed attachment in the shorthand */ .parallax { background: url("/img/photo.jpg") center / cover no-repeat fixed; }
Result
Open