You can see the styles that control the background image in style. This means that the same image background is being used for all screen sizes. Resize the browser window and notice that the Network Log isn't showing any new requests being made by the page. You'll see that the only image that's being requested is background-desktop.jpg, which has a size of 1006KB:
Understand responsive background images #įirst, analyze the network traffic of the unoptimized demo: You'll just need to map the Chrome DevTools screenshots in this guide back to the relevant features in your browser of choice. You can use another browser's DevTools instead if you prefer. This guide assumes that you're familiar with Chrome DevTools.
CSS BACKGROUND RESPONSIVE RESIZE HOW TO
This guide shows you how to use media queries to send images that are only as large as they need to be, a technique commonly known as responsive images. For desktop and responsive CSS: background: url (background.jpg) no-repeat center center fixed -webkit-background-size: cover -moz-background-size: cover -o-background-size: cover background. Using media queries is a popular technique for delivering tailored stylesheets and assets to different screens to reduce the amount of data transferred to users and improve page load performance. It looks great via desktop browsers (IE, Chrome, Safari.) but when the responsive theme CSS kicks in it does not resize to the correct resolution. Many sites request heavy resources, like images, that are not optimized for certain screens, and send large CSS files containing styles that some devices will never use.
Understand responsive background images.
0 kommentar(er)
