Problem: Fullscreen Section with Image Background
Problem description
Given an HTML file with a <section class="fullscreen-section">, write CSS so the section covers the full viewport and displays a background image (use background-image: url('https://raw.githubusercontent.com/Educative-Content/css-design-patterns/26c68d4d2c4a7833aabb68f4e9c2994c11642b80/Banner.svg')). The image should be centered and cover the area, with the section’s content also centered.
Goal
Show a fullscreen background image with centered content.
Constraints
Do not use JavaScript.
Use CSS only.
Do not change the HTML.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.
Problem: Fullscreen Section with Image Background
Problem description
Given an HTML file with a <section class="fullscreen-section">, write CSS so the section covers the full viewport and displays a background image (use background-image: url('https://raw.githubusercontent.com/Educative-Content/css-design-patterns/26c68d4d2c4a7833aabb68f4e9c2994c11642b80/Banner.svg')). The image should be centered and cover the area, with the section’s content also centered.
Goal
Show a fullscreen background image with centered content.
Constraints
Do not use JavaScript.
Use CSS only.
Do not change the HTML.
Sample visual output
Here’s what the output would look like:
Good luck trying the problem! If you’re unsure how to proceed, check the Solution.