Today, quality websites need to look good on a wide variety of screen resolutions. To do this, it is necessary that the page design elements are scaled within wide limits. This primarily applies to the site header.
It is necessary
the ability to change the markup of the pages of the resource
Instructions
Step 1
Using a suitable template is a universal solution that allows you not only to stretch, but also to compress the header, as well as other design elements. You can use standard templates provided by free hosting, or freely distributed on the Internet. Any template requires revision and adaptation. It is advisable to change all the graphics to make the site unique. Never use a standard layout. Leave the page markup - its "skeleton", and "meat" - the content and design elements, replace with your own. Thoughtful use of templates allows you to save the developer's time, which can be spent on filling the site with information, or expanding the capabilities of the service.
Step 2
If the page is already typeset, you can try to stretch the header yourself. This requires basic knowledge of HTML and CSS. If the site header is designed as a single graphic file, you can try compressing and stretching its image depending on the width of the window. This method works well if the scaling factor is small. If it exceeds the image width by a quarter or more, the picture quality will suffer. The individual pixels forming the image will become visible.
Step 3
In order for the image to remain of high quality, but at the same time occupy all the space allotted for it, it is necessary to divide it into separate parts. This is usually the right side, left and center. It is desirable for the image to have a single-color background with which it was possible to fill in the gaps between the parts of the header. The two pictures that form the edges of the header must be attached to the left and right sides of the container. Wrap the central image in a tag. Pave the remaining space with a one-pixel wide background image.
Step 4
Another easy way is to create an image that is inherently larger than the largest screen. The image is set as the background in the center of the header section. The downside is the large "weight" of the image, and as a result - the long loading time. Combining the above methods avoids most of the negative effects.
