[{"data":1,"prerenderedAt":797},["ShallowReactive",2],{"page-\u002Fcss\u002F11-backgrounds-and-gradients":3},{"id":4,"title":5,"body":6,"description":790,"extension":791,"meta":792,"navigation":497,"path":793,"seo":794,"stem":795,"__hash__":796},"content\u002Fcss\u002F11-backgrounds-and-gradients.md","11 — Backgrounds & Gradients: Layering, Sizing & the Shorthand Reset Trap",{"type":7,"value":8,"toc":777},"minimark",[9,13,43,48,159,168,225,230,291,371,378,464,468,553,557,593,597,676,680,723,773],[10,11,5],"h1",{"id":12},"_11-backgrounds-gradients-layering-sizing-the-shorthand-reset-trap",[14,15,16,17,21,22,26,27,30,31,34,35,38,39,42],"p",{},"The ",[18,19,20],"code",{},"background"," shorthand is a footgun: it resets ",[23,24,25],"em",{},"every"," background sub-property to its default. ",[18,28,29],{},"background: url(x)"," wipes ",[18,32,33],{},"background-size",", ",[18,36,37],{},"background-repeat",", and everything else. The fix: set longhands, or include size in the shorthand via the ",[18,40,41],{},"\u002F"," syntax.",[44,45,47],"h2",{"id":46},"background-layering-first-listed-is-on-top","Background Layering — first listed is on top",[49,50,52],"code-wrapper",{"language":51},"css",[53,54,58],"pre",{"className":55,"code":56,"language":51,"meta":57,"style":57},"language-css shiki shiki-themes github-light github-dark",".box {\n  \u002F* Comma-separated layers. FIRST listed is on TOP (counter-intuitive — z-order is reversed). *\u002F\n  background: url(\"overlay.png\") no-repeat center, linear-gradient(to right, red, blue);\n  background-color: #f0f0f0;  \u002F* only ONE background-color — it's the bottom layer, set separately *\u002F\n}\n","",[18,59,60,73,80,136,153],{"__ignoreMap":57},[61,62,65,69],"span",{"class":63,"line":64},"line",1,[61,66,68],{"class":67},"sIsaT",".box",[61,70,72],{"class":71},"ssxIu"," {\n",[61,74,76],{"class":63,"line":75},2,[61,77,79],{"class":78},"sdCPZ","  \u002F* Comma-separated layers. FIRST listed is on TOP (counter-intuitive — z-order is reversed). *\u002F\n",[61,81,83,87,90,93,96,100,103,106,109,111,114,116,120,123,125,128,130,133],{"class":63,"line":82},3,[61,84,86],{"class":85},"snvgF","  background",[61,88,89],{"class":71},": ",[61,91,92],{"class":85},"url",[61,94,95],{"class":71},"(",[61,97,99],{"class":98},"sJ6F3","\"overlay.png\"",[61,101,102],{"class":71},") ",[61,104,105],{"class":85},"no-repeat",[61,107,108],{"class":85}," center",[61,110,34],{"class":71},[61,112,113],{"class":85},"linear-gradient",[61,115,95],{"class":71},[61,117,119],{"class":118},"svdQ7","to",[61,121,122],{"class":85}," right",[61,124,34],{"class":71},[61,126,127],{"class":85},"red",[61,129,34],{"class":71},[61,131,132],{"class":85},"blue",[61,134,135],{"class":71},");\n",[61,137,139,142,144,147,150],{"class":63,"line":138},4,[61,140,141],{"class":85},"  background-color",[61,143,89],{"class":71},[61,145,146],{"class":85},"#f0f0f0",[61,148,149],{"class":71},";  ",[61,151,152],{"class":78},"\u002F* only ONE background-color — it's the bottom layer, set separately *\u002F\n",[61,154,156],{"class":63,"line":155},5,[61,157,158],{"class":71},"}\n",[44,160,162,164,165,167],{"id":161},"background-size-and-the-shorthand-syntax",[18,163,33],{}," and the shorthand ",[18,166,41],{}," syntax",[49,169,170],{"language":51},[53,171,173],{"className":55,"code":172,"language":51,"meta":57,"style":57},".box {\n  background: url(\"bg.png\") no-repeat center \u002F cover;  \u002F* \u002F separates position from size *\u002F\n  \u002F* cover: scale to cover the box (crops). contain: fit entirely (letterboxes). *\u002F\n  \u002F* Without \u002F, \"cover\" would be parsed as a second position value → invalid. *\u002F\n}\n",[18,174,175,181,211,216,221],{"__ignoreMap":57},[61,176,177,179],{"class":63,"line":64},[61,178,68],{"class":67},[61,180,72],{"class":71},[61,182,183,185,187,189,191,194,196,198,200,203,206,208],{"class":63,"line":75},[61,184,86],{"class":85},[61,186,89],{"class":71},[61,188,92],{"class":85},[61,190,95],{"class":71},[61,192,193],{"class":98},"\"bg.png\"",[61,195,102],{"class":71},[61,197,105],{"class":85},[61,199,108],{"class":85},[61,201,202],{"class":71}," \u002F ",[61,204,205],{"class":85},"cover",[61,207,149],{"class":71},[61,209,210],{"class":78},"\u002F* \u002F separates position from size *\u002F\n",[61,212,213],{"class":63,"line":82},[61,214,215],{"class":78},"  \u002F* cover: scale to cover the box (crops). contain: fit entirely (letterboxes). *\u002F\n",[61,217,218],{"class":63,"line":138},[61,219,220],{"class":78},"  \u002F* Without \u002F, \"cover\" would be parsed as a second position value → invalid. *\u002F\n",[61,222,223],{"class":63,"line":155},[61,224,158],{"class":71},[226,227,229],"h3",{"id":228},"anti-pattern-shorthand-resets-background-size","Anti-pattern: shorthand resets background-size",[49,231,232],{"language":51},[53,233,235],{"className":55,"code":234,"language":51,"meta":57,"style":57},"\u002F* ❌ The shorthand resets background-size to auto (overriding the earlier cover), then\n   background-repeat to repeat (default) → image is tiny and tiled. *\u002F\n.box {\n  background-size: cover;       \u002F* set first *\u002F\n  background: url(\"bg.png\");    \u002F* ❌ shorthand resets size to auto! *\u002F\n}\n",[18,236,237,242,247,253,268,286],{"__ignoreMap":57},[61,238,239],{"class":63,"line":64},[61,240,241],{"class":78},"\u002F* ❌ The shorthand resets background-size to auto (overriding the earlier cover), then\n",[61,243,244],{"class":63,"line":75},[61,245,246],{"class":78},"   background-repeat to repeat (default) → image is tiny and tiled. *\u002F\n",[61,248,249,251],{"class":63,"line":82},[61,250,68],{"class":67},[61,252,72],{"class":71},[61,254,255,258,260,262,265],{"class":63,"line":138},[61,256,257],{"class":85},"  background-size",[61,259,89],{"class":71},[61,261,205],{"class":85},[61,263,264],{"class":71},";       ",[61,266,267],{"class":78},"\u002F* set first *\u002F\n",[61,269,270,272,274,276,278,280,283],{"class":63,"line":155},[61,271,86],{"class":85},[61,273,89],{"class":71},[61,275,92],{"class":85},[61,277,95],{"class":71},[61,279,193],{"class":98},[61,281,282],{"class":71},");    ",[61,284,285],{"class":78},"\u002F* ❌ shorthand resets size to auto! *\u002F\n",[61,287,289],{"class":63,"line":288},6,[61,290,158],{"class":71},[49,292,293],{"language":51},[53,294,296],{"className":55,"code":295,"language":51,"meta":57,"style":57},"\u002F* ✓ Set background-size AFTER the shorthand, or include it in the shorthand with \u002F. *\u002F\n.box { background: url(\"bg.png\") no-repeat center; background-size: cover; }\n\u002F* or *\u002F\n.box { background: url(\"bg.png\") no-repeat center \u002F cover; }\n",[18,297,298,303,338,343],{"__ignoreMap":57},[61,299,300],{"class":63,"line":64},[61,301,302],{"class":78},"\u002F* ✓ Set background-size AFTER the shorthand, or include it in the shorthand with \u002F. *\u002F\n",[61,304,305,307,310,312,314,316,318,320,322,324,326,329,331,333,335],{"class":63,"line":75},[61,306,68],{"class":67},[61,308,309],{"class":71}," { ",[61,311,20],{"class":85},[61,313,89],{"class":71},[61,315,92],{"class":85},[61,317,95],{"class":71},[61,319,193],{"class":98},[61,321,102],{"class":71},[61,323,105],{"class":85},[61,325,108],{"class":85},[61,327,328],{"class":71},"; ",[61,330,33],{"class":85},[61,332,89],{"class":71},[61,334,205],{"class":85},[61,336,337],{"class":71},"; }\n",[61,339,340],{"class":63,"line":82},[61,341,342],{"class":78},"\u002F* or *\u002F\n",[61,344,345,347,349,351,353,355,357,359,361,363,365,367,369],{"class":63,"line":138},[61,346,68],{"class":67},[61,348,309],{"class":71},[61,350,20],{"class":85},[61,352,89],{"class":71},[61,354,92],{"class":85},[61,356,95],{"class":71},[61,358,193],{"class":98},[61,360,102],{"class":71},[61,362,105],{"class":85},[61,364,108],{"class":85},[61,366,202],{"class":71},[61,368,205],{"class":85},[61,370,337],{"class":71},[44,372,374,377],{"id":373},"background-clip-text-gradient-text",[18,375,376],{},"background-clip: text"," — gradient text",[49,379,380],{"language":51},[53,381,383],{"className":55,"code":382,"language":51,"meta":57,"style":57},".gradient-text {\n  background: linear-gradient(to right, red, blue);\n  -webkit-background-clip: text;   \u002F* Safari needs -webkit- *\u002F\n  background-clip: text;\n  color: transparent;             \u002F* MUST be transparent or the text color covers the gradient *\u002F\n}\n",[18,384,385,392,416,432,444,460],{"__ignoreMap":57},[61,386,387,390],{"class":63,"line":64},[61,388,389],{"class":67},".gradient-text",[61,391,72],{"class":71},[61,393,394,396,398,400,402,404,406,408,410,412,414],{"class":63,"line":75},[61,395,86],{"class":85},[61,397,89],{"class":71},[61,399,113],{"class":85},[61,401,95],{"class":71},[61,403,119],{"class":118},[61,405,122],{"class":85},[61,407,34],{"class":71},[61,409,127],{"class":85},[61,411,34],{"class":71},[61,413,132],{"class":85},[61,415,135],{"class":71},[61,417,418,421,423,426,429],{"class":63,"line":82},[61,419,420],{"class":85},"  -webkit-background-clip",[61,422,89],{"class":71},[61,424,425],{"class":85},"text",[61,427,428],{"class":71},";   ",[61,430,431],{"class":78},"\u002F* Safari needs -webkit- *\u002F\n",[61,433,434,437,439,441],{"class":63,"line":138},[61,435,436],{"class":85},"  background-clip",[61,438,89],{"class":71},[61,440,425],{"class":85},[61,442,443],{"class":71},";\n",[61,445,446,449,451,454,457],{"class":63,"line":155},[61,447,448],{"class":85},"  color",[61,450,89],{"class":71},[61,452,453],{"class":85},"transparent",[61,455,456],{"class":71},";             ",[61,458,459],{"class":78},"\u002F* MUST be transparent or the text color covers the gradient *\u002F\n",[61,461,462],{"class":63,"line":288},[61,463,158],{"class":71},[44,465,467],{"id":466},"gradients-linear-radial-conic-repeating","Gradients — linear, radial, conic, repeating",[49,469,470],{"language":51},[53,471,473],{"className":55,"code":472,"language":51,"meta":57,"style":57},"\u002F* linear-gradient: angle (0deg = UP, 90deg = RIGHT, 180deg = DOWN) + color stops *\u002F\nbackground: linear-gradient(45deg, red, blue);\nbackground: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);  \u002F* hard stop = stripe *\u002F\n\n\u002F* radial-gradient *\u002F\nbackground: radial-gradient(circle at top left, red, blue);\n\n\u002F* conic-gradient: sweeps around a center → pie charts *\u002F\nbackground: conic-gradient(red 0 30%, blue 30% 70%, green 70% 100%);  \u002F* 3-segment pie *\u002F\n\n\u002F* repeating gradients: for stripes, patterns *\u002F\nbackground: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);\n",[18,474,475,480,485,493,499,504,516,521,527,536,541,547],{"__ignoreMap":57},[61,476,477],{"class":63,"line":64},[61,478,479],{"class":78},"\u002F* linear-gradient: angle (0deg = UP, 90deg = RIGHT, 180deg = DOWN) + color stops *\u002F\n",[61,481,482],{"class":63,"line":75},[61,483,484],{"class":71},"background: linear-gradient(45deg, red, blue);\n",[61,486,487,490],{"class":63,"line":82},[61,488,489],{"class":71},"background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);  ",[61,491,492],{"class":78},"\u002F* hard stop = stripe *\u002F\n",[61,494,495],{"class":63,"line":138},[61,496,498],{"emptyLinePlaceholder":497},true,"\n",[61,500,501],{"class":63,"line":155},[61,502,503],{"class":78},"\u002F* radial-gradient *\u002F\n",[61,505,506,509,513],{"class":63,"line":288},[61,507,508],{"class":71},"background: radial-gradient(",[61,510,512],{"class":511},"sk71V","circle",[61,514,515],{"class":71}," at top left, red, blue);\n",[61,517,519],{"class":63,"line":518},7,[61,520,498],{"emptyLinePlaceholder":497},[61,522,524],{"class":63,"line":523},8,[61,525,526],{"class":78},"\u002F* conic-gradient: sweeps around a center → pie charts *\u002F\n",[61,528,530,533],{"class":63,"line":529},9,[61,531,532],{"class":71},"background: conic-gradient(red 0 30%, blue 30% 70%, green 70% 100%);  ",[61,534,535],{"class":78},"\u002F* 3-segment pie *\u002F\n",[61,537,539],{"class":63,"line":538},10,[61,540,498],{"emptyLinePlaceholder":497},[61,542,544],{"class":63,"line":543},11,[61,545,546],{"class":78},"\u002F* repeating gradients: for stripes, patterns *\u002F\n",[61,548,550],{"class":63,"line":549},12,[61,551,552],{"class":71},"background: repeating-linear-gradient(45deg, red, red 10px, blue 10px, blue 20px);\n",[44,554,556],{"id":555},"tips-tricks","💡 Tips & Tricks",[558,559,560,572,580,585],"ul",{},[561,562,563,567,568,571],"li",{},[564,565,566],"strong",{},"Idiom",": hard stops (",[18,569,570],{},"red 50%, blue 50%",") create instant stripes — the abrupt transition is a stripe pattern. Use for progress bars, warning patterns, decorative stripes.",[561,573,574,89,576,579],{},[564,575,566],{},[18,577,578],{},"conic-gradient(red 0 30%, blue 30% 70%, green 70% 100%)"," makes a pie chart in pure CSS — no SVG.",[561,581,582,584],{},[564,583,566],{},": multiple backgrounds (comma-separated) for layered effects — a noise texture over a gradient over a color. First listed is on top.",[561,586,587,89,589,592],{},[564,588,566],{},[18,590,591],{},"background-position: right 10px bottom 20px"," for offset-from-edges — clearer than computing percentages, pins to a corner with an offset.",[44,594,596],{"id":595},"️-edge-cases-gotchas","⚠️ Edge Cases & Gotchas",[558,598,599,611,625,638,661,670],{},[561,600,601,607,608,610],{},[564,602,603,606],{},[18,604,605],{},"background-color"," is the bottom layer",": only one ",[18,609,605],{},". Set it separately or as the last fallback in the shorthand.",[561,612,613,616,617,620,621,624],{},[564,614,615],{},"Gradient angle: 0deg is UP"," (not right), increasing clockwise. ",[18,618,619],{},"90deg"," = right, ",[18,622,623],{},"180deg"," = down.",[561,626,627,633,634,637],{},[564,628,629,632],{},[18,630,631],{},"background-clip: border-box"," (default) shows background under a transparent\u002Fdashed border",": use ",[18,635,636],{},"padding-box"," to clip at the padding edge.",[561,639,640,89,649,652,653,656,657,660],{},[564,641,642,645,646],{},[18,643,644],{},"background-origin"," vs ",[18,647,648],{},"background-clip",[18,650,651],{},"origin"," is where the background ",[23,654,655],{},"starts"," (for positioning\u002Fsizing); ",[18,658,659],{},"clip"," is where it's *clipped`. They can differ.",[561,662,663,669],{},[564,664,665,668],{},[18,666,667],{},"background-attachment: fixed"," is janky on mobile",": causes repaints on scroll. Use sparingly.",[561,671,672,675],{},[564,673,674],{},"Gradients are resolution-independent",": they scale without pixelation, unlike raster images. Use for UI effects (buttons, stripes) instead of images.",[44,677,679],{"id":678},"spot-the-bug","🧠 Spot the Bug",[49,681,682],{"language":51},[53,683,685],{"className":55,"code":684,"language":51,"meta":57,"style":57},".box {\n    background-size: cover;\n    background: url(\"bg.png\");\n}\n",[18,686,687,693,704,719],{"__ignoreMap":57},[61,688,689,691],{"class":63,"line":64},[61,690,68],{"class":67},[61,692,72],{"class":71},[61,694,695,698,700,702],{"class":63,"line":75},[61,696,697],{"class":85},"    background-size",[61,699,89],{"class":71},[61,701,205],{"class":85},[61,703,443],{"class":71},[61,705,706,709,711,713,715,717],{"class":63,"line":82},[61,707,708],{"class":85},"    background",[61,710,89],{"class":71},[61,712,92],{"class":85},[61,714,95],{"class":71},[61,716,193],{"class":98},[61,718,135],{"class":71},[61,720,721],{"class":63,"line":138},[61,722,158],{"class":71},[724,725,726,730],"details",{},[727,728,729],"summary",{},"Answer",[14,731,16,732,734,735,738,739,741,742,745,746,749,750,753,754,756,757,759,760,763,764,749,766,768,769,772],{},[18,733,20],{}," shorthand resets ",[23,736,737],{},"all"," background sub-properties to defaults — including ",[18,740,33],{}," (to ",[18,743,744],{},"auto","). Since the shorthand comes ",[23,747,748],{},"after"," ",[18,751,752],{},"background-size: cover",", it overrides ",[18,755,205],{}," with ",[18,758,744],{},". The image renders at its natural size (tiny) and tiles (default ",[18,761,762],{},"repeat","). Fix: put ",[18,765,33],{},[23,767,748],{}," the shorthand, or include it in the shorthand (",[18,770,771],{},"background: url(\"bg.png\") no-repeat center \u002F cover",").",[774,775,776],"style",{},"html pre.shiki code .sIsaT, html code.shiki .sIsaT{--shiki-default:#6F42C1;--shiki-github-dark:#B392F0}html pre.shiki code .ssxIu, html code.shiki .ssxIu{--shiki-default:#24292E;--shiki-github-dark:#E1E4E8}html pre.shiki code .sdCPZ, html code.shiki .sdCPZ{--shiki-default:#6A737D;--shiki-github-dark:#6A737D}html pre.shiki code .snvgF, html code.shiki .snvgF{--shiki-default:#005CC5;--shiki-github-dark:#79B8FF}html pre.shiki code .sJ6F3, html code.shiki .sJ6F3{--shiki-default:#032F62;--shiki-github-dark:#9ECBFF}html pre.shiki code .svdQ7, html code.shiki .svdQ7{--shiki-default:#D73A49;--shiki-github-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html.github-dark .shiki span {color: var(--shiki-github-dark);background: var(--shiki-github-dark-bg);font-style: var(--shiki-github-dark-font-style);font-weight: var(--shiki-github-dark-font-weight);text-decoration: var(--shiki-github-dark-text-decoration);}html pre.shiki code .sk71V, html code.shiki .sk71V{--shiki-default:#22863A;--shiki-github-dark:#85E89D}",{"title":57,"searchDepth":75,"depth":75,"links":778},[779,780,784,786,787,788,789],{"id":46,"depth":75,"text":47},{"id":161,"depth":75,"text":781,"children":782},"background-size and the shorthand \u002F syntax",[783],{"id":228,"depth":82,"text":229},{"id":373,"depth":75,"text":785},"background-clip: text — gradient text",{"id":466,"depth":75,"text":467},{"id":555,"depth":75,"text":556},{"id":595,"depth":75,"text":596},{"id":678,"depth":75,"text":679},"Multiple background layers, background-size in the shorthand (the \u002F syntax), background-clip:text for gradient text, and gradient color-stop math. Code-first reference with conic-gradient pie charts and hard-stop stripes.","md",{},"\u002Fcss\u002F11-backgrounds-and-gradients",{"title":5,"description":790},"css\u002F11-backgrounds-and-gradients","iP1ir7rG2CrvC0F_gIWwZVeZhADTfeHnvLS5S55LekM",1789924644826]