How to adapt css background image-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to adapt css background image

anonymity

May 28, 2019 pm 03:06 PM

css

A clear and beautiful background picture can add a lot of points to a web page. Designers often use large pictures for the background of the page. We neither want the picture to be deformed due to different resolutions, nor do we want it to be displayed on a large screen. In this case, there is a white patch in the background. In short, it is to realize a large background image that can adapt to the screen size without deforming, and the background image will not scroll as the scroll bar scrolls, so that the background image can be adapted.

How to adapt css background image

Here’s how to do it with CSS:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>title</title>
</head>
<body>
<div class="wrapper">
    <!--背景图片-->
    <div id="web_bg" style="background-image: url(./img/bg.jpg);"></div>
    <!--其他代码 ... -->
</div>
</body>
</html>

CSS:

#web_bg{
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  min-width: 1000px;
  z-index:-10;
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  background-position: center 0;
}

Next, let’s analyze the function of each code in css:

 position:fixed;  top: 0;  left: 0;

These three sentences make the entire div fixed at the top and left of the screen

 width:100%;  height:100%;  min-width: 1000px;

The first two sentences above are to make the entire div have the same size as the screen, so as to achieve the full-screen effect, and min-width is to keep the size of the div unchanged when the screen width is within 1000px, which means that in this case Next, when scaling the screen width, the image does not scale (only valid within 1000px).

 z-index:-10;

The purpose of this is to make the entire div below each level in the HTML page. Under normal circumstances, the z-index value of the first created level is 0, so if we write -1 here, it is okay. Implementation, but writing -10 here is to ensure that the entire div is at the bottom, because if there are too many levels in the page, sometimes -1 is not necessarily at the bottom, but it does not make sense if it is written as a large number like -100. Use index:-10 to achieve what looks like a background image. It is actually the most common div, but the hierarchical relationship has changed to make it look like a background image.

 background-repeat: no-repeat;

The above is the background, don’t repeat it

 background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;

The above three sentences have the same meaning, which is to make the picture scale synchronously with the screen size, but some parts may be cropped, but it will not be exposed. , the following two sentences are for compatibility with chrome and opera browsers.

 background-position: center 0;

The above sentence means the position of the picture, centered and aligned to the left.

The above is the detailed content of How to adapt css background image. For more information, please follow other related articles on the PHP Chinese website!

Statement

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

This Isn't Supposed to Happen: Troubleshooting the ImpossibleMay 15, 2025 am 10:32 AM

What it looks like to troubleshoot one of those impossible issues that turns out to be something totally else you never thought of.

@keyframes vs CSS Transitions: What is the difference?May 14, 2025 am 12:01 AM

@keyframesandCSSTransitionsdifferincomplexity:@keyframesallowsfordetailedanimationsequences,whileCSSTransitionshandlesimplestatechanges.UseCSSTransitionsforhovereffectslikebuttoncolorchanges,and@keyframesforintricateanimationslikerotatingspinners.

Using Pages CMS for Static Site Content ManagementMay 13, 2025 am 09:24 AM

I know, I know: there are a ton of content management system options available, and while I've tested several, none have really been the one, y'know? Weird pricing models, difficult customization, some even end up becoming a whole &

The Ultimate Guide to Linking CSS Files in HTMLMay 13, 2025 am 12:02 AM

Linking CSS files to HTML can be achieved by using elements in part of HTML. 1) Use tags to link local CSS files. 2) Multiple CSS files can be implemented by adding multiple tags. 3) External CSS files use absolute URL links, such as. 4) Ensure the correct use of file paths and CSS file loading order, and optimize performance can use CSS preprocessor to merge files.

CSS Flexbox vs Grid: a comprehensive reviewMay 12, 2025 am 12:01 AM

Choosing Flexbox or Grid depends on the layout requirements: 1) Flexbox is suitable for one-dimensional layouts, such as navigation bar; 2) Grid is suitable for two-dimensional layouts, such as magazine layouts. The two can be used in the project to improve the layout effect.

How to Include CSS Files: Methods and Best PracticesMay 11, 2025 am 12:02 AM

The best way to include CSS files is to use tags to introduce external CSS files in the HTML part. 1. Use tags to introduce external CSS files, such as. 2. For small adjustments, inline CSS can be used, but should be used with caution. 3. Large projects can use CSS preprocessors such as Sass or Less to import other CSS files through @import. 4. For performance, CSS files should be merged and CDN should be used, and compressed using tools such as CSSNano.

Flexbox vs Grid: should I learn them both?May 10, 2025 am 12:01 AM

Yes,youshouldlearnbothFlexboxandGrid.1)Flexboxisidealforone-dimensional,flexiblelayoutslikenavigationmenus.2)Gridexcelsintwo-dimensional,complexdesignssuchasmagazinelayouts.3)Combiningbothenhanceslayoutflexibilityandresponsiveness,allowingforstructur

Orbital Mechanics (or How I Optimized a CSS Keyframes Animation)May 09, 2025 am 09:57 AM

What does it look like to refactor your own code? John Rhea picks apart an old CSS animation he wrote and walks through the thought process of optimizing it.

See all articles