Learn Challenge: Implement Decorative Effects in CSS | Adding Decorative Effects with CSS

Task

Let's practice and enhance the visual appeal of the webpage. The task includes:

Add a shadow to the div element with the class name card. The specified shadow values are rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Add a background image to the div element with the class name card. The image link is provided: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Center the background image within the card.

index.html

index.css

To add a shadow to an element, utilize the box-shadow property with the specified value. In this case, the value is rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For setting an image as a background using the background-image property, employ the url("correct path") syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
To determine the position of the background image, use the background-position property. In this scenario, set the value to center for the property.

index.html

index.css

Note

You have completed the "CSS Fundamentals" course and mastered the basics of web styling. Next, elevate your design skills with "Advanced CSS Techniques", or begin coding interactivity in "Introduction to JavaScript". Your journey as a web developer continues!

1. Which property adds shadow around an element's box?

2. How can you add an image as the background of an element?

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 6

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

How do I write the CSS code to add the shadow and background image to the card?

Can you explain how the box-shadow and background properties work together?

What other properties can I use to further style the card?

Awesome!

Completion rate improved to 2.56

Swipe to show menu

Task

Let's practice and enhance the visual appeal of the webpage. The task includes:

Add a shadow to the div element with the class name card. The specified shadow values are rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Add a background image to the div element with the class name card. The image link is provided: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Center the background image within the card.

index.html

index.css

To add a shadow to an element, utilize the box-shadow property with the specified value. In this case, the value is rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For setting an image as a background using the background-image property, employ the url("correct path") syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
To determine the position of the background image, use the background-position property. In this scenario, set the value to center for the property.

index.html

index.css

Note

You have completed the "CSS Fundamentals" course and mastered the basics of web styling. Next, elevate your design skills with "Advanced CSS Techniques", or begin coding interactivity in "Introduction to JavaScript". Your journey as a web developer continues!

1. Which property adds shadow around an element's box?

2. How can you add an image as the background of an element?

Everything was clear?

Thanks for your feedback!

Section 5. Chapter 6