Used css flexbox

Hi, Set background-repeat: no repeat; to avoid the repetition, and add a background too using this: background: hsl(var(--pale-blue)) url("images/pattern-background-desktop.svg");

All the Best !

Try preventing repetition by using:

Background repeat: no repeat;

when styling the background image in the body

Hi Tarun, It looks like you are trying to position your elements using 'flex' and 'position: absolute'- In the body selector, you have correctly used flex, this centers the two elements( the card and the attributes element) in the center of the page. Just add 'height:100vh; There is no need to try and center the card again using the position, top, left, transform-translation. For the image, as already stated, use the background-repeat, no-repeat, add background-size:100%, and background-position: top.

Don't forget to add the @media... to make your page responsive.

I am just starting this journey and this is my first challenge, so I hope I have not added any confusion. Best of luck, Maura

Hello, my tip for this one and future. Images should have alternate text. <img alt="person listening to music" src"..." >

Alternate text can be empty <img alt=""......> for decorative elements like icon-music in this challenge.

Article about alternate text: https://dequeuniversity.com/rules/axe/4.3/image-alt?application=axeAPI