How to insert the cap on the website

How to insert the cap on the website

"Cap", or the top part of the web page, does your website unique, allows it to differ from others and to reflect specifics of your online project. By means of the original and qualitatively made cap it is possible to decorate and improve any web page and to make a cap most, you need to learn imposition of this web element. Instruction 1. If you want the website to have the static invariable sizes, you will need to create a static cap which does not change depending on screen width change. Determine width and height of a cap (for example, 996х230) and insert the background picture into the top block, using the following CSS code where header-1.jpg is background изображение:#header { background: #a6b7d3 url (img/header-1.jpg) No-repeat; width: 996px; height: 230px; } the HTML-code of a cap of this type will look so:
2. If the website is constructed so that its sizes adapt to screen width, the cap should be imposed taking into account all main resolutions of monitors. The maximum width of such cap should be 1920 pixels. For an insert of such cap use CSS-код:#header {background: #a6b7d3 url (img/header-2.jpg) No-repeat of Center; height: 250px; } the HTML-code is in this case similar previous. The CSS code is changed in some parameters – now in it there was an attribute of alignment of the image of the cap allowing to adjust a background to any screen width. 3. Also you can impose more difficult option of a cap cut on several background blocks which will change the situation depending on the viewport size. The CSS code of such cap is more difficult and extensive, and means repetitions of several elements of a background according to the floating sizes of a window of the browser in which can browse your website.

Author: «MirrorInfo» Dream Team


Print