Home Web Front-end CSS Tutorial Two methods to use CSS to implement code that does not change the size of the background image as the browser zooms

Two methods to use CSS to implement code that does not change the size of the background image as the browser zooms

Jun 11, 2018 pm 04:07 PM
size Zoom Background image

This article mainly introduces the code about two methods to use CSS to realize that the size of the background image does not change with the browser zooming. It has a certain reference value. Now I share it with you. Friends in need can refer to it

The size of the background image on the homepage of some websites does not change with the zoom of the browser. This example uses CSS to realize that the size of the background image does not change with the zoom of the browser. Method 1. Use the image as the background. Method 2 uses the img tag. Friends who like it can take a look at

. The size of the background image on the homepage of some websites does not change with the browser zooming. For example, on the homepage of Baidu Personal Edition, the size of the background image does not change after scaling:

Another example is Huaban.com:

Now use CSS to achieve this effect.
First you need a picture of large enough size. The size of the Baidu background image above is 1600*1000px (picture address: http://4.su.bdimg.com/skin/12.jpg?2); petals The size of the background image is 1600*1600px (image address: http://hbfile.b0.upaiyun.com/img/unauth_page/food_bg.jpg);
Then there are two methods to achieve the effect of non-scaling of the background image:
Method 1. Use the image as background
There are several CSS properties to mention: background-size: cover. The function of this CSS3 property is to expand the background image to a large enough size. Make the background image completely cover the background area. Some parts of the background image may not be displayed in the background positioning area. If you do not use this attribute, the background image will shrink when the browser is zoomed in IE11 and FireFox, and use -webkit- background-size: cover and -o-background-size: cover are compatible with webkit kernel browsers and Opera browsers; the background-attachment attribute sets whether the background image is fixed or scrolls with the rest of the page. When set to fixed, the rest of the page Background image does not move when partially scrolled.
Code (using Baidu’s starry sky map, the effect is the same as the Baidu screenshot above):
HTML:

<p id="con"></p>
Copy after login

CSS:

body{ margin:0; padding:0;} 
#con{ 
position:absolute; 
top:0; 
left:0; 
height:100%; 
width:100%; 
background-image:url("maskimg/star.jpg"); 
background-position: center 0; 
background-repeat: no-repeat; 
background-attachment:fixed; 
background-size: cover; 
-webkit-background-size: cover;/* 兼容Webkit内核浏览器如Chrome和Safari */ 
-o-background-size: cover;/* 兼容Opera */ 
zoom: 1; 
}
Copy after login

Method 2 .Do not use the image as the background, but use the tag . The effect is that the image size will not change with the browser zooming, but if there is a vertical scroll bar, the image will not be fixed but will follow the scroll bar. move. Just set the width of the image to 100%.
The code is very simple, only a few lines, using Baidu’s starry sky map:
HTML:

<p id="con"><img id="pic" src="maskimg/star.jpg"></p> _fcksavedurl=""maskimg/star.jpg"></p>"
Copy after login

CSS:

body{ margin:0; padding:0;} 
#pic{ width:100%;}
Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone Learning will be helpful. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to set CSS Text font color

How to draw a loading circle animation with css3

About CSS background background and background -Analysis of position

The above is the detailed content of Two methods to use CSS to implement code that does not change the size of the background image as the browser zooms. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Display scaling guide on Windows 11 Display scaling guide on Windows 11 Sep 19, 2023 pm 06:45 PM

We all have different preferences when it comes to display scaling on Windows 11. Some people like big icons, some like small icons. However, we all agree that having the right scaling is important. Poor font scaling or over-scaling of images can be a real productivity killer when working, so you need to know how to customize it to get the most out of your system's capabilities. Advantages of Custom Zoom: This is a useful feature for people who have difficulty reading text on the screen. It helps you see more on the screen at one time. You can create custom extension profiles that apply only to certain monitors and applications. Can help improve the performance of low-end hardware. It gives you more control over what's on your screen. How to use Windows 11

How to clear all desktop background images in Win7? Tips for deleting personalized background images in Win7 How to clear all desktop background images in Win7? Tips for deleting personalized background images in Win7 Jun 02, 2024 am 09:01 AM

