{"id":792,"date":"2026-03-22T02:34:44","date_gmt":"2026-03-22T02:34:44","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=792"},"modified":"2026-03-22T02:34:44","modified_gmt":"2026-03-22T02:34:44","slug":"a-guide-to-css-background-properties","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/a-guide-to-css-background-properties\/","title":{"rendered":"A Guide to CSS Background Properties"},"content":{"rendered":"<style>  :root {\n    --ink: #0d1b2a;\n    --paper: #ffffff;\n    --cream: #e8f0fb;\n    --rust: #1a56db;\n    --gold: #3b82f6;\n    --slate: #1e3a5f;\n    --mid: #5a7a9e;\n    --code-bg: #0d1b2a;\n    --code-fg: #cfe2ff;\n    --accent: #1a56db;\n  }\n  \/* \u2500\u2500 LAYOUT \u2500\u2500 *\/\n  .article {\n    \/*max-width: 1000px;\n    margin: 0 auto;*\/\n  }\n  \/* \u2500\u2500 SECTION \u2500\u2500 *\/\n  .prop-section {\n    margin-bottom: 1rem;\n    opacity: 0;\n  }\n  .prop-section.visible {\n    opacity: 1;\n    transform: translateY(0);\n  }\n  .prop-section h2 {\n    font-family: 'Playfair Display', serif;\n    font-size: clamp(2rem, 4vw, 3rem);\n    font-weight: 700;\n    line-height: 1.1;\n    margin-bottom: 0.4rem;\n  }\n  .prop-syntax {\n    font-family: 'DM Mono', monospace;\n    font-size: 0.8rem;\n    color: var(--mid);\n    margin-bottom: 1.5rem;\n    padding-bottom: 1.5rem;\n    border-bottom: 1px solid var(--cream);\n  }\n  .prop-syntax span { color: var(--rust); }\n  p { margin-bottom: 1.2rem; }\n  \/* \u2500\u2500 CODE BLOCK \u2500\u2500 *\/\n  .code-block {\n    background: var(--code-bg);\n    color: var(--code-fg);\n    font-family: 'DM Mono', monospace;\n    font-size: 0.82rem;\n    line-height: 1.7;\n    padding: 1.5rem 2rem;\n    border-radius: 2px;\n    margin: 1.5rem 0;\n    overflow-x: auto;\n    position: relative;\n    border-left: 3px solid var(--rust);\n  }\n  .code-block .prop { color: #7ec8e3; }\n  .code-block .val { color: #f4c97a; }\n  .code-block .comment { color: #6b6454; font-style: italic; }\n  .code-block .str { color: #b8e09c; }\n  \/* \u2500\u2500 DEMO BOX \u2500\u2500 *\/\n  .demo-wrapper {\n    margin: 2rem 0;\n    border: 1px solid var(--cream);\n  }\n  .demo-header {\n    background: var(--cream);\n    padding: 0.6rem 1.2rem;\n    font-family: 'DM Mono', monospace;\n    font-size: 0.85rem;\n    letter-spacing: 0.15em;\n    color: var(--code-bg);\n    text-transform: uppercase;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n  }\n  .demo-live {\n    height: 240px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .demo-label {\n    background: rgba(0,0,0,0.6);\n    color: #fff;\n    font-family: 'DM Mono', monospace;\n    font-size: 0.72rem;\n    padding: 0.3rem 0.8rem;\n    border-radius: 1px;\n    pointer-events: none;\n  }\n  \/* \u2500\u2500 CONTROLS \u2500\u2500 *\/\n  .controls {\n    background: var(--cream);\n    padding: 1.2rem 1.5rem;\n    display: flex;\n    flex-wrap: wrap;\n    gap: 1rem;\n    align-items: center;\n    border-top: 1px solid #ddd5c0;\n  }\n  .control-group {\n    display: flex;\n    align-items: center;\n    gap: 0.6rem;\n    font-family: 'DM Mono', monospace;\n    font-size: 0.75rem;\n    color: var(--slate);\n  }\n  .control-group label { white-space: nowrap; }\n  select, input[type=range], input[type=color] {\n    font-family: 'DM Mono', monospace;\n    font-size: 0.75rem;\n    background: white;\n    border: 1px solid #ccc2ac;\n    padding: 0.3rem 0.5rem;\n    color: var(--ink);\n    cursor: pointer;\n  }\n  input[type=range] { padding: 0; width: 120px; accent-color: var(--rust); }\n  input[type=color] { width: 36px; height: 28px; padding: 2px; }\n  .btn-blog-group {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 0.4rem;\n  }\n  .btn-blog {\n    font-family: 'DM Mono', monospace;\n    font-size: 0.72rem;\n    padding: 0.3rem 0.75rem;\n    border: 1px solid #ccc2ac;\n    background: white;\n    cursor: pointer;\n    transition: all 0.15s;\n    color: var(--slate);\n  }\n  .btn-blog:hover, .btn-blog.active {\n    background: var(--rust);\n    border-color: var(--rust);\n    color: white;\n  }\n  \/* \u2500\u2500 VALUE TAG \u2500\u2500 *\/\n  .val-display {\n    font-family: 'DM Mono', monospace;\n    font-size: 0.72rem;\n    background: var(--ink);\n    color: var(--gold);\n    padding: 0.15rem 0.5rem;\n    border-radius: 2px;\n    min-width: 60px;\n    text-align: center;\n  }\n  \/* \u2500\u2500 DIVIDER \u2500\u2500 *\/\n  .divider {\n    height: 1px;\n    background: linear-gradient(to right, transparent, var(--gold), transparent);\n    margin: 2rem 0;\n    opacity: 0.4;\n  }\n  \/* \u2500\u2500 HIGHLIGHT BOX \u2500\u2500 *\/\n  .callout {\n    border-left: 3px solid var(--gold);\n    background: #f9f4e8;\n    padding: 1.2rem 1.5rem;\n    margin: 1.5rem 0;\n    font-size: 0.9rem;\n    color: var(--slate);\n  }\n  .callout strong { color: var(--ink); font-weight: 500; }\n  \/* \u2500\u2500 DEMO SPECIFIC STYLES \u2500\u2500 *\/\n  \/* background-color demo *\/\n  #demo-color .demo-live { transition: background 0.3s; }\n  \/* background-image demo *\/\n  #demo-image .demo-live {\n    background-image: url(\"data:image\/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c1440e' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'\/%3E%3C\/g%3E%3C\/g%3E%3C\/svg%3E\");\n    background-color: var(--paper);\n  }\n  .values-table {\n    width: 100%;\n    border-collapse: collapse;\n    font-size: 0.88rem;\n    margin: 1.5rem 0;\n  }\n  .values-table th {\n    text-align: left;\n    font-family: 'DM Mono', monospace;\n    font-size: 0.72rem;\n    letter-spacing: 0.15em;\n    text-transform: uppercase;\n    color: var(--mid);\n    padding: 0.6rem 1rem;\n    border-bottom: 2px solid var(--cream);\n  }\n  .values-table td {\n    padding: 0.6rem 1rem;\n    border-bottom: 1px solid var(--cream);\n    color: var(--slate);\n  }\n  .values-table td:first-child {\n    font-family: 'DM Mono', monospace;\n    font-size: 0.78rem;\n    color: var(--rust);\n  }\n  .values-table a {\n    color: var(--rust);\n    text-decoration: none;\n    font-family: 'DM Mono', monospace;\n    font-size: 0.78rem;\n  }\n  .values-table a:hover {\n    text-decoration: underline;\n    text-underline-offset: 3px;\n  }<\/style>\n<article class=\"article\">\n<section class=\"prop-section intro-section\" id=\"sec-intro\">\n<p>When most developers think of CSS backgrounds, they reach for <code>background-color<\/code> or slap a <code>background-image<\/code> on a hero section and call it done. But the CSS background module is quietly one of the richest areas of the entire language &#8211; a suite of nine carefully designed properties that, when combined, can produce visual effects that would otherwise require image editors, extra DOM elements, or heavy JavaScript.<\/p>\n<p>A single HTML element can carry multiple layered background images, each with its own size, position, repeat behaviour, and blend mode &#8211; all stacked on top of a base colour, all declared in just a few lines of CSS. That checkerboard pattern you once built with a PNG? Pure CSS. That duotone photo effect? A couple of gradients and a blend mode. That gradient text? One property you might not even know exists.<\/p>\n<div class=\"callout\">\n      <strong>What you&#8217;ll learn:<\/strong> This guide walks through all 9 background sub-properties &#8211; what each one does, the values it accepts, where it fits in the layering model, and how they interact with each other. Every section comes with a live demo you can play with directly in the browser.\n    <\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 01 background-color --><\/p>\n<section class=\"prop-section\" id=\"sec-color\">\n<h2>background-color<\/h2>\n<p class=\"prop-syntax\">background-color: <span>&lt;color&gt;<\/span> | transparent | inherit<\/p>\n<p>The most fundamental background property, background-color defines the base layer of an element\u2019s background by applying a solid colour. This colour fills the entire background painting area &#8211; covering the content and padding &#8211; but does not extend into the border or margin.<\/p>\n<p>It acts as a reliable fallback and foundation, always rendering beneath any background images. This means that if an image fails to load, contains transparency, or does not fully cover the element, the background colour will still be visible.<\/p>\n<p>The property accepts a wide range of colour formats, including named colours, HEX, RGB, RGBA, HSL, and HSLA, giving you flexibility in how you define and manage colour across your design. Because of its simplicity and broad browser support, it\u2019s commonly used not only for styling but also for ensuring accessibility and maintaining visual consistency throughout a layout.<\/p>\n<div class=\"code-block\"><span class=\"comment\">\/* All valid values *\/<\/span><br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">tomato<\/span>;<br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">#c1440e<\/span>;<br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">rgb(193 68 14 \/ 0.8)<\/span>;<br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">hsl(22deg 86% 41%)<\/span>;<br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">oklch(55% 0.2 35)<\/span>;<br \/>\n<span class=\"prop\">background-color<\/span>: <span class=\"val\">transparent<\/span>;<\/div>\n<div class=\"demo-wrapper\" id=\"demo-color\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-color<\/span><\/div>\n<div class=\"demo-live\" id=\"color-box\" style=\"background-color:#1e3a5f;\">\n        <span class=\"demo-label\" id=\"color-label\">background-color: #1e3a5f<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"control-group\">\n          <label>Color:<\/label><br \/>\n          <input type=\"color\" id=\"color-picker\" value=\"#1e3a5f\">\n        <\/div>\n<div class=\"control-group\">\n          <label>Opacity:<\/label><br \/>\n          <input type=\"range\" id=\"color-opacity\" min=\"0\" max=\"100\" value=\"100\"><br \/>\n          <span class=\"val-display\" id=\"opacity-val\">100%<\/span>\n        <\/div>\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog\" onclick=\"setColor('#1a56db')\">Blue<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setColor('#0d1b2a')\">Navy<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setColor('#3b82f6')\">Sky<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setColor('#bfdbfe')\">Pale<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setColor('transparent')\">Transparent<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"callout\"><strong>Browser Support:<\/strong> Universal. background-color has been supported since CSS1.<\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 02 background-image --><\/p>\n<section class=\"prop-section\" id=\"sec-image\">\n<h2>background-image<\/h2>\n<p class=\"prop-syntax\">background-image: none | <span>&lt;image&gt;<\/span> [, <span>&lt;image&gt;<\/span>]*<\/p>\n<p>The background-image property allows you to place one or more images behind an element, forming the visual layers of its background. These can be traditional image files (such as PNG, JPG, or SVG) or generated images like CSS gradients.<\/p>\n<p>One of its most powerful features is support for multiple backgrounds. You can define several images in a comma-separated list, and they will be stacked in layers &#8211; with the first image listed appearing on top, and each subsequent image layered beneath it. This makes it possible to create complex visual effects without additional markup.<\/p>\n<p>At the base of this stack sits the background-color, which always renders underneath all background images. If any images include transparency, fail to load, or don\u2019t fully cover the element, the background colour will show through.<\/p>\n<p>Each background layer can be controlled independently using related properties like positioning, sizing, and repetition, allowing for precise and flexible design control.<\/p>\n<p>The <code>&lt;image&gt;<\/code> type includes <code>url()<\/code>, <code>linear-gradient()<\/code>, <code>radial-gradient()<\/code>, <code>conic-gradient()<\/code>, and <code>image-set()<\/code>.<\/p>\n<div class=\"code-block\"><span class=\"comment\">\/* Single image *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>: <span class=\"val\">url(<span class=\"str\">&#8216;texture.png&#8217;<\/span>)<\/span>;<br \/>\n<span class=\"comment\">\/* Gradient *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>: <span class=\"val\">linear-gradient(135deg, #c1440e, #f4c97a)<\/span>;<br \/>\n<span class=\"comment\">\/* Multiple layers (first = on top) *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>:<br \/>\n  <span class=\"val\">url(<span class=\"str\">&#8216;dots.png&#8217;<\/span>)<\/span>,<br \/>\n  <span class=\"val\">radial-gradient(circle at 50% 50%, #fff, #eee)<\/span>;<\/div>\n<div class=\"demo-wrapper\" id=\"demo-image\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-image<\/span><\/div>\n<div class=\"demo-live\" id=\"image-box\">\n        <span class=\"demo-label\" id=\"image-label\">linear-gradient<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n<button class=\"btn-blog\">Linear Gradient<\/button><br \/>\n<button class=\"btn-blog\">Radial Gradient<\/button><br \/>\n<button class=\"btn-blog\">Conic Gradient<\/button><br \/>\n<button class=\"btn-blog active\">SVG Pattern<\/button><br \/>\n<button class=\"btn-blog\">Multi-layer<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"callout\"><strong>Note:<\/strong> Gradients are treated as images in CSS. You can layer gradients with each other or with <code>url()<\/code> images &#8211; they&#8217;re all part of the same property.<\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 03 background-repeat --><br \/>\n<div class=\"text-center mb-20 mt-20\">\n<script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<!-- CSS Responsive -->\n<ins class=\"adsbygoogle\"\n     style=\"display:block\"\n     data-ad-client=\"ca-pub-1356719463849900\"\n     data-ad-slot=\"5275015068\"\n     data-ad-format=\"horizontal\"\n     data-full-width-responsive=\"true\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n<\/div>\n<div class=\"adblock-message bg-main-50 rounded p-10 mb-20\">  \n\t<div class=\"d-flex align-items-center justify-content-between\">\n\t  <span class=\"text-gray-400\">If this site has been useful, we\u2019d love your support! Consider buying us a coffee to keep things going strong!<\/span>\n\t  <div class=\"buymeacoffee\">\n\t\t<a target=\"_blank\" href=\"https:\/\/buymeacoffee.com\/rpjs\"><img decoding=\"async\" width=\"180\" src=\"\/assets\/images\/coffee.png\"><\/a>\n\t  <\/div>\n\t<\/div>\n<\/div><\/p>\n<section class=\"prop-section\" id=\"sec-repeat\">\n<h2>background-repeat<\/h2>\n<p class=\"prop-syntax\">background-repeat: <span>repeat | no-repeat | repeat-x | repeat-y | space | round<\/span><\/p>\n<p>The background-repeat property controls how a background image is tiled within an element\u2019s background positioning area. By default, images repeat in both the horizontal and vertical directions (<code>repeat<\/code>), ensuring the entire container is filled, regardless of the image\u2019s original size.<\/p>\n<p>You can fine-tune this behaviour with several keyword values. For example, <code>no-repeat<\/code> displays the image only once, while <code>repeat-x<\/code> and <code>repeat-y<\/code> limit repetition to a single axis. More advanced options like <code>space<\/code> and <code>round<\/code> adjust how images are distributed &#8211; either adding space between tiles or scaling them slightly so they fit perfectly without clipping.<\/p>\n<p>This property becomes especially useful when working with patterns, textures, or small decorative graphics. Combined with other background properties, it gives you precise control over how images behave and scale across different element sizes and layouts.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-repeat<\/span>: <span class=\"val\">repeat<\/span>;       <span class=\"comment\">\/* default &#8211; tile both axes *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">no-repeat<\/span>;    <span class=\"comment\">\/* show image once only *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">repeat-x<\/span>;     <span class=\"comment\">\/* tile horizontally *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">repeat-y<\/span>;     <span class=\"comment\">\/* tile vertically *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">space<\/span>;        <span class=\"comment\">\/* tile with spacing, no crop *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">round<\/span>;        <span class=\"comment\">\/* scale tiles to fit whole *\/<\/span><br \/>\n<span class=\"comment\">\/* Two-value syntax (x y) *\/<\/span><br \/>\n<span class=\"prop\">background-repeat<\/span>: <span class=\"val\">repeat space<\/span>;<\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-repeat<\/span><\/div>\n<div class=\"demo-live\" id=\"repeat-box\" style=\"background-image: url('data:image\/svg+xml,%3Csvg width=%2240%22 height=%2240%22 viewBox=%220 0 40 40%22 xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%2212%22 fill=%22none%22 stroke=%221a56db%22 stroke-width=%222%22\/%3E%3Ccircle cx=%2220%22 cy=%2220%22 r=%223%22 fill=%221a56db%22\/%3E%3C\/svg%3E'); background-color: var(--paper); background-repeat: repeat;\">\n        <span class=\"demo-label\" id=\"repeat-label\">repeat<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog active\" onclick=\"setRepeat('repeat')\">repeat<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setRepeat('no-repeat')\">no-repeat<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setRepeat('repeat-x')\">repeat-x<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setRepeat('repeat-y')\">repeat-y<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setRepeat('space')\">space<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setRepeat('round')\">round<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 04 background-position --><\/p>\n<section class=\"prop-section\" id=\"sec-position\">\n<h2>background-position<\/h2>\n<p class=\"prop-syntax\">background-position: <span>&lt;position&gt;<\/span><\/p>\n<p>The background-position property determines the starting position of a background image within its background positioning area. In other words, it defines where the image is anchored before any repetition or sizing is applied.<\/p>\n<p>It\u2019s a highly flexible property, accepting keyword values like <code>top<\/code>, <code>center<\/code>, <code>bottom<\/code>, <code>left<\/code>, and <code>right<\/code>, as well as precise percentage and length values (such as <code>%<\/code>, <code>px<\/code>, <code>em<\/code>, etc.). You can also combine horizontal and vertical values-for example, <code>center top<\/code> or <code>20px 50%<\/code>-to fine-tune placement along both axes.<\/p>\n<p>Percentages are calculated relative to the element\u2019s dimensions, making them especially useful for responsive designs, while length values provide pixel-perfect control. This property is particularly important when working with non-repeating images (<code>no-repeat<\/code>) or when you want to focus on a specific part of an image, such as centering a hero background or aligning a pattern exactly where you need it.<\/p>\n<p>A unique quirk of percentage values: <code>50% 50%<\/code> centers the image&#8217;s own center point over the element&#8217;s center, not its top-left corner. This makes centering intuitive.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-position<\/span>: <span class=\"val\">center<\/span>;<br \/>\n<span class=\"prop\">background-position<\/span>: <span class=\"val\">top right<\/span>;<br \/>\n<span class=\"prop\">background-position<\/span>: <span class=\"val\">50% 50%<\/span>;<br \/>\n<span class=\"prop\">background-position<\/span>: <span class=\"val\">20px 40px<\/span>;<br \/>\n<span class=\"comment\">\/* 4-value offset syntax (CSS4) *\/<\/span><br \/>\n<span class=\"prop\">background-position<\/span>: <span class=\"val\">right 20px bottom 30px<\/span>;<\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-position &#8211; click to position<\/span><\/div>\n<div class=\"demo-live\" id=\"position-box\"\n           style=\"background-image: url('data:image\/svg+xml,%3Csvg width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22 xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%3E%3Crect x=%2210%22 y=%2210%22 width=%2260%22 height=%2260%22 fill=%22none%22 stroke=%221a56db%22 stroke-width=%222%22\/%3E%3Ctext x=%2240%22 y=%2248%22 text-anchor=%22middle%22 font-size=%2224%22 fill=%221a56db%22 font-family=%22serif%22%3E\u2726%3C\/text%3E%3C\/svg%3E'); background-color: var(--cream); background-repeat: no-repeat; background-size: 80px 80px; background-position: center; cursor: crosshair;\"\n           onclick=\"setPositionClick(event)\"><br \/>\n        <span class=\"demo-label\" id=\"position-label\">center<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog\" onclick=\"setPosition('top left')\">top left<\/button><br \/>\n          <button class=\"btn-blog active\" onclick=\"setPosition('center')\">center<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setPosition('top right')\">top right<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setPosition('bottom left')\">bottom left<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setPosition('bottom right')\">bottom right<\/button>\n        <\/div>\n<div class=\"control-group\" style=\"margin-left:auto; font-size:0.72rem; color:var(--mid)\">\n          \u2190 click anywhere in the box\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 05 background-size --><\/p>\n<section class=\"prop-section\" id=\"sec-size\">\n<h2>background-size<\/h2>\n<p class=\"prop-syntax\">background-size: <span>auto | cover | contain | &lt;length&gt; | &lt;percentage&gt;<\/span><\/p>\n<p>The background-size property specifies the size of one or more background images, giving you control over how they scale within an element. By default, images are displayed at their original (intrinsic) size, but this property allows you to override that behaviour.<\/p>\n<p>You can define exact dimensions using lengths (<code>px<\/code>, <code>em<\/code>, etc.) or percentages, or provide one value (width) and let the height scale proportionally. This makes it easy to maintain aspect ratios or stretch images to fit specific layouts.<\/p>\n<p>Two special keyword values are particularly important for responsive design:<\/p>\n<ul>\n<li><code>cover<\/code> scales the image to completely cover the entire background area, potentially cropping parts of the image to maintain its aspect ratio.<\/li>\n<li><code>contain<\/code> scales the image so the entire image fits within the element, ensuring nothing is cropped, though it may leave empty space.<\/li>\n<\/ul>\n<p>When using multiple background images, you can assign different sizes to each layer by separating values with commas. Combined with properties like positioning and repetition, <code>background-size<\/code> plays a key role in creating flexible, visually consistent designs across different screen sizes.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-size<\/span>: <span class=\"val\">auto<\/span>;       <span class=\"comment\">\/* natural size (default) *\/<\/span><br \/>\n<span class=\"prop\">background-size<\/span>: <span class=\"val\">cover<\/span>;      <span class=\"comment\">\/* fill, may crop *\/<\/span><br \/>\n<span class=\"prop\">background-size<\/span>: <span class=\"val\">contain<\/span>;    <span class=\"comment\">\/* fit inside, may letterbox *\/<\/span><br \/>\n<span class=\"prop\">background-size<\/span>: <span class=\"val\">200px 100px<\/span>; <span class=\"comment\">\/* exact dimensions *\/<\/span><br \/>\n<span class=\"prop\">background-size<\/span>: <span class=\"val\">50% auto<\/span>;    <span class=\"comment\">\/* half width, auto height *\/<\/span><\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-size<\/span><\/div>\n<div class=\"demo-live\" id=\"size-box\"\n        style=\"background-image: url('data:image\/svg+xml,%3Csvg xmlns=%22http:\/\/www.w3.org\/2000\/svg%22 width=%22200%22 height=%22120%22%3E%3Crect width=%22200%22 height=%22120%22 fill=%221a56db%22 rx=%224%22\/%3E%3Ctext x=%22100%22 y=%2270%22 text-anchor=%22middle%22 font-size=%2232%22 fill=%22white%22 font-family=%22Georgia%2C serif%22%3ECSS%3C\/text%3E%3C\/svg%3E'); background-color: var(--cream); background-repeat: no-repeat; background-position: center; background-size: cover;\"><br \/>\n        <span class=\"demo-label\" id=\"size-label\">cover<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog\" onclick=\"setSize('auto')\">auto<\/button><br \/>\n          <button class=\"btn-blog active\" onclick=\"setSize('cover')\">cover<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setSize('contain')\">contain<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setSize('50px 50px')\">50px \u00d7 50px<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setSize('100% 100%')\">100% \u00d7 100%<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setSize('30% auto')\">30% auto<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"callout\"><strong>Pro tip:<\/strong> For hero images, <code>background-size: cover; background-position: center;<\/code> is the go-to combination. It ensures your image always fills the container and stays centered regardless of viewport size.<\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 06 background-attachment --><\/p>\n<section class=\"prop-section\" id=\"sec-attachment\">\n<h2>background-attachment<\/h2>\n<p class=\"prop-syntax\">background-attachment: <span>scroll | fixed | local<\/span><\/p>\n<p>The background-attachment property determines how a background image behaves when the page is scrolled. It controls whether the image moves along with the content or remains fixed relative to the viewport.<\/p>\n<p>By default, the value is <code>scroll<\/code>, which means the background image scrolls normally with the element. Setting it to <code>fixed<\/code> anchors the image to the viewport instead, so it stays in place while the content moves over it &#8211; a technique commonly used to create the classic parallax-style effect. Another option, <code>local<\/code>, ties the background to the element\u2019s content, causing it to scroll along with the element\u2019s internal scroll area rather than the page itself.<\/p>\n<p>This property is especially effective for creating depth and visual interest in layouts, but it should be used thoughtfully, as fixed backgrounds can have performance implications on some devices, particularly on mobile.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-attachment<\/span>: <span class=\"val\">scroll<\/span>; <span class=\"comment\">\/* default *\/<\/span><br \/>\n<span class=\"prop\">background-attachment<\/span>: <span class=\"val\">fixed<\/span>;  <span class=\"comment\">\/* parallax effect *\/<\/span><br \/>\n<span class=\"prop\">background-attachment<\/span>: <span class=\"val\">local<\/span>;  <span class=\"comment\">\/* scrolls with content *\/<\/span><\/div>\n<table class=\"values-table\">\n<tr>\n<th>Value<\/th>\n<th>Relative to<\/th>\n<th>Moves when<\/th>\n<\/tr>\n<tr>\n<td>scroll<\/td>\n<td>Element<\/td>\n<td>Page scrolls<\/td>\n<\/tr>\n<tr>\n<td>fixed<\/td>\n<td>Viewport<\/td>\n<td>Never (parallax!)<\/td>\n<\/tr>\n<tr>\n<td>local<\/td>\n<td>Element content<\/td>\n<td>Element&#8217;s own content scrolls<\/td>\n<\/tr>\n<\/table>\n<div class=\"callout\"><strong>Performance note:<\/strong> <code>background-attachment: fixed<\/code> disables GPU compositing for that element in many browsers, potentially causing repaint on every scroll. Use CSS custom properties or JavaScript-based parallax for smooth 60fps effects.<\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 07 background-origin --><\/p>\n<section class=\"prop-section\" id=\"sec-origin\">\n<h2>background-origin<\/h2>\n<p class=\"prop-syntax\">background-origin: <span>border-box | padding-box | content-box<\/span><\/p>\n<p>The background-origin property defines where the background positioning area begins &#8211; essentially setting the reference box that background-position uses to calculate its coordinates.<\/p>\n<p>It determines which part of the element the background is positioned relative to, with three possible values:<\/p>\n<ul>\n<li><code>padding-box<\/code> (default): positions the background relative to the padding area<\/li>\n<li><code>border-box<\/code>: extends positioning to include the border<\/li>\n<li><code>content-box<\/code>: restricts positioning to just the content area<\/li>\n<\/ul>\n<p>This becomes particularly important when working with borders or padding, as it directly affects how background images are aligned within the element. While it doesn\u2019t control how far the background is painted (that\u2019s handled by a related property), it plays a key role in ensuring precise placement-especially in more complex layouts or when layering multiple backgrounds.<\/p>\n<p>This is separate from where the background is <em>painted<\/em> (that&#8217;s <code>background-clip<\/code>). You can position relative to the content box while still painting the full padding area.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-origin<\/span>: <span class=\"val\">padding-box<\/span>; <span class=\"comment\">\/* default *\/<\/span><br \/>\n<span class=\"prop\">background-origin<\/span>: <span class=\"val\">border-box<\/span>;  <span class=\"comment\">\/* starts at border edge *\/<\/span><br \/>\n<span class=\"prop\">background-origin<\/span>: <span class=\"val\">content-box<\/span>; <span class=\"comment\">\/* starts at content edge *\/<\/span><\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-origin (with no-repeat + top left position)<\/span><\/div>\n<div class=\"demo-live\" id=\"origin-box\"\n           style=\"background-image: url('data:image\/svg+xml,%3Csvg width=%2260%22 height=%2260%22 viewBox=%220 0 60 60%22 xmlns=%22http:\/\/www.w3.org\/2000\/svg%22%3E%3Ccircle cx=%2230%22 cy=%2230%22 r=%2228%22 fill=%221a56db%22\/%3E%3Ctext x=%2230%22 y=%2238%22 text-anchor=%22middle%22 font-size=%2228%22 fill=%22white%22 font-family=%22serif%22%3E\u2726%3C\/text%3E%3C\/svg%3E'); background-color: var(--cream); background-repeat: no-repeat; background-position: top left; background-origin: padding-box; padding: 40px; border: 10px dashed #1a56db66;\"><br \/>\n        <span class=\"demo-label\" id=\"origin-label\">padding-box<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog\" onclick=\"setOrigin('border-box')\">border-box<\/button><br \/>\n          <button class=\"btn-blog active\" onclick=\"setOrigin('padding-box')\">padding-box<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setOrigin('content-box')\">content-box<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 08 background-clip --><\/p>\n<section class=\"prop-section\" id=\"sec-clip\">\n<h2>background-clip<\/h2>\n<p class=\"prop-syntax\">background-clip: <span>border-box | padding-box | content-box | text<\/span><\/p>\n<p>The background-clip property specifies where a background is painted &#8211; in other words, how far it visually extends within an element.<\/p>\n<p>By default, the value is <code>border-box<\/code>, which means the background is drawn all the way to the outer edge of the border, appearing underneath it. You can restrict this behaviour using other values: <code>padding-box<\/code> clips the background to the padding area, preventing it from appearing beneath the border, while <code>content-box<\/code> confines it strictly to the content area, stopping at the inner edge of the padding.<\/p>\n<p>This property is especially useful when working with borders that have transparency or when you want tighter visual control over how backgrounds interact with spacing inside an element. It pairs closely with related background properties to fine-tune exactly where and how your background is displayed.<\/p>\n<p>The <code>text<\/code> value is the creative powerhouse here: it clips the background to the foreground text, enabling gradient or image fills on typography when combined with <code>-webkit-text-fill-color: transparent<\/code>.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-clip<\/span>: <span class=\"val\">border-box<\/span>;  <span class=\"comment\">\/* default *\/<\/span><br \/>\n<span class=\"prop\">background-clip<\/span>: <span class=\"val\">padding-box<\/span>; <span class=\"comment\">\/* stops at border *\/<\/span><br \/>\n<span class=\"prop\">background-clip<\/span>: <span class=\"val\">content-box<\/span>; <span class=\"comment\">\/* stops at padding *\/<\/span><br \/>\n<span class=\"comment\">\/* Gradient text technique *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>: <span class=\"val\">linear-gradient(135deg, #1a56db, #3b82f6)<\/span>;<br \/>\n<span class=\"prop\">-webkit-background-clip<\/span>: <span class=\"val\">text<\/span>;<br \/>\n<span class=\"prop\">background-clip<\/span>: <span class=\"val\">text<\/span>;<br \/>\n<span class=\"prop\">-webkit-text-fill-color<\/span>: <span class=\"val\">transparent<\/span>;<br \/>\n<span class=\"prop\">color<\/span>: <span class=\"val\">transparent<\/span>;<\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-clip<\/span><\/div>\n<div class=\"demo-live\" id=\"clip-box\"\n           style=\"background: linear-gradient(135deg, #1a56db 0%, #3b82f6 50%, #0d1b2a 100%); padding: 30px; border: 15px dashed rgba(255,255,255,0.4);\"><\/p>\n<div id=\"clip-inner\" style=\"font-family: 'Playfair Display', serif; font-size: 3.5rem; font-weight: 900; -webkit-background-clip: initial; background-clip: initial; -webkit-text-fill-color: initial; color: white; background: none; padding: 0 1rem;\">\n          Deep Dive\n        <\/div>\n<\/p><\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog active\" onclick=\"setClip('border-box')\">border-box<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setClip('padding-box')\">padding-box<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setClip('content-box')\">content-box<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setClip('text')\">text \u2728<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 09 background-blend-mode --><\/p>\n<section class=\"prop-section\" id=\"sec-blend\">\n<h2>background-blend-mode<\/h2>\n<p class=\"prop-syntax\">background-blend-mode: <span>&lt;blend-mode&gt;<\/span><\/p>\n<p>The background-blend-mode property defines how a background layer blends with the layers beneath it &#8211; including other background images and the background-color. It introduces Photoshop-style blending effects directly into CSS, allowing for more dynamic and visually rich designs without needing image editing software.<\/p>\n<p>You can apply a variety of blend modes such as <code>multiply<\/code>, <code>screen<\/code>, <code>overlay<\/code>, <code>darken<\/code>, and <code>lighten<\/code>, each producing different interactions between colours and tones. These modes control how pixel values are combined, enabling effects like darkening images, enhancing contrast, or creating subtle overlays.<\/p>\n<p>When working with multiple background layers, you can specify a blend mode for each one by providing a comma-separated list of values. This makes it possible to stack gradients, textures, and images together and control exactly how they interact.<\/p>\n<p>While powerful, <code>background-blend-mode<\/code> should be used thoughtfully, as results can vary depending on the colours and images involved. It\u2019s particularly effective for creative effects like tinted images, soft overlays, and complex layered backgrounds-all achieved purely with CSS.<\/p>\n<p>There are 16 blend modes. The most widely used are <code>multiply<\/code>, <code>screen<\/code>, <code>overlay<\/code>, <code>color-burn<\/code>, and <code>luminosity<\/code>.<\/p>\n<div class=\"code-block\"><span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">normal<\/span>;<br \/>\n<span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">multiply<\/span>;<br \/>\n<span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">screen<\/span>;<br \/>\n<span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">overlay<\/span>;<br \/>\n<span class=\"comment\">\/* CSS-only &#8211; two gradients + a base colour *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>:<br \/>\n  <span class=\"val\">linear-gradient(135deg, rgba(255,0,128,0.9), rgba(0,100,255,0.9))<\/span>,<br \/>\n  <span class=\"val\">radial-gradient(circle at 30% 60%, gold, crimson, navy)<\/span>;<br \/>\n<span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">overlay<\/span>;<\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>background-blend-mode<\/span><\/div>\n<div class=\"demo-live\" id=\"blend-box\"\n           style=\"background-image: linear-gradient(135deg, rgba(255,0,128,0.9), rgba(0,100,255,0.9)), radial-gradient(circle at 30% 60%, gold, crimson, navy); background-blend-mode: normal;\"><br \/>\n        <span class=\"demo-label\" id=\"blend-label\">normal<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog active\" onclick=\"setBlend('normal')\">normal<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('multiply')\">multiply<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('screen')\">screen<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('overlay')\">overlay<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('hard-light')\">hard-light<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('luminosity')\">luminosity<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('color')\">color<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setBlend('difference')\">difference<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 10 background shorthand --><\/p>\n<section class=\"prop-section\" id=\"sec-shorthand\">\n<h2>background shorthand<\/h2>\n<p class=\"prop-syntax\">background: <span>[layer,]* final-layer<\/span><\/p>\n<p>Rather than writing out each sub-property individually, you can declare everything in one line using the <code>background<\/code> shorthand. It accepts all of the properties covered in this guide &#8211; except <code>background-blend-mode<\/code>, which must always be set separately.<\/p>\n<p>The order of values within each layer follows a specific pattern. The one rule worth memorising: <code>background-position<\/code> and <code>background-size<\/code> must always appear together, separated by a forward slash &#8211; <code>position \/ size<\/code>. Everything else can be written in any order, though sticking to the conventional order above keeps your code readable.<\/p>\n<div class=\"code-block\"><span class=\"comment\">\/* Single layer &#8211; hero image *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>: <span class=\"val\">url(<span class=\"str\">&#8216;hero.jpg&#8217;<\/span>) center \/ cover no-repeat<\/span>;<br \/>\n<span class=\"comment\">\/* With a fallback colour *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>: <span class=\"val\">url(<span class=\"str\">&#8216;hero.jpg&#8217;<\/span>) center \/ cover no-repeat #0d1b2a<\/span>;<br \/>\n<span class=\"comment\">\/* Gradient + colour in one *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>: <span class=\"val\">linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6)) no-repeat bottom \/ 100% 50%, #1a56db<\/span>;<br \/>\n<span class=\"comment\">\/* Multiple layers &#8211; comma separated *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>:<br \/>\n  <span class=\"val\">url(<span class=\"str\">&#8216;stars.png&#8217;<\/span>) center \/ 200px repeat<\/span>,<br \/>\n  <span class=\"val\">url(<span class=\"str\">&#8216;moon.png&#8217;<\/span>) 80% 20% \/ 80px no-repeat<\/span>,<br \/>\n  <span class=\"val\">linear-gradient(to bottom, #0d1b2a, #1a56db)<\/span>;<\/div>\n<div class=\"callout\">\n      <strong>Watch out for resets.<\/strong> Using the <code>background<\/code> shorthand resets every sub-property &#8211; including ones you haven&#8217;t explicitly listed &#8211; back to their defaults. If you set <code>background-blend-mode<\/code> earlier in your stylesheet and then declare a <code>background<\/code> shorthand below it, the blend mode won&#8217;t be reset (since it&#8217;s not part of the shorthand), but <code>background-origin<\/code>, <code>background-clip<\/code>, and others will be. Declare your shorthand first, then override individual properties beneath it if needed.\n    <\/div>\n<p>For most real-world usage, you won&#8217;t need to specify every value &#8211; shorthand shines when you need one or two properties fast. Use the longhand properties when you&#8217;re fine-tuning layers or need to make intent explicit for other developers reading the code.<\/p>\n<div class=\"code-block\"><span class=\"comment\">\/* The shorthand you&#8217;ll write 90% of the time *\/<\/span><br \/>\n<span class=\"prop\">background<\/span>: <span class=\"val\">url(<span class=\"str\">&#8216;image.jpg&#8217;<\/span>) center \/ cover no-repeat<\/span>;<br \/>\n<span class=\"comment\">\/* The longhand equivalent &#8211; same result, more explicit *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>:      <span class=\"val\">url(<span class=\"str\">&#8216;image.jpg&#8217;<\/span>)<\/span>;<br \/>\n<span class=\"prop\">background-position<\/span>:  <span class=\"val\">center<\/span>;<br \/>\n<span class=\"prop\">background-size<\/span>:      <span class=\"val\">cover<\/span>;<br \/>\n<span class=\"prop\">background-repeat<\/span>:    <span class=\"val\">no-repeat<\/span>;<\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 11 Multiple backgrounds --><\/p>\n<section class=\"prop-section\" id=\"sec-multiple\">\n<h2>Multiple Backgrounds<\/h2>\n<p class=\"prop-syntax\">background-image: <span>&lt;image&gt;, &lt;image&gt;, &#8230;<\/span><\/p>\n<p>Every background sub-property (except <code>background-color<\/code>) accepts a comma-separated list of values corresponding to multiple background layers. The first value in each list corresponds to the topmost layer.<\/p>\n<p>This is incredibly powerful &#8211; you can create complex visual effects without a single extra element in your HTML.<\/p>\n<div class=\"code-block\"><span class=\"comment\">\/* Noise texture over a gradient &#8211; pure CSS *\/<\/span><br \/>\n<span class=\"prop\">background-image<\/span>:<br \/>\n  <span class=\"val\">url(<span class=\"str\">&#8216;noise.png&#8217;<\/span>)<\/span>,                                  <span class=\"comment\">\/* layer 1 (top) *\/<\/span><br \/>\n  <span class=\"val\">linear-gradient(135deg, #667eea, #764ba2)<\/span>;         <span class=\"comment\">\/* layer 2 *\/<\/span><br \/>\n<span class=\"prop\">background-size<\/span>: <span class=\"val\">200px 200px, cover<\/span>;<br \/>\n<span class=\"prop\">background-blend-mode<\/span>: <span class=\"val\">overlay, normal<\/span>;<\/div>\n<div class=\"demo-wrapper\">\n<div class=\"demo-header\"><span>Live Demo<\/span><span>Multiple backgrounds &#8211; pure CSS effects<\/span><\/div>\n<div class=\"demo-live\" id=\"multi-box\" style=\"background:\n        radial-gradient(ellipse at 20% 50%, rgba(26,86,219,0.7), transparent 50%),\n        radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.6), transparent 50%),\n        radial-gradient(ellipse at 60% 80%, rgba(13,27,42,0.8), transparent 40%),\n        #0d1b2a;\"><br \/>\n        <span class=\"demo-label\" id=\"multi-label\">Mesh Gradient (4 radial layers)<\/span>\n      <\/div>\n<div class=\"controls\">\n<div class=\"btn-blog-group\">\n          <button class=\"btn-blog active\" onclick=\"setMulti('mesh')\">Mesh Gradient<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setMulti('checkers')\">Checkerboard<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setMulti('dots')\">Dot Grid<\/button><br \/>\n          <button class=\"btn-blog\" onclick=\"setMulti('lines')\">Crosshatch<\/button>\n        <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<\/section>\n<div class=\"divider\"><\/div>\n<p>  <!-- 12 Quick Reference --><\/p>\n<section class=\"prop-section\" id=\"sec-ref\">\n<h2>Quick Reference<\/h2>\n<p class=\"prop-syntax\">All 8 longhand properties at a glance<\/p>\n<p>Below is a complete reference of all CSS background sub-properties, their default values, and browser support. Click on each property to explore detailed explanations, examples, and usage tips on our dedicated CSS properties pages.<\/p>\n<table class=\"values-table\">\n<tr>\n<th>Property<\/th>\n<th>Default<\/th>\n<th>Support<\/th>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-color.php\">background-color<\/a><\/td>\n<td>transparent<\/td>\n<td>CSS1 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-image.php\">background-image<\/a><\/td>\n<td>none<\/td>\n<td>CSS1 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-repeat.php\">background-repeat<\/a><\/td>\n<td>repeat<\/td>\n<td>CSS1 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-position.php\">background-position<\/a><\/td>\n<td>0% 0%<\/td>\n<td>CSS1 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-size.php\">background-size<\/a><\/td>\n<td>auto auto<\/td>\n<td>CSS3 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-attachment.php\">background-attachment<\/a><\/td>\n<td>scroll<\/td>\n<td>CSS1 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-origin.php\">background-origin<\/a><\/td>\n<td>padding-box<\/td>\n<td>CSS3 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-clip.php\">background-clip<\/a><\/td>\n<td>border-box<\/td>\n<td>CSS3 \u2713<\/td>\n<\/tr>\n<tr>\n<td><a href=\"\/css-properties\/background-blend-mode.php\">background-blend-mode<\/a><\/td>\n<td>normal<\/td>\n<td>CSS3 \u2713<\/td>\n<\/tr>\n<\/table>\n<\/section>\n<\/article>\n<p><script>  \/\/ \u2500\u2500 INTERSECTION OBSERVER (scroll reveal) \u2500\u2500\n  const observer = new IntersectionObserver(entries => {\n    entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('visible'); });\n  }, { threshold: 0.1 });\n  document.querySelectorAll('.prop-section').forEach(s => observer.observe(s));\n  \/\/ \u2500\u2500 ACTIVE BUTTON HELPER \u2500\u2500\n  function setActive(btn) {\n    btn.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    btn.classList.add('active');\n  }\n  \/\/ \u2500\u2500 01 background-color \u2500\u2500\n  const colorBox = document.getElementById('color-box');\n  const colorLabel = document.getElementById('color-label');\n  const colorPicker = document.getElementById('color-picker');\n  const colorOpacity = document.getElementById('color-opacity');\n  const opacityVal = document.getElementById('opacity-val');\n  function updateColor() {\n    const hex = colorPicker.value;\n    const op = colorOpacity.value \/ 100;\n    const r = parseInt(hex.slice(1,3),16);\n    const g = parseInt(hex.slice(3,5),16);\n    const b = parseInt(hex.slice(5,7),16);\n    const color = op === 1 ? hex : `rgba(${r},${g},${b},${op})`;\n    colorBox.style.backgroundColor = color;\n    colorLabel.textContent = `background-color: ${color}`;\n    opacityVal.textContent = colorOpacity.value + '%';\n  }\n  colorPicker.addEventListener('input', updateColor);\n  colorOpacity.addEventListener('input', updateColor);\n  function setColor(c) {\n    if (c === 'transparent') { colorBox.style.backgroundColor = 'transparent'; colorLabel.textContent = 'background-color: transparent'; return; }\n    colorPicker.value = c; updateColor();\n  }\n  \/\/ \u2500\u2500 02 background-image \u2500\u2500\ndocument.addEventListener('DOMContentLoaded', () => {\n  const imageBox = document.getElementById('image-box');\n  const imageLabel = document.getElementById('image-label');\n  const svgPat = \"url(\\\"data:image\/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http:\/\/www.w3.org\/2000\/svg'%3E%3Ccircle cx='2' cy='2' r='2' fill='%231a56db' fill-opacity='0.4'\/%3E%3C\/svg%3E\\\")\";\n  \/\/ Define setActive so it doesn't crash\nfunction setActive(clickedBtn) {\n    const buttons = document.querySelectorAll('#demo-image .btn-blog');\n    buttons.forEach(btn => btn.classList.remove('active')); \/\/ Remove from all\n    clickedBtn.classList.add('active'); \/\/ Add to the clicked one\n  }\n  function setImage(type, btn) {\n    if (btn) setActive(btn);\n    const presets = {\n      linear: ['linear-gradient(135deg, #1a56db 0%, #3b82f6 100%)', 'linear-gradient(135deg, #1a56db \u2192 #3b82f6)'],\n      radial: ['radial-gradient(circle at 30% 40%, #3b82f6, #1a56db 60%, #0d1b2a)', 'radial-gradient(circle at 30% 40%)'],\n      conic:  ['conic-gradient(from 45deg, #1a56db, #3b82f6, #0d1b2a, #1e3a5f, #1a56db)', 'conic-gradient(from 45deg)'],\n      svg:    [svgPat, 'url(svg-pattern)'],\n      multi:  ['linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), linear-gradient(90deg,#1a56db,#0d1b2a)', 'Two gradient layers'],\n    }; \n    const [bg, label] = presets[type];\n    if (imageBox) {\n      imageBox.style.backgroundImage = bg;\n      imageBox.style.backgroundSize = type === 'svg' ? '20px 20px' : 'cover';\n      imageBox.style.backgroundRepeat = type === 'svg' ? 'repeat' : 'no-repeat';\n    }\n    if (imageLabel) imageLabel.textContent = label;\n  }\n  \/\/ Hook buttons\n  document.querySelectorAll('#demo-image .btn-blog').forEach((btn, idx) => {\n    btn.addEventListener('click', function() {\n      const types = ['linear','radial','conic','svg','multi'];\n      setImage(types[idx], this);\n    });\n  });\n});\n  \/\/ \u2500\u2500 03 background-repeat \u2500\u2500\n  function setRepeat(val) {\n    const box = document.getElementById('repeat-box');\n    box.style.backgroundRepeat = val;\n    document.getElementById('repeat-label').textContent = val;\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n  }\n  \/\/ \u2500\u2500 04 background-position \u2500\u2500\n  function setPosition(val) {\n    const box = document.getElementById('position-box');\n    box.style.backgroundPosition = val;\n    document.getElementById('position-label').textContent = val;\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n  }\n  function setPositionClick(e) {\n    const box = document.getElementById('position-box');\n    const rect = box.getBoundingClientRect();\n    const x = ((e.clientX - rect.left) \/ rect.width * 100).toFixed(0);\n    const y = ((e.clientY - rect.top) \/ rect.height * 100).toFixed(0);\n    const val = `${x}% ${y}%`;\n    box.style.backgroundPosition = val;\n    document.getElementById('position-label').textContent = val;\n    document.querySelectorAll('#sec-position .btn-blog').forEach(b => b.classList.remove('active'));\n  }\n  \/\/ \u2500\u2500 05 background-size \u2500\u2500\n  function setSize(val) {\n    const box = document.getElementById('size-box');\n    box.style.backgroundSize = val;\n    document.getElementById('size-label').textContent = val;\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n  }\n  \/\/ \u2500\u2500 07 background-origin \u2500\u2500\n  function setOrigin(val) {\n    const box = document.getElementById('origin-box');\n    box.style.backgroundOrigin = val;\n    document.getElementById('origin-label').textContent = val;\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n  }\n  \/\/ \u2500\u2500 08 background-clip \u2500\u2500\n  const clipBox = document.getElementById('clip-box');\n  const clipInner = document.getElementById('clip-inner');\n  function setClip(val) {\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n    if (val === 'text') {\n      clipInner.style.cssText = `font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:900; background:linear-gradient(135deg,#1a56db,#3b82f6,#0d1b2a); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; padding:0 1rem;`;\n      clipBox.style.background = '#0d1b2a';\n    } else {\n      clipInner.style.cssText = `font-family:'Playfair Display',serif; font-size:3.5rem; font-weight:900; color:white; background:none; padding:0 1rem;`;\n      clipBox.style.background = `linear-gradient(135deg, #1a56db 0%, #3b82f6 50%, #0d1b2a 100%)`;\n      clipBox.style.backgroundClip = val;\n      clipBox.style.webkitBackgroundClip = val;\n    }\n  }\n  \/\/ \u2500\u2500 09 background-blend-mode \u2500\u2500\n  const blendBg = `linear-gradient(135deg, rgba(255,0,128,0.9), rgba(0,100,255,0.9)), radial-gradient(circle at 30% 60%, gold, crimson, navy)`;\n  function setBlend(val) {\n    const box = document.getElementById('blend-box');\n    box.style.backgroundImage = blendBg;\n    box.style.backgroundBlendMode = val;\n    document.getElementById('blend-label').textContent = val;\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n  }\n  \/\/ \u2500\u2500 11 multiple backgrounds \u2500\u2500\n  const multiBox = document.getElementById('multi-box');\n  const multiLabel = document.getElementById('multi-label');\n  const multiBgs = {\n    mesh: {\n      bg: `radial-gradient(ellipse at 20% 50%, rgba(26,86,219,0.7), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(59,130,246,0.6), transparent 50%), radial-gradient(ellipse at 60% 80%, rgba(13,27,42,0.8), transparent 40%), #0d1b2a`,\n      label: 'Mesh Gradient (4 radial layers)'\n    },\n    checkers: {\n      bg: `linear-gradient(45deg, #bfdbfe 25%, transparent 25%), linear-gradient(-45deg, #bfdbfe 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #bfdbfe 75%), linear-gradient(-45deg, transparent 75%, #bfdbfe 75%)`,\n      size: '40px 40px',\n      pos: '0 0, 0 20px, 20px -20px, -20px 0',\n      color: '#ffffff',\n      label: 'Checkerboard (4 gradient layers)'\n    },\n    dots: {\n      bg: `radial-gradient(circle, #1a56db 1.5px, transparent 1.5px)`,\n      size: '24px 24px',\n      color: '#ffffff',\n      label: 'Dot Grid (radial-gradient pattern)'\n    },\n    lines: {\n      bg: `repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(26,86,219,0.25) 19px, rgba(26,86,219,0.25) 20px), repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(26,86,219,0.25) 19px, rgba(26,86,219,0.25) 20px)`,\n      color: '#ffffff',\n      label: 'Crosshatch (2 repeating-linear layers)'\n    }\n  };\n  function setMulti(key) {\n    event.target.closest('.btn-blog-group').querySelectorAll('.btn-blog').forEach(b => b.classList.remove('active'));\n    event.target.classList.add('active');\n    const p = multiBgs[key];\n    multiBox.style.background = p.color || '';\n    multiBox.style.backgroundImage = p.bg;\n    multiBox.style.backgroundSize = p.size || '';\n    multiBox.style.backgroundPosition = p.pos || '';\n    if (p.color) multiBox.style.backgroundColor = p.color;\n    if (key === 'mesh') multiBox.style.background = p.bg;\n    multiLabel.textContent = p.label;\n  }<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When most developers think of CSS backgrounds, they reach for background-color or slap a background-image on a hero section and call it done. But the CSS background module is quietly one of the richest areas of the entire language &#8211; a suite of nine carefully designed properties that, when combined, can produce visual effects that [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":793,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","wpautop"],"_links":{"self":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":1,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions"}],"predecessor-version":[{"id":794,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions\/794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media\/793"}],"wp:attachment":[{"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/media?parent=792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/categories?post=792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cssportal.com\/blog\/wp-json\/wp\/v2\/tags?post=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}