[{"data":1,"prerenderedAt":1347},["ShallowReactive",2],{"content:\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements":3,"surroundings:\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements":1338},{"id":4,"title":5,"body":6,"description":1318,"extension":1319,"meta":1320,"navigation":1331,"path":1332,"seo":1333,"stem":1336,"__hash__":1337},"content\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002Findex.md","CSS Background Images as LCP Elements",{"type":7,"value":8,"toc":1300},"minimark",[9,14,42,61,212,217,257,261,267,273,288,297,413,417,422,576,703,706,710,790,794,803,872,876,879,984,988,998,1002,1023,1027,1045,1049,1077,1081,1115,1119,1128,1140,1150,1163,1167,1179,1196,1208,1221,1233,1248,1259,1263,1286,1291,1294,1297],[10,11,13],"h1",{"id":12},"how-to-fix-lcp-when-the-hero-is-a-css-background-image","How to Fix LCP When the Hero Is a CSS Background Image",[15,16,17,18,23,24,28,29,33,34,37,38,41],"p",{},"This guide addresses a common LCP anti-pattern within ",[19,20,22],"a",{"href":21},"\u002Fimage-media-optimization\u002F","Image & Media Optimization",", as part of ",[19,25,27],{"href":26},"\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002F","Image Decoding & Placeholders",". Hero sections are often built as a ",[30,31,32],"code",{},"\u003Cdiv>"," with ",[30,35,36],{},"background-image: url(hero.jpg)"," and ",[30,39,40],{},"background-size: cover",", usually so text can sit on top. Chromium counts background images as LCP candidates, so the hero background is frequently the LCP element — and one of the slowest kinds.",[15,43,44,45,48,49,52,53,56,57,60],{},"The browser's preload scanner reads HTML, not CSS rules, so it cannot discover a background image until the stylesheet has downloaded, been parsed, and the element has been styled and laid out. That means the image request starts after CSS, at low priority, with no ",[30,46,47],{},"srcset",", ",[30,50,51],{},"sizes"," or ",[30,54,55],{},"fetchpriority"," available on the element. On mobile, the background hero's request commonly starts 600–1200ms later than an equivalent ",[30,58,59],{},"\u003Cimg>"," would.",[15,62,63],{},[64,65,71,72,71,79,71,83,71,86,71,95,71,101,71,112,71,117,71,125,71,132,71,136,71,140,71,146,71,150,71,154,71,157,71,160,71,167,71,172,71,177,71,183,71,187,71,190,71,194,71,198,71,202,71,206,71],"svg",{"viewBox":66,"width":67,"role":68,"ariaLabel":69,"style":70},"0 0 760 232","100%","img","Timelines comparing when a hero image request starts if defined as a CSS background versus as an img element in the HTML.","height:auto;max-width:760px;display:block;margin:1.75rem auto;font-family:inherit;color:var(--fp-svg-ink)"," ",[73,74],"rect",{"className":75,"x":77,"y":77,"width":67,"height":67,"fill":78},[76],"svg-canvas","0","#ffffff",[80,81,82],"title",{},"When the hero request starts: background vs img",[84,85,69],"desc",{},[73,87],{"x":88,"y":88,"width":89,"height":90,"rx":91,"fill":92,"stroke":93,"style":94},"1","758","230","10","none","currentColor","stroke-opacity:0.18",[96,97,82],"text",{"x":98,"y":99,"fill":93,"style":100},"28.0","34.0","font-size:16px;font-weight:700",[102,103],"line",{"x1":104,"y1":105,"x2":104,"y2":106,"stroke":107,"strokeWidth":108,"strokeDashArray":109,"style":111},"703.4","72.0","188.0","#b8860b","1.5",[110,110],"4","stroke-opacity:0.9",[96,113,116],{"x":98,"y":114,"fill":93,"style":115},"96.0","font-size:12.5px;font-weight:700","CSS background",[73,118],{"x":119,"y":120,"width":121,"height":122,"rx":123,"fill":93,"stroke":93,"style":124},"140.2","78.0","111.3","26.0","3","fill-opacity:0.06;stroke-opacity:0.4",[96,126,131],{"x":127,"y":128,"fill":93,"style":129,"textAnchor":130},"195.8","95.5","font-size:11.5px","middle","HTML",[73,133],{"x":134,"y":120,"width":135,"height":122,"rx":123,"fill":93,"stroke":93,"style":124},"253.0","133.9",[96,137,139],{"x":138,"y":128,"fill":93,"style":129,"textAnchor":130},"319.9","CSS",[73,141],{"x":142,"y":120,"width":143,"height":122,"rx":123,"fill":144,"stroke":107,"style":145},"399.6","269.2","#ffc300","fill-opacity:0.24;stroke-opacity:0.9",[96,147,149],{"x":148,"y":128,"fill":93,"style":129,"textAnchor":130},"534.2","hero image (low prio)",[96,151,153],{"x":98,"y":152,"fill":93,"style":115},"134.0","img in HTML",[73,155],{"x":119,"y":156,"width":121,"height":122,"rx":123,"fill":93,"stroke":93,"style":124},"116.0",[96,158,131],{"x":127,"y":159,"fill":93,"style":129,"textAnchor":130},"133.5",[73,161],{"x":162,"y":163,"width":164,"height":122,"rx":123,"fill":165,"stroke":165,"style":166},"196.6","148.0","224.1","#0466c8","fill-opacity:0.14;stroke-opacity:0.9",[96,168,171],{"x":169,"y":170,"fill":93,"style":129,"textAnchor":130},"308.6","165.5","hero image (high prio)",[102,173],{"x1":174,"y1":106,"x2":175,"y2":106,"stroke":93,"style":176},"139.4","726.0","stroke-opacity:0.4",[96,178,182],{"x":179,"y":180,"fill":181,"style":129,"textAnchor":130},"150.1","205.0","#51617a","0ms",[96,184,186],{"x":185,"y":180,"fill":181,"style":129,"textAnchor":130},"229.7","400ms",[96,188,189],{"x":138,"y":180,"fill":181,"style":129,"textAnchor":130},"800ms",[96,191,193],{"x":192,"y":180,"fill":181,"style":129,"textAnchor":130},"410.1","1200ms",[96,195,197],{"x":196,"y":180,"fill":181,"style":129,"textAnchor":130},"500.4","1600ms",[96,199,201],{"x":200,"y":180,"fill":181,"style":129,"textAnchor":130},"590.6","2000ms",[96,203,205],{"x":204,"y":180,"fill":181,"style":129,"textAnchor":130},"680.9","2400ms",[96,207,211],{"x":104,"y":208,"fill":209,"style":210,"textAnchor":130},"68.0","#8a6608","font-size:12px;font-weight:700","LCP 2.5s",[213,214,216],"h2",{"id":215},"rapid-diagnosis","Rapid Diagnosis",[218,219,220,239,245,251],"ul",{},[221,222,223,227,228,52,231,234,235,238],"li",{},[224,225,226],"strong",{},"Identify the LCP element."," In the Performance panel, if the LCP node is a ",[30,229,230],{},"div",[30,232,233],{},"section"," and the LCP entry's ",[30,236,237],{},"url"," is an image, it is a background image.",[221,240,241,244],{},[224,242,243],{},"Check the initiator."," In Network, the hero request's initiator is the stylesheet, not the document or a preload.",[221,246,247,250],{},[224,248,249],{},"Check the start time and priority."," It starts after CSS completes and at Low or Medium priority.",[221,252,253,256],{},[224,254,255],{},"Check responsive handling."," Background heroes often serve one large image to all devices, or switch via media queries with multiple full-size files.",[213,258,260],{"id":259},"root-cause-analysis","Root Cause Analysis",[15,262,263,266],{},[224,264,265],{},"1. Late discovery."," The URL lives in CSS, so the request waits for CSS download, parse, style and layout.",[15,268,269,272],{},[224,270,271],{},"2. Low priority."," Background images are fetched at low priority by default.",[15,274,275,71,278,280,281,283,284,287],{},[224,276,277],{},"3. No responsive sizing.",[30,279,47],{},"\u002F",[30,282,51],{}," are not available; ",[30,285,286],{},"image-set()"," supports density and type but not width-based selection.",[15,289,290,293,294,296],{},[224,291,292],{},"4. Hard to prioritise."," You cannot put ",[30,295,55],{}," on a CSS background.",[15,298,299],{},[64,300,71,303,71,306,71,309,71,311,71,314,71,316,71,321,71,327,71,331,71,335,71,338,71,342,71,345,71,349,71,353,71,357,71,359,71,363,71,365,71,368,71,370,71,372,71,374,71,378,71,380,71,383,71,385,71,388,71,390,71,393,71,396,71,399,71,401,71,404,71,406,71,409,71,411,71],{"viewBox":301,"width":67,"role":68,"ariaLabel":302,"style":70},"0 0 760 198","Comparison of hero image implementations by discovery, responsiveness and prioritisation.",[73,304],{"className":305,"x":77,"y":77,"width":67,"height":67,"fill":78},[76],[80,307,308],{},"Hero implementation options",[84,310,302],{},[73,312],{"x":88,"y":88,"width":89,"height":313,"rx":91,"fill":92,"stroke":93,"style":94},"196",[96,315,308],{"x":98,"y":99,"fill":93,"style":100},[73,317],{"x":98,"y":318,"width":319,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},"56.0","169.1","30.0",[96,322,326],{"x":323,"y":324,"fill":93,"style":115,"textAnchor":325},"38.0","75.5","start","Implementation",[73,328],{"x":329,"y":318,"width":330,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},"197.1","178.3",[96,332,334],{"x":333,"y":324,"fill":93,"style":115,"textAnchor":130},"286.3","Discovery",[73,336],{"x":337,"y":318,"width":330,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},"375.4",[96,339,341],{"x":340,"y":324,"fill":93,"style":115,"textAnchor":130},"464.6","Responsive",[73,343],{"x":344,"y":318,"width":330,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},"553.7",[96,346,348],{"x":347,"y":324,"fill":93,"style":115,"textAnchor":130},"642.9","Priority control",[73,350],{"x":98,"y":351,"width":319,"height":320,"rx":77,"fill":92,"stroke":93,"style":352},"86.0","stroke-opacity:0.35",[96,354,356],{"x":323,"y":355,"fill":93,"style":115,"textAnchor":325},"105.5","CSS background-image",[73,358],{"x":329,"y":351,"width":330,"height":320,"rx":77,"fill":144,"stroke":107,"style":145},[96,360,362],{"x":333,"y":355,"fill":93,"style":361,"textAnchor":130},"font-size:12px","after CSS + layout",[73,364],{"x":337,"y":351,"width":330,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},[96,366,367],{"x":340,"y":355,"fill":93,"style":361,"textAnchor":130},"media queries \u002F image-set",[73,369],{"x":344,"y":351,"width":330,"height":320,"rx":77,"fill":144,"stroke":107,"style":145},[96,371,92],{"x":347,"y":355,"fill":93,"style":361,"textAnchor":130},[73,373],{"x":98,"y":156,"width":319,"height":320,"rx":77,"fill":92,"stroke":93,"style":352},[96,375,377],{"x":323,"y":376,"fill":93,"style":115,"textAnchor":325},"135.5","Background + preload link",[73,379],{"x":329,"y":156,"width":330,"height":320,"rx":77,"fill":165,"stroke":165,"style":166},[96,381,382],{"x":333,"y":376,"fill":93,"style":361,"textAnchor":130},"early via preload",[73,384],{"x":337,"y":156,"width":330,"height":320,"rx":77,"fill":93,"stroke":93,"style":124},[96,386,387],{"x":340,"y":376,"fill":93,"style":361,"textAnchor":130},"imagesrcset on preload",[73,389],{"x":344,"y":156,"width":330,"height":320,"rx":77,"fill":165,"stroke":165,"style":166},[96,391,392],{"x":347,"y":376,"fill":93,"style":361,"textAnchor":130},"fetchpriority on preload",[73,394],{"x":98,"y":395,"width":319,"height":320,"rx":77,"fill":92,"stroke":93,"style":352},"146.0",[96,397,398],{"x":323,"y":170,"fill":93,"style":115,"textAnchor":325},"img with object-fit: cover",[73,400],{"x":329,"y":395,"width":330,"height":320,"rx":77,"fill":165,"stroke":165,"style":166},[96,402,403],{"x":333,"y":170,"fill":93,"style":361,"textAnchor":130},"preload scanner",[73,405],{"x":337,"y":395,"width":330,"height":320,"rx":77,"fill":165,"stroke":165,"style":166},[96,407,408],{"x":340,"y":170,"fill":93,"style":361,"textAnchor":130},"srcset + sizes",[73,410],{"x":344,"y":395,"width":330,"height":320,"rx":77,"fill":165,"stroke":165,"style":166},[96,412,55],{"x":347,"y":170,"fill":93,"style":361,"textAnchor":130},[213,414,416],{"id":415},"step-by-step-resolution","Step-by-Step Resolution",[418,419,421],"h3",{"id":420},"_1-replace-the-background-with-an-img-and-object-fit","1. Replace the background with an img and object-fit",[423,424,429],"pre",{"className":425,"code":426,"language":427,"meta":428,"style":428},"language-html shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast","\u003Csection class=\"hero\">\n  \u003Cimg class=\"hero-bg\" src=\"\u002Fimg\u002Fhero-1200.avif\"\n       srcset=\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w, \u002Fimg\u002Fhero-2000.avif 2000w\"\n       sizes=\"100vw\" width=\"2000\" height=\"1000\" fetchpriority=\"high\" alt=\"\">\n  \u003Cdiv class=\"hero-content\">\u003Ch1>Spring collection\u003C\u002Fh1>\u003C\u002Fdiv>\n\u003C\u002Fsection>\n","html","",[30,430,431,456,479,490,535,566],{"__ignoreMap":428},[432,433,435,439,442,446,449,453],"span",{"class":102,"line":434},1,[432,436,438],{"class":437},"saISM","\u003C",[432,440,233],{"class":441},"sZBmE",[432,443,445],{"class":444},"sPXB4"," class",[432,447,448],{"class":437},"=",[432,450,452],{"class":451},"sZ8jY","\"hero\"",[432,454,455],{"class":437},">\n",[432,457,459,462,464,466,468,471,474,476],{"class":102,"line":458},2,[432,460,461],{"class":437},"  \u003C",[432,463,68],{"class":441},[432,465,445],{"class":444},[432,467,448],{"class":437},[432,469,470],{"class":451},"\"hero-bg\"",[432,472,473],{"class":444}," src",[432,475,448],{"class":437},[432,477,478],{"class":451},"\"\u002Fimg\u002Fhero-1200.avif\"\n",[432,480,482,485,487],{"class":102,"line":481},3,[432,483,484],{"class":444},"       srcset",[432,486,448],{"class":437},[432,488,489],{"class":451},"\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w, \u002Fimg\u002Fhero-2000.avif 2000w\"\n",[432,491,493,496,498,501,504,506,509,512,514,517,520,522,525,528,530,533],{"class":102,"line":492},4,[432,494,495],{"class":444},"       sizes",[432,497,448],{"class":437},[432,499,500],{"class":451},"\"100vw\"",[432,502,503],{"class":444}," width",[432,505,448],{"class":437},[432,507,508],{"class":451},"\"2000\"",[432,510,511],{"class":444}," height",[432,513,448],{"class":437},[432,515,516],{"class":451},"\"1000\"",[432,518,519],{"class":444}," fetchpriority",[432,521,448],{"class":437},[432,523,524],{"class":451},"\"high\"",[432,526,527],{"class":444}," alt",[432,529,448],{"class":437},[432,531,532],{"class":451},"\"\"",[432,534,455],{"class":437},[432,536,538,540,542,544,546,549,552,554,557,559,562,564],{"class":102,"line":537},5,[432,539,461],{"class":437},[432,541,230],{"class":441},[432,543,445],{"class":444},[432,545,448],{"class":437},[432,547,548],{"class":451},"\"hero-content\"",[432,550,551],{"class":437},">\u003C",[432,553,10],{"class":441},[432,555,556],{"class":437},">Spring collection\u003C\u002F",[432,558,10],{"class":441},[432,560,561],{"class":437},">\u003C\u002F",[432,563,230],{"class":441},[432,565,455],{"class":437},[432,567,569,572,574],{"class":102,"line":568},6,[432,570,571],{"class":437},"\u003C\u002F",[432,573,233],{"class":441},[432,575,455],{"class":437},[423,577,581],{"className":578,"code":579,"language":580,"meta":428,"style":428},"language-css shiki shiki-themes github-light-high-contrast github-dark-high-contrast github-light-high-contrast",".hero { position: relative; min-height: 60vh; }\n.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }\n.hero-content { position: relative; }\n\u002F* trade-off: the img is now in the accessibility tree; give decorative heroes\n   alt=\"\" so screen readers skip them. *\u002F\n","css",[30,582,583,618,677,692,698],{"__ignoreMap":428},[432,584,585,588,591,594,597,600,603,606,608,611,615],{"class":102,"line":434},[432,586,587],{"class":444},".hero",[432,589,590],{"class":437}," { ",[432,592,593],{"class":444},"position",[432,595,596],{"class":437},": ",[432,598,599],{"class":444},"relative",[432,601,602],{"class":437},"; ",[432,604,605],{"class":444},"min-height",[432,607,596],{"class":437},[432,609,610],{"class":444},"60",[432,612,614],{"class":613},"sPARh","vh",[432,616,617],{"class":437},"; }\n",[432,619,620,623,625,627,629,632,634,637,639,641,643,646,648,651,654,656,659,661,663,665,667,670,672,675],{"class":102,"line":458},[432,621,622],{"class":444},".hero-bg",[432,624,590],{"class":437},[432,626,593],{"class":444},[432,628,596],{"class":437},[432,630,631],{"class":444},"absolute",[432,633,602],{"class":437},[432,635,636],{"class":444},"inset",[432,638,596],{"class":437},[432,640,77],{"class":444},[432,642,602],{"class":437},[432,644,645],{"class":444},"width",[432,647,596],{"class":437},[432,649,650],{"class":444},"100",[432,652,653],{"class":613},"%",[432,655,602],{"class":437},[432,657,658],{"class":444},"height",[432,660,596],{"class":437},[432,662,650],{"class":444},[432,664,653],{"class":613},[432,666,602],{"class":437},[432,668,669],{"class":444},"object-fit",[432,671,596],{"class":437},[432,673,674],{"class":444},"cover",[432,676,617],{"class":437},[432,678,679,682,684,686,688,690],{"class":102,"line":481},[432,680,681],{"class":444},".hero-content",[432,683,590],{"class":437},[432,685,593],{"class":444},[432,687,596],{"class":437},[432,689,599],{"class":444},[432,691,617],{"class":437},[432,693,694],{"class":102,"line":492},[432,695,697],{"class":696},"sjfSM","\u002F* trade-off: the img is now in the accessibility tree; give decorative heroes\n",[432,699,700],{"class":102,"line":537},[432,701,702],{"class":696},"   alt=\"\" so screen readers skip them. *\u002F\n",[15,704,705],{},"Expected outcome: the preload scanner finds the image during HTML parsing; LCP typically improves by 500ms–1s on mobile.",[418,707,709],{"id":708},"_2-if-the-background-must-stay-preload-it-with-the-same-responsive-candidates","2. If the background must stay, preload it with the same responsive candidates",[423,711,713],{"className":425,"code":712,"language":427,"meta":428,"style":428},"\u003Clink rel=\"preload\" as=\"image\" fetchpriority=\"high\"\n      href=\"\u002Fimg\u002Fhero-1200.avif\"\n      imagesrcset=\"\u002Fimg\u002Fhero-640.avif 640w, \u002Fimg\u002Fhero-1200.avif 1200w, \u002Fimg\u002Fhero-2000.avif 2000w\"\n      imagesizes=\"100vw\">\n\u003C!-- trade-off: the CSS must request exactly the same URL the preload chose, or\n     the image downloads twice. With media-query-based CSS this is hard to\n     guarantee; the img approach avoids the problem. -->\n",[30,714,715,745,754,763,774,779,784],{"__ignoreMap":428},[432,716,717,719,722,725,727,730,733,735,738,740,742],{"class":102,"line":434},[432,718,438],{"class":437},[432,720,721],{"class":441},"link",[432,723,724],{"class":444}," rel",[432,726,448],{"class":437},[432,728,729],{"class":451},"\"preload\"",[432,731,732],{"class":444}," as",[432,734,448],{"class":437},[432,736,737],{"class":451},"\"image\"",[432,739,519],{"class":444},[432,741,448],{"class":437},[432,743,744],{"class":451},"\"high\"\n",[432,746,747,750,752],{"class":102,"line":458},[432,748,749],{"class":444},"      href",[432,751,448],{"class":437},[432,753,478],{"class":451},[432,755,756,759,761],{"class":102,"line":481},[432,757,758],{"class":444},"      imagesrcset",[432,760,448],{"class":437},[432,762,489],{"class":451},[432,764,765,768,770,772],{"class":102,"line":492},[432,766,767],{"class":444},"      imagesizes",[432,769,448],{"class":437},[432,771,500],{"class":451},[432,773,455],{"class":437},[432,775,776],{"class":102,"line":537},[432,777,778],{"class":696},"\u003C!-- trade-off: the CSS must request exactly the same URL the preload chose, or\n",[432,780,781],{"class":102,"line":568},[432,782,783],{"class":696},"     the image downloads twice. With media-query-based CSS this is hard to\n",[432,785,787],{"class":102,"line":786},7,[432,788,789],{"class":696},"     guarantee; the img approach avoids the problem. -->\n",[418,791,793],{"id":792},"_3-use-image-set-for-format-and-density-at-least","3. Use image-set() for format and density at least",[15,795,796,797,33,799,802],{},"If CSS backgrounds remain for secondary images, ",[30,798,286],{},[30,800,801],{},"type()"," lets browsers choose AVIF or WebP and density variants.",[423,804,806],{"className":578,"code":805,"language":580,"meta":428,"style":428},".promo { background-image: image-set(url(\"\u002Fimg\u002Fpromo.avif\") type(\"image\u002Favif\"), url(\"\u002Fimg\u002Fpromo.jpg\") type(\"image\u002Fjpeg\")); }\n\u002F* trade-off: image-set selects by type and density, not by layout width;\n   small screens may still download a desktop-sized file. *\u002F\n",[30,807,808,862,867],{"__ignoreMap":428},[432,809,810,813,815,818,820,823,826,828,830,833,836,840,843,846,848,850,853,856,859],{"class":102,"line":434},[432,811,812],{"class":444},".promo",[432,814,590],{"class":437},[432,816,817],{"class":444},"background-image",[432,819,596],{"class":437},[432,821,822],{"class":444},"image-set",[432,824,825],{"class":437},"(",[432,827,237],{"class":444},[432,829,825],{"class":437},[432,831,832],{"class":451},"\"\u002Fimg\u002Fpromo.avif\"",[432,834,835],{"class":437},") ",[432,837,839],{"class":838},"sQw3B","type(",[432,841,842],{"class":451},"\"image\u002Favif\"",[432,844,845],{"class":437},"), ",[432,847,237],{"class":444},[432,849,825],{"class":437},[432,851,852],{"class":451},"\"\u002Fimg\u002Fpromo.jpg\"",[432,854,855],{"class":437},") type(",[432,857,858],{"class":451},"\"image\u002Fjpeg\"",[432,860,861],{"class":437},")); }\n",[432,863,864],{"class":102,"line":458},[432,865,866],{"class":696},"\u002F* trade-off: image-set selects by type and density, not by layout width;\n",[432,868,869],{"class":102,"line":481},[432,870,871],{"class":696},"   small screens may still download a desktop-sized file. *\u002F\n",[418,873,875],{"id":874},"_4-keep-text-readable-without-depending-on-the-image","4. Keep text readable without depending on the image",[15,877,878],{},"Give the hero a background colour close to the image's dominant tone so text is readable from the first paint, before the image arrives.",[15,880,881],{},[64,882,71,885,71,888,71,891,71,893,71,896,71,898,71,903,71,908,71,912,71,915,71,919,71,923,71,926,71,930,71,934,71,937,71,941,71,945,71,950,71,954,71,958,71,963,71,965,71,968,71,972,71,975,71,978,71,981,71],{"viewBox":883,"width":67,"role":68,"ariaLabel":884,"style":70},"0 0 760 318","Steps to convert a CSS background hero into a fast LCP image.",[73,886],{"className":887,"x":77,"y":77,"width":67,"height":67,"fill":78},[76],[80,889,890],{},"Migrating a background hero",[84,892,884],{},[73,894],{"x":88,"y":88,"width":89,"height":895,"rx":91,"fill":92,"stroke":93,"style":94},"316",[96,897,890],{"x":98,"y":99,"fill":93,"style":100},[73,899],{"x":105,"y":318,"width":900,"height":901,"rx":902,"fill":165,"stroke":165,"style":166},"660.0","51.0","6",[96,904,907],{"x":351,"y":905,"fill":93,"style":906,"textAnchor":325},"77.0","font-size:13px;font-weight:700","Move the image into an img element",[96,909,911],{"x":351,"y":910,"fill":93,"style":361,"textAnchor":325},"94.0","position: absolute; object-fit: cover",[73,913],{"x":105,"y":914,"width":900,"height":901,"rx":902,"fill":165,"stroke":165,"style":166},"119.0",[96,916,918],{"x":351,"y":917,"fill":93,"style":906,"textAnchor":325},"140.0","Add srcset and sizes",[96,920,922],{"x":351,"y":921,"fill":93,"style":361,"textAnchor":325},"157.0","Right-sized files for every viewport",[73,924],{"x":105,"y":925,"width":900,"height":901,"rx":902,"fill":165,"stroke":165,"style":166},"182.0",[96,927,929],{"x":351,"y":928,"fill":93,"style":906,"textAnchor":325},"203.0","fetchpriority=high, no lazy loading",[96,931,933],{"x":351,"y":932,"fill":93,"style":361,"textAnchor":325},"220.0","The LCP image starts early and high",[73,935],{"x":105,"y":936,"width":900,"height":901,"rx":902,"fill":165,"stroke":165,"style":166},"245.0",[96,938,940],{"x":351,"y":939,"fill":93,"style":906,"textAnchor":325},"266.0","Dominant-colour background on the section",[96,942,944],{"x":351,"y":943,"fill":93,"style":361,"textAnchor":325},"283.0","Text readable before the image paints",[102,946],{"x1":947,"y1":128,"x2":947,"y2":948,"stroke":93,"strokeWidth":108,"style":949},"43.0","130.5","stroke-opacity:0.3",[102,951],{"x1":947,"y1":952,"x2":947,"y2":953,"stroke":93,"strokeWidth":108,"style":949},"158.5","193.5",[102,955],{"x1":947,"y1":956,"x2":947,"y2":957,"stroke":93,"strokeWidth":108,"style":949},"221.5","256.5",[959,960],"circle",{"cx":947,"cy":961,"r":962,"fill":165},"81.5","13",[96,964,88],{"x":947,"y":351,"fill":78,"style":906,"textAnchor":130},[959,966],{"cx":947,"cy":967,"r":962,"fill":165},"144.5",[96,969,971],{"x":947,"y":970,"fill":78,"style":906,"textAnchor":130},"149.0","2",[959,973],{"cx":947,"cy":974,"r":962,"fill":165},"207.5",[96,976,123],{"x":947,"y":977,"fill":78,"style":906,"textAnchor":130},"212.0",[959,979],{"cx":947,"cy":980,"r":962,"fill":165},"270.5",[96,982,110],{"x":947,"y":983,"fill":78,"style":906,"textAnchor":130},"275.0",[213,985,987],{"id":986},"verification","Verification",[15,989,990,991,993,994,997],{},"In a throttled trace, the hero request's initiator should be the parser (or a preload), starting within a few hundred milliseconds of the HTML, at High priority. The LCP element should be the ",[30,992,59],{},". In RUM, ",[30,995,996],{},"resourceLoadDelay"," for the hero should drop sharply, and LCP p75 should follow.",[213,999,1001],{"id":1000},"worked-example-a-travel-brands-homepage","Worked Example: A Travel Brand's Homepage",[15,1003,1004,1005,1007,1008,1010,1011,48,1013,48,1016,37,1019,1022],{},"A travel brand's homepage hero was a ",[30,1006,817],{}," set in a 160KB stylesheet, switching between three JPEGs via media queries. LCP on mobile was 3.8s; the hero request started at 1.4s. Converting to an ",[30,1009,59],{}," with AVIF ",[30,1012,47],{},[30,1014,1015],{},"sizes=\"100vw\"",[30,1017,1018],{},"fetchpriority=\"high\"",[30,1020,1021],{},"object-fit: cover",", plus a dominant-colour background on the section, moved the request start to 0.3s and LCP p75 to 2.1s. The visual design was unchanged.",[213,1024,1026],{"id":1025},"why-frameworks-and-page-builders-produce-background-heroes","Why Frameworks and Page Builders Produce Background Heroes",[15,1028,1029,1030,1032,1033,1036,1037,1039,1040,48,1042,1044],{},"Background heroes are common because they are easy to author: page builders expose \"background image\" as a section setting, CSS frameworks provide hero classes, and designers think in layers. When the hero is a component, change it once: make the component render an ",[30,1031,59],{}," (or ",[30,1034,1035],{},"\u003Cpicture>",") layer with ",[30,1038,1021],{}," under the content, with props for ",[30,1041,47],{},[30,1043,51],{}," and priority. Page-builder sites may need a custom block or a template override. The authoring experience stays the same; the output becomes discoverable.",[213,1046,1048],{"id":1047},"finding-every-background-hero-on-a-site","Finding Every Background Hero on a Site",[15,1050,1051,1052,1055,1056,1059,1060,48,1062,52,1065,1068,1069,1072,1073,1076],{},"Background heroes hide in stylesheets, CMS block settings and inline ",[30,1053,1054],{},"style"," attributes, so find them systematically. In RUM, the ",[30,1057,1058],{},"web-vitals"," attribution build reports the LCP element and its URL; group LCP entries where the element is not an ",[30,1061,68],{},[30,1063,1064],{},"picture",[30,1066,1067],{},"video"," but a URL is present — those are background-image LCPs. In the codebase, search CSS for ",[30,1070,1071],{},"background-image: url("," on selectors used in hero or banner components, and templates for inline ",[30,1074,1075],{},"style=\"background-image",". Prioritise by traffic: one shared hero component used on every landing page is worth more than a dozen one-off backgrounds on rarely visited pages.",[213,1078,1080],{"id":1079},"common-mistakes","Common Mistakes",[218,1082,1083,1089,1095,1105],{},[221,1084,1085,1088],{},[224,1086,1087],{},"Preloading one URL while CSS picks another."," Downloads twice.",[221,1090,1091,1094],{},[224,1092,1093],{},"Lazy-loading the replacement img."," Defeats the purpose.",[221,1096,1097,1104],{},[224,1098,1099,1100,1103],{},"Forgetting ",[30,1101,1102],{},"alt=\"\""," on decorative heroes."," Adds noise for screen readers.",[221,1106,1107,1114],{},[224,1108,1109,1110,1113],{},"Keeping parallax effects tied to ",[30,1111,1112],{},"background-attachment: fixed","."," They repaint on scroll; replicate with transforms on the img if needed.",[213,1116,1118],{"id":1117},"edge-cases","Edge Cases",[15,1120,1121,1124,1125,1127],{},[224,1122,1123],{},"CSS-in-JS heroes."," Background URLs in runtime-generated styles are discovered even later (after JavaScript runs); converting to ",[30,1126,59],{}," helps even more.",[15,1129,1130,1133,1134,33,1136,1139],{},[224,1131,1132],{},"Art direction."," Different crops per breakpoint need ",[30,1135,1035],{},[30,1137,1138],{},"\u003Csource media>",", which still preserves early discovery.",[15,1141,1142,1145,1146,1149],{},[224,1143,1144],{},"Gradient overlays."," Keep overlays as CSS on the content layer (",[30,1147,1148],{},"linear-gradient"," backgrounds), separate from the image.",[15,1151,1152,1155,1156,1158,1159,1113],{},[224,1153,1154],{},"Video backgrounds."," Apply the same idea with a poster ",[30,1157,59],{},"; see ",[19,1160,1162],{"href":1161},"\u002Fimage-media-optimization\u002Fvideo-performance-optimization\u002Fvideo-poster-images-and-lcp\u002F","video poster images and LCP",[213,1164,1166],{"id":1165},"faq","FAQ",[1168,1169,1172,1176],"details",{"className":1170},[1171],"faq-item",[1173,1174,1175],"summary",{},"Do CSS background images count for LCP?",[15,1177,1178],{},"Yes, in Chromium, background images on elements are LCP candidates sized by the element's visible area. That is why a large hero background is so often the LCP element.",[1168,1180,1182,1185],{"className":1181},[1171],[1173,1183,1184],{},"Is object-fit: cover visually identical to background-size: cover?",[15,1186,1187,1188,1191,1192,1195],{},"For a full-bleed image, yes — both scale the image to cover the box and crop overflow. ",[30,1189,1190],{},"object-position"," replaces ",[30,1193,1194],{},"background-position"," for controlling the focal point.",[1168,1197,1199,1202],{"className":1198},[1171],[1173,1200,1201],{},"Can 103 Early Hints help a background hero?",[15,1203,1204,1205,1207],{},"Yes, by preloading it before the HTML arrives, but the same URL-matching caveat applies. Converting to ",[30,1206,59],{}," is simpler and more robust.",[1168,1209,1211,1214],{"className":1210},[1171],[1173,1212,1213],{},"What about lazy-loading below-the-fold backgrounds?",[15,1215,1216,1217,1113],{},"CSS backgrounds are fetched when their element is styled, regardless of position; use a class added by an IntersectionObserver to defer them — see ",[19,1218,1220],{"href":1219},"\u002Fimage-media-optimization\u002Flazy-loading-images-without-hurting-lcp\u002Flazy-loading-css-background-images\u002F","lazy-loading CSS background images",[1168,1222,1224,1227],{"className":1223},[1171],[1173,1225,1226],{},"Does this affect SEO?",[15,1228,1229,1230,1232],{},"Content images in ",[30,1231,59],{}," with meaningful alt text are indexed in image search; decorative heroes with empty alt are not. Background images are not indexed as content images either, so the change is neutral or positive.",[1168,1234,1236,1239],{"className":1235},[1171],[1173,1237,1238],{},"How do I keep the focal point on mobile?",[15,1240,1241,1242,1244,1245,1247],{},"Use ",[30,1243,1190],{}," to set the focal point, or art-direct with ",[30,1246,1035],{}," and different crops per breakpoint.",[1168,1249,1251,1254],{"className":1250},[1171],[1173,1252,1253],{},"Will moving to img change how the hero looks in old browsers?",[15,1255,1256,1258],{},[30,1257,669],{}," is supported in all modern browsers. For very old browsers, the image still displays (stretched or letterboxed rather than cropped), which is an acceptable degradation for most sites.",[213,1260,1262],{"id":1261},"related","Related",[218,1264,1265,1272,1279],{},[221,1266,1267,1271],{},[19,1268,1270],{"href":1269},"\u002Fcore-web-vitals-measurement\u002Fmeasuring-lcp-with-chrome-devtools\u002Fdiagnosing-lcp-resource-load-delay\u002F","Diagnosing LCP resource load delay"," — the phase this fix shrinks.",[221,1273,1274,1278],{},[19,1275,1277],{"href":1276},"\u002Fimage-media-optimization\u002Fimage-cdns-and-fetchpriority\u002Fusing-fetchpriority-to-prioritize-the-lcp-image\u002F","Using fetchpriority to prioritize the LCP image"," — prioritising the new img.",[221,1280,1281,1285],{},[19,1282,1284],{"href":1283},"\u002Fimage-media-optimization\u002Fresponsive-images-with-srcset-and-sizes\u002Fart-direction-with-the-picture-element\u002F","Art direction with the picture element"," — per-breakpoint crops.",[1287,1288,1290],"script",{"type":1289},"application\u002Fld+json","\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"HowTo\",\n  \"name\": \"How to Fix LCP When the Hero Is a CSS Background Image\",\n  \"description\": \"Why heroes implemented as CSS backgrounds are slow LCP elements, and how to fix them with img elements, image-set and preloads.\",\n  \"step\": [\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 1,\n      \"name\": \"Replace the background with an img and object-fit\",\n      \"text\": \"Expected outcome: the preload scanner finds the image during HTML parsing; LCP typically improves by 500ms–1s on mobile.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 2,\n      \"name\": \"If the background must stay, preload it with the same responsive candidates\",\n      \"text\": \"If the background must stay, preload it with the same responsive candidates\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 3,\n      \"name\": \"Use image-set() for format and density at least\",\n      \"text\": \"If CSS backgrounds remain for secondary images, image-set() with type() lets browsers choose AVIF or WebP and density variants.\"\n    },\n    {\n      \"@type\": \"HowToStep\",\n      \"position\": 4,\n      \"name\": \"Keep text readable without depending on the image\",\n      \"text\": \"Give the hero a background colour close to the image's dominant tone so text is readable from the first paint, before the image arrives.\"\n    }\n  ]\n}\n",[1287,1292,1293],{"type":1289},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"TechArticle\",\n  \"headline\": \"How to Fix LCP When the Hero Is a CSS Background Image\",\n  \"description\": \"Why heroes implemented as CSS backgrounds are slow LCP elements, and how to fix them with img elements, image-set and preloads.\",\n  \"datePublished\": \"2026-10-06\",\n  \"dateModified\": \"2026-10-06\",\n  \"author\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"publisher\": {\n    \"@type\": \"Organization\",\n    \"name\": \"frontend-performance.com\"\n  },\n  \"mainEntityOfPage\": {\n    \"@type\": \"WebPage\",\n    \"@id\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002F\"\n  }\n}\n",[1287,1295,1296],{"type":1289},"\n{\n  \"@context\": \"https:\u002F\u002Fschema.org\",\n  \"@type\": \"BreadcrumbList\",\n  \"itemListElement\": [\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 1,\n      \"name\": \"Home\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 2,\n      \"name\": \"Image & Media Optimization\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 3,\n      \"name\": \"Image Decoding & Placeholders\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002F\"\n    },\n    {\n      \"@type\": \"ListItem\",\n      \"position\": 4,\n      \"name\": \"CSS Background Images as LCP Elements\",\n      \"item\": \"https:\u002F\u002Ffrontend-performance.com\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002F\"\n    }\n  ]\n}\n",[1054,1298,1299],{},"html pre.shiki code .saISM, html code.shiki .saISM{--shiki-default:#0E1116;--shiki-dark:#F0F3F6;--shiki-light:#0E1116}html pre.shiki code .sZBmE, html code.shiki .sZBmE{--shiki-default:#024C1A;--shiki-dark:#72F088;--shiki-light:#024C1A}html pre.shiki code .sPXB4, html code.shiki .sPXB4{--shiki-default:#023B95;--shiki-dark:#91CBFF;--shiki-light:#023B95}html pre.shiki code .sZ8jY, html code.shiki .sZ8jY{--shiki-default:#032563;--shiki-dark:#ADDCFF;--shiki-light:#032563}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 .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html pre.shiki code .sPARh, html code.shiki .sPARh{--shiki-default:#A0111F;--shiki-dark:#FF9492;--shiki-light:#A0111F}html pre.shiki code .sjfSM, html code.shiki .sjfSM{--shiki-default:#66707B;--shiki-dark:#BDC4CC;--shiki-light:#66707B}html pre.shiki code .sQw3B, html code.shiki .sQw3B{--shiki-default:#702C00;--shiki-dark:#FFB757;--shiki-light:#702C00}",{"title":428,"searchDepth":458,"depth":458,"links":1301},[1302,1303,1304,1310,1311,1312,1313,1314,1315,1316,1317],{"id":215,"depth":458,"text":216},{"id":259,"depth":458,"text":260},{"id":415,"depth":458,"text":416,"children":1305},[1306,1307,1308,1309],{"id":420,"depth":481,"text":421},{"id":708,"depth":481,"text":709},{"id":792,"depth":481,"text":793},{"id":874,"depth":481,"text":875},{"id":986,"depth":458,"text":987},{"id":1000,"depth":458,"text":1001},{"id":1025,"depth":458,"text":1026},{"id":1047,"depth":458,"text":1048},{"id":1079,"depth":458,"text":1080},{"id":1117,"depth":458,"text":1118},{"id":1165,"depth":458,"text":1166},{"id":1261,"depth":458,"text":1262},"Why heroes implemented as CSS backgrounds are slow LCP elements, and how to fix them with img elements, image-set and preloads.","md",{"slug":1321,"type":1322,"breadcrumb":1323,"datePublished":1330,"dateModified":1330},"css-background-images-as-lcp-elements","article",[1324,1326,1327,1328],{"name":1325,"url":280},"Home",{"name":22,"url":21},{"name":27,"url":26},{"name":5,"url":1329},"\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002F","2026-10-06",true,"\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements",{"title":1334,"description":1335},"Fixing LCP When the Hero Is a CSS Background Image","CSS background-image heroes are discovered late, cannot use srcset or fetchpriority easily, and often fail LCP. Move them to img or preload them correctly.","image-media-optimization\u002Fimage-decoding-and-placeholders\u002Fcss-background-images-as-lcp-elements\u002Findex","PBTzH8-edz231JvgO5cy8_9T-vHzEdQhfWeGyFX5p_g",[1339,1343],{"title":1340,"path":1341,"stem":1342,"children":-1},"Avoiding Main-Thread Image Decode Jank","\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Favoiding-main-thread-image-decode-jank","image-media-optimization\u002Fimage-decoding-and-placeholders\u002Favoiding-main-thread-image-decode-jank\u002Findex",{"title":1344,"path":1345,"stem":1346,"children":-1},"LQIP vs BlurHash Placeholders","\u002Fimage-media-optimization\u002Fimage-decoding-and-placeholders\u002Flqip-vs-blurhash-placeholders","image-media-optimization\u002Fimage-decoding-and-placeholders\u002Flqip-vs-blurhash-placeholders\u002Findex",1791308077257]