In Win7 system, many users want to delete personalized desktop background images, but do not know how to delete them. This article will show you how to delete personalized background images in Win7 system. 1. First, open the control panel interface of the Win7 system and click to enter the "Appearance and Personalization" settings; 2. Then, in the opened interface, click the "Change Desktop Background" setting; 3. Then, click below "Desktop background" option; 4. Then, select Select all, and then click Clear all. Of course, you can also use it under "Customize", right-click the theme you want to delete, and then click &q on the shortcut menu

How to replace watchOS 10 Snoopy watch face? How to replace watchOS 10 Snoopy watch face? Sep 23, 2023 pm 10:09 PM

I believe that after upgrading to watchOS10, many people also want to change the watch face to Snoopy, right? It is more than a simple background image. To be precise, it is a series of dynamic images with countless shapes that will make you happy every time you look at it. To change the Apple Watch surface to a Snoopy surface, you can proceed as follows: 1: Click the Apple Watch surface and pull it to the left to see "New". 2: Select a new surface. 3: Snoopy can be found there, and then click "Join".

How to zoom pages side by side in word How to zoom pages side by side in word Mar 19, 2024 pm 07:19 PM

When we use word documents to edit files, sometimes there are many pages. We want to display them side by side and check the overall effect. However, because we don’t know how to operate, we often need to scroll for a long time to view page by page. I don’t know if you have ever encountered a similar situation. In fact, we can easily solve it at this time as long as we learn how to set the word zoom pages side by side. Below, let’s take a look and learn together. First, we create and open a new page in the Word document, and then enter some simple content to make it easier to distinguish. 2. For example, if we want to realize word zoom and side-by-side display, we need to find [View] in the menu bar, and then select [Multiple Pages] in the view tool options, as shown in the figure below: 3. Find [Multiple Pages] and click,

Safari zoom issue on iPhone: Here's the fix Safari zoom issue on iPhone: Here's the fix Apr 20, 2024 am 08:08 AM

If you don't have control over the zoom level in Safari, getting things done can be tricky. So if Safari looks zoomed out, that might be a problem for you. Here are a few ways you can fix this minor zoom issue in Safari. 1. Cursor magnification: Select "Display" > "Cursor magnification" in the Safari menu bar. This will make the cursor more visible on the screen, making it easier to control. 2. Move the mouse: This may sound simple, but sometimes just moving the mouse to another location on the screen may automatically return it to normal size. 3. Use Keyboard Shortcuts Fix 1 – Reset Zoom Level You can control the zoom level directly from the Safari browser. Step 1 – When you are in Safari

What is the size of a4 paper in centimeters? What is the size of a4 paper in centimeters? Feb 11, 2024 pm 11:51 PM

A4 paper is now used in many places, such as office, study, etc. The paper used for copying is basically A4 paper. Many friends don’t know how many centimeters the size of A4 paper is. Let’s take a look. Bar. 1. Size A4 paper is 21cm × 29.7cm (210mm × 297mm). The paper size used in most countries in the world adopts this international standard. 2. Origin A4 paper is 210mm×297mm. Reason 1: A rectangle with a length of 2 and a width of The resulting ratio is . However, 297 divided by 210, the result is 1.414, which is close to, and this ratio is exactly a piece of paper

Word document editing tips: Make two pages of content into one Word document editing tips: Make two pages of content into one Mar 25, 2024 pm 06:06 PM

In Microsoft Word documents, you often encounter the situation of merging two pages of content into one page, especially when you need to save paper or when you need to print a double-sided document. Several common methods to achieve this goal will be introduced below. Method 1: Adjust the page margins. First open the Word document and find the &quot;Page Layout&quot; option in the menu bar. After clicking, the page layout settings menu will pop up. Here you can adjust the page margins, including the top, bottom, left, and right margins. Generally speaking, making the top and bottom margins smaller will allow the content to fit within one page. you can taste

How to calculate computer size How to calculate computer size Mar 20, 2023 pm 01:43 PM

How to calculate computer size: 1. Find a flat and stable table, place the monitor on the table, and keep the monitor stable; 2. Use a ruler to measure the diagonal length; 3. Convert the units between centimeters and feet. , just calculate the monitor size.

See all articles