Can someone look at my attached CSS code and tell me how to get the header and footer images to fit the page?body {.flex-container { display: flex; background-color: black;}.flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 30px;}.header-image { width: auto; height: auto;}.footer { text-align: center; background-color: #f0f0f0; padding: 20px;} .footer img { max-width: %; height: auto; } **Image Description for Educational Website****Links Section:**- [Link to Page 1]- [Link to Page 2]**Text Section:***Left Column:*"An country demesne message it. Bachelor domestic extended doubtful as concerns at. Morning prudent removal an letters by. On could my in order never it. Or excited certain sixteen it to parties colonel. Depending conveying direction has led immediate. Law gate her well bed life feet seen rent. On nature or no except it sussex."*Right Column:*"Warmly little before cousin sussex entire men set. Blessing it ladyship on sensible judgment settling outweigh. Worse linen an of civil jokes leave offer. Parties all clothes removal cheered calling prudent her. And residence for met the estimable disposing. Mean if he they been no hold mr. Is at much do made took held help. Latter person am secure of estate genius at."**Top Image:**The top image displays LEGO figures resembling characters from a famous sci-fi series, set against a desert backdrop with a large, dome-like structure in the sky. One figure is riding a green creature, while others are standing beside it, holding weapons.**Bottom Image:**The bottom image shows LEGO versions of iconic characters from the same sci-fi series, set against a starry space background. These figures are depicted with exaggerated proportions, typical of LEGO mini-figures, holding weapons like lightsabers.These images and text may serve to engage visitors with visual and narrative elements, possibly drawing references from popular culture to enhance the educational content. This screenshot displays a CSS stylesheet intended for styling elements on a webpage. Below is a detailed transcription and explanation suitable for an educational context:### CSS Code Explanation1. **Body and Flex Container:** ```css body { .flex-container { display: flex; background-color: black; } } ``` - The `body` element contains a class `.flex-container`, which is styled with Flexbox for layout purposes. - The `background-color` is set to black, making the entire container's background black.2. **Nested Flex Container Div:** ```css .flex-container > div { background-color: white; width: 50%; margin: 10px; padding: 10px; font-size: 30px; } ``` - This targets `div` elements directly within a `.flex-container`. - The `background-color` is white, differentiating it from the black parent container. - The `width` is set to 50%, providing a responsive layout. - `margin` and `padding` of 10px create spacing around and within the box. - The `font-size` of 30px ensures larger text within these divs.3. **Header Image:** ```css .header-image { width: auto; height: auto; } ``` - The `.header-image` class allows images to maintain their natural size by setting `width` and `height` to `auto`.4. **Footer:** ```css .footer { text-align: center; background-color: #f0f0f0; padding: 20px; } ``` - Footer is aligned center with `text-align: center`. - Has a light gray background (`#f0f0f0`) and `padding` of 20px for internal spacing.5. **Footer Image:** ```css .footer img { max-width: ; height: auto; } ``` - Intended to ensure footer images resize according to their natural aspect ratio. The `max-width` property is incomplete, awaiting specific value assignment. ### Educational ContextThis CSS code is part of the fundamental styling done in web development to enhance webpage structure, layout, and design. Understanding these basic CSS properties is crucial for

In this question we have to understand about the given CSS where we need to fix the issue to get the…

Answered: Can someone look at my attached CSS…

7th Edition

ISBN:9780078022159

Author:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Publisher:Abraham Silberschatz Professor, Henry F. Korth, S. Sudarshan

Chapter1: Introduction

Section: Chapter Questions

Problem 1PE