The "header", or the top of the web page, makes your site unique, allows it to differ from others and reflect the specifics of your Internet project. With the help of an original and well-made header, you can decorate and refine any web page, and in order to make the header yourself, you need to learn how to layout this web element.
Instructions
Step 1
If you want the site to have static constant dimensions, you will need to create a static header that does not change depending on the change in the width of the screen. Determine the width and height of the header (for example, 996x230) and insert a background image into the top block using the following CSS code, where header-1.jpg
background: # a6b7d3 url (img / header-1.jpg) no-repeat;
width: 996px;
height: 230px;
} The HTML code for a header of this type will look like this:
Step 2
If the site is built in such a way that its dimensions are adjusted to the width of the screen, the header should be typeset taking into account all major monitor resolutions. The maximum width of such a header should be 1920 pixels. To insert such a header, use the CSS code: #header {background: # a6b7d3 url (img / header-2.jpg) no-repeat center; height: 250px;} The HTML code in this case is similar to the previous one. The CSS code has been changed in some parameters - now it has an attribute for centering the header image, which allows it to fit the background to any screen width.
Step 3
You can also create a more complex header, cut into several background blocks, which will change their position depending on the size of the viewport. The CSS for such a header is more complex and extensive, and involves repeating several background elements to match the floating dimensions of the browser window in which your site can be viewed.
