”, and how different designs apply this term and technology. Now that we've seen some examples of implementations in action, let's try designing our own responsive website!

In our today's tutorial, we will tell you about developing the structure of the home page, and adding media queries functionality to it, which will help us speed up the loading of the website, make the navigation process easier for users, and also, importantly, help us maintain a neat and attractive design when visiting site from different devices, such as mobile devices, different operating systems and at different screen resolutions.

Before we jump into the HTML coding process, let's first handle the "viewport" meta tag. Apple iPhone and iPod Touch devices are programmed to automatically scale websites in the iOS version of the Safari browser.

This technology makes it possible to display the entire website on the screen, but it will be in a smaller form. Since we're going to use media queries specifically to adapt the design to different screen sizes, we don't need the automatic scaling provided by Apple devices. The viewport meta tag will also allow you to set options for how much the user can zoom in or out of your site. But the main thing here is the ability to set the initial scale in which the site will be opened. Specifically, in our guide today, we recommend that you display your site without scaling at all.

When you start working with HTML, you will probably notice that the document consists of quite simple HTML5 elements, with the exception of the viewport meta tag and our div with the main background.

Once we've finished working on the HTML, let's create a Cascading Style Sheets (CSS) file. We recommend that you use a CSS reset to prevent unwanted margins, padding, or borders. Just use this code snippet in your CSS files.

Body, div, img, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dd, dt,
blockquote, fieldset, legend, label, input, textarea (
margin: 0; padding: 0; border: 0;
}
sh1, h2, h3, h4, h5, h6, p (
margin: 0 0 1em 0;
}
h1(font-size: 200%;)
h2(font-size: 170%;)
h3(font-size: 160%;)
h4(font-size: 140%;)
h5(font-size: 120%;)
Now, since we are developing from scratch, you can open the body tag and add styles there. We set the background color to white and the text color to dark gray. The combination of black text on a white background often creates a feeling of excessive contrast, and for many visitors it causes dazzle in the eyes.

Html, body ( height: 100%; )
Also note that font size is in em units, and this is one of the most important elements when developing a responsive design, since the size of this unit is based on a percentage. If you set the font size in pixel dimensions, it will not match the rest of the design if the site is scaled down to display correctly on smaller screens. The letters will either take up the entire screen or overlap each other, and this is completely unsightly.

We can also add styling to our .homeContent class and to the #mainBG id. We defined the page height, set the width to 100%, and centered the content within the .homeContent class. ID #mainBG will be responsible for the background image, which in our example is a stock image obtained from the author. We also set the background-size to cover, which will stretch the image to fill the entire screen and allow our background image to maintain the correct proportions when displayed on higher resolution screens. The size of our background image "big.jpg" is 1920x1189.

HomeContent (
height: 100%;
width: 100%;
position: relative;
margin: 0 auto;
}

#mainBG (
background: url(images/big.jpg) no-repeat scroll;
background-position:center;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
Now that we're done with the basics, let's implement media queries. The first two queries will be for tablet PCs. Using these requests we will be able to load a medium-sized background image, since loading a large image can take both time and bandwidth, and if we do not need an image that is twice the size of the screen, then we don’t need to load it. The size of our background image "medium.jpg" is 1024x770 pixels. We also need to position it in such a way that it displays correctly on all types of tablets.

@media only screen and (max-width: 1024px) and (orientation:landscape) (
#mainBG ( background: url(images/medium.jpg) 50% 0 no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) (
#mainBG ( background: url(images/medium.jpg) 50% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
The last query will be for mobile phones. Through this request we will display our background image called “small.jpg”, the dimensions of which are 767x475.

@media only screen and (min-width: 0px) and (max-width: 767px) (
#mainBG ( background: url(images/small.jpg) 75% 80% no-repeat scroll !important;
background-position:center;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
}
}
Preview the work done in the browser. Open your masterpiece first in full screen, and then gradually reduce the viewing window. You will see the image immediately begin to change in size. Try to determine in what position media queries are activated and the image size changes.

