One of the most popular forms of web pages currently is full-screen large images. This article will use the simplest way to achieve this effect. The CSS property background-size is used ,no javascript required.
Core Concept
## Use the background-size attribute to fill the entire viewport
Use media queries to provide smaller-sized background images for mobile devices
## Why should we provide small-sized background images for mobile devices? In the demo , the actual size of the background image we see is 5498px *
3615px, the purpose of using such a large size image is to satisfy most widescreen monitors without blurry display, at the expense of a 1.7MB image size.
But there is no need to use such large images on mobile devices. At the same time, large images will cause slower loading, especially on mobile networks.
It should be noted that providing a small background image for mobile devices is optional for this technical solution.
Practice
- ## HTML
##
<!doctype html> <html> <body> ...Your content goes here... </body> </html>Later we will specify a background image for the body tag, so that the background image can fill the entire browser viewport. In fact, this solution can be effective for all block-level containers. If the width and height of your block-level container are dynamic, the background image will automatically expand and contract to fill the entire container.
-
body { /* 加载背景图 */ background-image: url(images/background-photo.jpg); /* 背景图垂直、水平均居中 */ background-position: center center; /* 背景图不平铺 */ background-repeat: no-repeat; /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ background-attachment: fixed; /* 让背景图基于容器大小伸缩 */ background-size: cover; /* 设置背景颜色，背景图加载过程中会显示背景色 */ background-color: #**46; }The most important one above is:background-size: cover;
One thing to note here is that if the background image is smaller than the size of the body tag (for example, on a high-resolution monitor, or when the page content is particularly large), the browser will stretch the image. We all know that when an image is stretched, it becomes blurry. Therefore, when choosing a background image, pay special attention to the size. In order to take care of the large screen size, the image size used in the demo is 5498px * 3615px.
At the same time, in order to keep the background image always centered relative to the viewport, we declare:
background-position: center center;
The above rules will position the origin of the background image scaling to the center of the viewport.
The next problem we need to solve is: when the height of the content is greater than the height of the viewport, a scroll bar will appear. We want the background image to remain fixed relative to the viewport, even as the user scrolls.
The solution is:
background-attachment: fixed;
## (Optional) Use media queries to deal with small screens
In order to cope with the small screen, I used photoshop to scale the background image to 768px * 505px, and then used smush.it Compress image size. This reduces the image size from 1741KB to 114KB, saving 93%. The following is how the media query is written:
@media only screen and (max-width: 767px) {
body {
background-image: url(images/background-photo-mobile-devices.jpg);
}
} The above media query will max-width: 767px
Set as a breakpoint, which means that when the browser viewport is larger than 767px, a large background image will be used, otherwise a small background image will be used. The downside of using the above media query is that if you shrink the browser window from 1200px to 640px (or vice versa), you will see a brief flicker as the small or large background image is being load. The above is the detailed content of CSS implements responsive full-screen background image. For more information, please follow other related articles on the PHP Chinese website!
What is CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.
What is CSS flexbox?Apr 30, 2025 pm 03:20 PMArticle discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.
How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PMThe article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework
What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PMThe article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.
How can we animate using CSS?Apr 30, 2025 pm 03:17 PMArticle discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.
Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PMArticle discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)
How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PMThe article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.
What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PMArticle discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Dreamweaver Mac version
Visual web development tools
DVWA
Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software
Dreamweaver CS6
Visual web development tools
SublimeText3 Linux new version
SublimeText3 Linux latest version
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
