(The graidents are the white circles in the background) I\'ve been stuck on #4 f

Question

(The graidents are the white circles in the background)

I've been stuck on #4 for a super long time. I think I'm typing the gradients in wrong. Any suggestions?

4. Andrew wants the web page body background to combine several images and effects. Go to the Body Styles section and create a style rule for the body element that adds the following backgrounds in the order listed: a. A background containing the night sky image, sd_back2.png b. A radial gradient circle with a size extending to the closest corner and placed at the coordinates (40%, 70%) containing the color white stopping at 1 5% of the gradient and the C. A radial gradient circle also extending to the closest corner and placed at (80%, 40%) d. A radial gradient extending to the closest side and placed at (10%, 20%) containing the color e. A radial gradient with a size of 5% in the horizontal and vertical directions placed at (90%, 10%) f. The background color color value rgba(151, 1 51,1 51, 0.5) stopping at 50% containing the color white stopping at 15% and followed by the color rgba(0, 0, 0, 0) at 30% white stopping at 20% and followed by the color rgba(0, 0, 0, 0) stopping at 45% with the color white stopping at 1 5% and followed by the color rgba(0, 0, 0, 0) stopping at 40% and radial gradients lor rgb(151, 151, 151) set as a base for the preceding background image lace hox shados on the left and right

Explanation / Answer

A)

Insert Night sky image using <img src="sd_back2.png"> .

B) To insert Radial gradient use the following code in the body tag

background-image: radial-gradient(circle closest-corner at 40% 70% , #ffffff 15%, rgba(151, 151, 151, 0.5) 50%);

Explanation: There are two types of radial gradient: 1 Circle 2 Ellipse

   So we have indicate that we are using the Circle shape(as asked in the question)

   Then we have written" closest-corner " as we want our circular shape to be extended towards its closest corner We have given the starting point of the radial gradient as (40%,70%) After that we are using hexadecimal code for the color "white" followed by 15%(as given in the question). Then we wrote the rgba value followed by 50%.

C) Use the following code for step C

background-image: radial-gradient(circle closest-corner at 80% 40% , #ffffff 15%, rgba(0, 0, 0, 0) 30%);

Explanation:

   In this step we have changed the origin of radial gradient to (80%,40%), and the value of rgba is also changed according to the question to(0,0,0,0).

D Use the following code for step D

background-image: radial-gradient(circle closest-side at 10% 20% , #ffffff 20%, rgba(0, 0, 0, 0) 45%);

Explanation:

   In this we have use "closest-side" with the origin at (10%,20%) White color is stopped at 20% and rgba(0,0,0,0) is stopped at 45%.

Related Questions

Navigate

• Browse (All)
• Browse #
• Subjects

---

---

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.