From the author: In this tutorial, we'll look at a simple technique for creating a background image that will stretch across the full width of the browser's viewport. To do this, we need the background-size CSS property; No JavaScript needed.

Examples of responsive integer background images

Nowadays, it has become quite popular to use a huge photo as a background, which takes up the entire web page. Here are examples of several sites that have responsive whole background images:

If you would like to achieve a similar result in your next web project, then this article is what you need.

Basic principles

Here is our action plan.

Use the background-size property to completely fill the viewport

The background-size CSS property is set to cover. The cover value tells the browser to automatically and proportionally scale the background image's width and height so that it is always equal to or greater than the viewport's width/height.

Use a media query to handle small background images for mobile devices

To improve page loading speed on small screens, we'll use a media query to process a smaller version of our background image. It's not obligatory. This technique will work without it. But why is using a small background image for mobile devices a good idea?

The image I used in the demo has a resolution of 5500x3600px. This resolution is sufficient for most widescreen computer monitors currently available on the market. But for this you will have to process a file of 1.7MB in size.

This huge extra workload just for the sake of posting a background photo won't do any good anyway. And, of course, this will have an exceptionally bad impact on connections using the mobile Internet. This resolution is also excessive for devices with small screens (we’ll look at this in more detail later). Let's look at the whole process.

HTML

All you need for markup is this:

We're going to assign a background image to the body element so that the image always fills the entire browser viewport.

However, this technique will also work for any block element (such as a div or form). If your block element's width and height are fluid, then the background image will always scale to fill the entire container.

CSS

Set the following styles for the body element:

