Our next task is to design the basic appearance and position of the header. The content (title, navigation, search box) will come later.
Use the following definitions to design the header:
Background image: flowers.jpg, no repetition
The background image should be scaled in proportion and fitted into the header so that it always covers the whole area. If necessary, parts of the image may be cut off at the top and bottom.
Test the result by resizing the browser window. You will notice that the header is slightly too high when the width of the window is smaller than approx. 750px. In this case, the white semi-circle in the lower part of the background image is also visible. From this width on we want to reduce the height of the header to 15rem.
Insert a new breakpoint after the selector #header, this time for the max-width: