--- id: 5f35e5c44359872a137bd98f title: Step 29 challengeType: 0 dashedName: step-29 --- # --description-- Since the cafe's main product for sale is coffee, you could use an image of coffee beans for the background of the page. Delete the comment and its contents inside the `body` type selector. Now add a `background-image` property and set its value to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. # --hints-- You should remove the commented out `background-color` property. ```js assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)) ``` Your `body` selector should not have any comments. ```js assert(!code.match(/body\s*{\s*\/\*/i)); ``` You should set the `background-image` property to `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`. ```js const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`) assert(hasBackground) ``` Your `body` element should have the coffee beans background image. ```js const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image'); console.log(bodyBackground); assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`); ``` # --seed-- ## --seed-contents-- ```html Cafe Menu ``` ```css body { --fcc-editable-region-- /* background-color: burlywood; */ --fcc-editable-region-- } h1, h2, p { text-align: center; } .menu { width: 80%; background-color: burlywood; margin-left: auto; margin-right: auto; } ```