body ( /* Path to the image */ background-image: url(images/background-photo.jpg); /* The background image is always centered vertically and horizontally */ background-position: center center; /* The background image is not repeated * / background-repeat: no-repeat; /* The background image is fixed in the viewport, so it doesn't move when the content's height is greater than the image's height */ background-attachment: fixed; /* This is what allows the background image to adjust to the size of the container */ background-size: cover; /* Sets the background color that will be displayed while the background image is loading */ background-color: #464646; )

body( /* Path to image */ background - image : url (images / background - photo . jpg ) ; /* Background image is always centered vertically and horizontally */ /* Background image is not repeated */ background - repeat : no - repeat ; /* The background image is fixed in the viewport so it doesn't move when the content's height is greater than the image's height */ /* This is what allows the background image to adjust to the size of the container */ background - size : cover ; /* Sets the background color that will be displayed while the background image is loading */ background - color : #464646;

The most important property/value pair to pay attention to is:

background-size: cover;

background - size : cover ;

This is where the magic begins. This property/value pair tells the browser to scale the background image proportionally, i.e. so that its width and height are equal to or greater than the width/height of the element (in our case, the body element).

However, there is one problem with this property/value pair: if the background image is smaller than the body element - which will happen on high-resolution screens and/or when you have a huge amount of content on the page - the browser will inevitably scale the image up. And as we know, when we increase the size of a bitmap image, the quality of the image decreases (in other words, pixilation occurs).

Increasing the image size from its original size affects the image quality. Keep this in mind when choosing the right image. The demo uses a huge 5500x3600px photo for widescreen monitors, so it would require a very large screen for the quality to suffer. Let's move on. To ensure that the background image is always centered in the viewport, we will write:

background-position: center center;

background - position : center center ;

This entry places the background on the coordinate axis in the center of the viewport. Next we need to define what happens when the height of the content exceeds the visible height of the viewport. When this happens, a scroll bar appears.

In this case, we need to ensure that the background image remains in its original position even when the user scrolls down the page. In this situation, the image will either simply end when scrolling, or will move as the scroll progresses (which can be very distracting to the user). To fix the background, we set the background-attachment property to fixed.

background-attachment: fixed;

background - attachment: fixed;

In the demo, I added a "load content" option so you can see what happens when a scrollbar appears in the browser when the background-attachment property is set to fixed. You can also download the demo and play with the positioning property values ​​(such as background-attachment and background-position) to see how it affects page scrolling and the background image. The rest of the property values ​​are pretty self-explanatory.

CSS Shorthand

I've detailed the background properties to make them easier to explain. The abbreviated form will also be equivalent:

body ( background: url(background-photo.jpg) center center cover no-repeat fixed; )

body( background : url (background - photo . jpg ) center center cover no - repeat fixed ;

All you need to do is change the url value to point to your background image.

Optional: Media query for small screens

For smaller screens, I used Photoshop to proportionally scale down the original background image to 768x505px, and I also used Smush.it to reduce the size a little more. Thanks to this, the file size decreased from 1741KB to 114KB. Those. image size reduced by 93%.

Please don't get me wrong, 114KB is still quite a lot for a purely aesthetic design element. Considering the additional load of 114KB, I would only use such a file if I saw an opportunity to significantly improve the user experience (UX) of the site, because... At the moment, a significant share of Internet traffic comes from the operation of mobile devices background - image: url (images / background - photo - mobile - devices. jpg);

The media query has a width limit of max-width: 767px, which means that if the browser viewport is larger than 767px, a large background image will be loaded.

The downside to using this media query is that if you change the width of your browser window from, for example, 1200px to 640px (or vice versa), you will immediately see the moment a small or large background image loads.

Additionally, because some small screen devices can display more pixels—for example, the iPhone 5 with retina display is capable of displaying a resolution of 1136x640px—the small background image will be pixelated.

Summarizing

You can view a more current version of the source code in this tutorial on GitHub. I can only warn you of one thing: please use this technique with caution because large files can seriously damage the UX, especially if the end user is using a slow and unreliable Internet connection. This is another reason why you should choose a suitable background color so that the user can read the content while the background image is loading.

I already wrote that such an element on the site as a background image is now common. Most often it is found on sales pages, where it is located in the header. It looks very beautiful, if, of course, it is of very high quality and fits well with the theme of the site. By the way, as a bonus in this article, at the end I will tell you where to get high-quality images for free and at the same time they will be made by professionals.

Here's what else there is about responsive website images:

If you want to make your background truly unique, then I recommend the following article:

See how this looks in a real example:

Download

Below you can see how the background image adapts to different devices:

How to make a responsive background image for a website?

HTML part

For this example we will be setting a background image for body, but you can do it in a similar way for any block on the page. Therefore, there is nothing supernatural in the HTML structure:

CSS part

All that remains is to set the necessary properties in the style file to make what we intended - an adaptive background image for the site:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

body( /* Path to the image relative to this file */ background-image : url ( ../images/background-photo.jpg) ; /* Always center the image vertically and horizontally */ background-position : center center ; /* Disable image repeating */ background-repeat : no-repeat ; /* Fix the image - it remains in place when scrolling the window */ background-attachment: fixed; /* The image will be scaled depending on the size of the container */ background-size : cover; /* Image background color that will be shown until the image loads */ background-color : #464646 ; /* Equivalent shorthand * background: url(background-photo.jpg) center center cover no-repeat fixed; */ }

All lines are commented, so I don't think there will be any problems with this code.

But that's not all the code. Since mobile Internet speeds are limited, we need to optimize the page for loading speed. There is an image on the page that is quite large. But you can make sure that a different image, which is smaller, is loaded for mobile devices.

We will use Media Queries, which allow you to set individual properties for an arbitrary screen width:

What have we done? If the width of the browser window on the device is less than 767 pixels, then we will use a different image. Everything is very simple.

One of the main tasks in adaptive layout is scaling images (including background ones) so that they are displayed correctly on devices with different screen resolutions.

With pictures in the tag img It's simple: when you set the width as a percentage, the height will be scaled automatically. This method cannot be applied to background images.

This trick is to set the padding percentage value ( padding) element. The method was first published in an old blog article A List Apart, but it still works well.

Let's say you have a background image of 800 by 450 pixels, and you want to make it a background with a fixed aspect ratio of 16:9. The code below uses for indentation px, but everything will work with em. There is also an HTML5 figure element; to make it work correctly in older browsers, you can use HTML5 shiv .

Div.column ( max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ )

Adding a background

The resulting element scales as expected, but if you add a background image, the result will not be very good. Using the attribute background-size: cover. Unfortunately, this method does not work in Internet Explorer 8. To solve this problem, we position the background using background-position. The background image must be at least as wide as max-width element. Otherwise, the picture will be cropped.

Div.column ( /* The background image must be 800px wide */ max-width: 800px; ) figure.fixedratio ( padding-top: 56.25%; /* 450px/800px = 0.5625 */ background-image: url(http: //voormedia.com/examples/north-sea-regatta.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/ 8 */ )

Let's say you have a large background image that looks great on desktop. But on a mobile device it will be too small, so the right solution would be to reduce the width of the background.

For example, an image with a width of 800 by 200 pixels (4:1) on a small screen, with a width of 300 pixels, should be reduced to 150 pixels (2:1). Let's count the attributes height And padding-top:

The figure shows the aspect ratio of the background image at different widths. The slope of the graph corresponds to the attribute padding-top, start height - to the attribute height. The resulting code is:

Div.column ( /* The background image must be 800px wide */ max-width: 800px; ) figure.fluidratio ( padding-top: 10%; /* slope */ height: 120px; /* start height */ background- image: url(http://voormedia.com/examples/amsterdam.jpg); background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ )

Using SCSS for Calculation

Attributes padding-top and height can be calculated automatically using preprocessors such as SCSS. An example of this:

/* Calculate fluid ratio based on two dimensions (width/height) */ @mixin fluid-ratio($large-size, $small-size) ( $width-large: nth($large-size, 1); $width -small: nth($small-size, 1); $height-large: nth($large-size, 2); $height-small: nth($small-size, 2); $slope: ($height- large - $height-small) / ($width-large - $width-small); $height: $height-small - $width-small * $slope; padding-top: $slope * 100%; height: $height ; background-size: cover; -moz-background-size: cover; /* Firefox 3.6 */ background-position: center; /* Internet Explorer 7/8 */ ) figure.fluidratio ( /* This element will have fluid ratio from 4:1 at 800px to 2:1 at 300px. */ @include fluid-ratio(800px 200px, 300px 150px); background-image: url(http://voormedia.com/examples/amsterdam.jpg); )

If you adapt the background on the site using CSS styles, then its function will be that it will be viewed entirely on the monitor and JavaScript is not needed here. Since, according to statistics, on widely viewed and popular Internet resources, where the background image is used at full width.

You also need to take into account design details when adapting, these are buttons or icons that will not be displayed correctly on mobile devices and are designed for this purpose, which will be removed in size, and you can build the design as you need, and to put it correctly, for the convenience of the user who can be accessed from mobile devices, and everything is already formed there as needed.

To begin with, we will need two background images, the first image must be at least widescreen 1920*1080, with this we achieve coverage of the entire viewing area on most widescreen monitors currently produced.

The second image will be a smaller version of the first background image, but only for mobile devices. Let's say these images will have resolutions of 1920*1080 and 768*480.
The second image is to reduce page load time on small screen resolutions, and for this we will use a media query to get a smaller version of the background image, although everything works fine without it.
I won’t teach you how to edit background images and reduce their weight; I’m sure everyone has bookmarks with such services or knows how to work with Photoshop.

Well, the code itself, the source code was downloaded from a foreign site, but it’s not difficult to understand even though the comments are in English, I didn’t erase them to make it clearer:
CSS:

200?"200px":""+(this.scrollHeight+5)+"px");">
body(
/* Location of the image */
background-image: url(images/background-photo.jpg);

/* Image is centered vertically and horizontally at all times */
background-position: center center;

/* Image doesn't repeat */
background-repeat: no-repeat;

/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;

/* This is what makes the background image rescale based on its container"s size */
background-size: cover;

/* Pick a solid background color that will be displayed while the background image is loading */
background-color:#464646;

/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}

/* For mobile devices */
@media only screen and (max-width: 767px) (
body(
/* The file size of this background image is 93% smaller
* to improve page load speed on mobile internet connections */
background-image: url(images/background-photo-mobile-devices.jpg);
}
}