About how to use CSS background
The following is a summary of all CSS backgrounds. The content is quite good, so I will share it with you now and give it as a reference.
All background properties cannot be inherited.
1. background-color
All elements can set the background color.
The default value of background-color is transparent; that is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.
2. background-image
All elements can set a background image;
You can set multiple background images, separated by commas; The background image will cascade, with the layer written in the previous layer on top.
3. background-repeat
repeat (default)/no-repeat/repeat-x/ repeat-y
4. background-attachment
scroll (default)/fixed
5. background-position
Pixel method: starting from the upper left corner of the image , the first value is the horizontal movement distance, the second value is the vertical movement distance; if only one value is specified, the second value defaults to 50%.
Percentage method: The percentage is applied to both the image and the element, and the corresponding points coincide for positioning. If you specify only a percentage, it means that the vertical direction is 50%.
Keyword method: top, right, bottom, left, center for combined positioning; if only one value is specified, the second value defaults to center.
Note: background-position can be negative.
By default, the background color extends below the border, and the background image is in the upper left corner of the padding area.
6. background-size
Set the size of the background image; the default value is auto.
Pixel method: The first value sets the width, and the second value sets the height; if there is only one value, the second value is auto.
Percent method: Calculated based on the width and height of the parent element.
The keyword cover does not change the aspect ratio of the image and covers the entire element in both horizontal and vertical directions, which may cause part of the image to overflow.
The keyword contain does not change the aspect ratio of the image, and stretches it as much as possible until the entire element is covered in one direction, which may result in the other direction not being covered.
7. background-origin
Define the initial position of the background image
border-box, the upper left corner of the border.
padding-box, upper left corner of padding area; default value.
content-box, upper left corner of the content area.
8. background-clip
The CSS3 background-clip property specifies the painting area of the background.
The property takes three different values:
•border-box - (default) the background is painted to the outside edge of the border
•padding-box - the background is painted to the outside edge of the padding
•content-box - the background is painted within the content box
(English explanation is clearer)
(English is moved from W3Schools Online)
Regarding background-origin and background-clip, they are independent of each other and do not interfere with each other.
Regarding the CSS writing method of background, I personally think it should be clearly logical and hierarchical; specifically:
background defines the background image, background- color defines the background color, and background-clip defines the background display area.
(Personal opinion, for reference only)
Full Size Background Image
If we want to have a background image on a website that covers the entire browser window at all times.
The requirements are as follows:
• Fill the entire page with the image (no white space)
• Scale image as needed
• Center image on page
• Do not cause scrollbars
The following example shows how to do it; Use the html element (the html element is always at least the height of the browser window). Then set a fixed and centered background on it. Then adjust its size with the background-size property:
html { background: url(img_flower.jpg) no-repeat center fixed; background-size: cover; }
Tips:
Use the horizontal tiling of the background image to achieve a wavy border effect.
(Currently I only have ideas, and I haven’t found an image that meets my needs.)
The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to PHP Chinese net!
Related recommendations:
About the use and pitfalls of enabling hardware acceleration in CSS3
About how to write CSS code specifications
The above is the detailed content of About how to use CSS background. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

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

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics











The core method of building social sharing functions in PHP is to dynamically generate sharing links that meet the requirements of each platform. 1. First get the current page or specified URL and article information; 2. Use urlencode to encode the parameters; 3. Splice and generate sharing links according to the protocols of each platform; 4. Display links on the front end for users to click and share; 5. Dynamically generate OG tags on the page to optimize sharing content display; 6. Be sure to escape user input to prevent XSS attacks. This method does not require complex authentication, has low maintenance costs, and is suitable for most content sharing needs.

1. Maximizing the commercial value of the comment system requires combining native advertising precise delivery, user paid value-added services (such as uploading pictures, top-up comments), influence incentive mechanism based on comment quality, and compliance anonymous data insight monetization; 2. The audit strategy should adopt a combination of pre-audit dynamic keyword filtering and user reporting mechanisms, supplemented by comment quality rating to achieve content hierarchical exposure; 3. Anti-brushing requires the construction of multi-layer defense: reCAPTCHAv3 sensorless verification, Honeypot honeypot field recognition robot, IP and timestamp frequency limit prevents watering, and content pattern recognition marks suspicious comments, and continuously iterate to deal with attacks.

1. The first choice for the Laravel MySQL Vue/React combination in the PHP development question and answer community is the first choice for Laravel MySQL Vue/React combination, due to its maturity in the ecosystem and high development efficiency; 2. High performance requires dependence on cache (Redis), database optimization, CDN and asynchronous queues; 3. Security must be done with input filtering, CSRF protection, HTTPS, password encryption and permission control; 4. Money optional advertising, member subscription, rewards, commissions, knowledge payment and other models, the core is to match community tone and user needs.

will-change is a CSS property that is used to inform browser elements in advance of possible changes to optimize performance. Its core function is to enable the browser to create layers in advance to improve rendering efficiency. Common values include transform, opacity, etc., and can also be separated by multiple attribute commas; it is suitable for non-standard attribute animations, complex component transitions and user interaction triggered animations; but it must be avoided abuse, otherwise it will lead to excessive memory usage or increased GPU load; the best practice is to apply before the change occurs and remove it after it is completed.

This article has selected a series of top-level finished product resource websites for Vue developers and learners. Through these platforms, you can browse, learn, and even reuse massive high-quality Vue complete projects online for free, thereby quickly improving your development skills and project practice capabilities.

Different browsers have differences in CSS parsing, resulting in inconsistent display effects, mainly including the default style difference, box model calculation method, Flexbox and Grid layout support level, and inconsistent behavior of certain CSS attributes. 1. The default style processing is inconsistent. The solution is to use CSSReset or Normalize.css to unify the initial style; 2. The box model calculation method of the old version of IE is different. It is recommended to use box-sizing:border-box in a unified manner; 3. Flexbox and Grid perform differently in edge cases or in old versions. More tests and use Autoprefixer; 4. Some CSS attribute behaviors are inconsistent. CanIuse must be consulted and downgraded.

The core role of Homebrew in the construction of Mac environment is to simplify software installation and management. 1. Homebrew automatically handles dependencies and encapsulates complex compilation and installation processes into simple commands; 2. Provides a unified software package ecosystem to ensure the standardization of software installation location and configuration; 3. Integrates service management functions, and can easily start and stop services through brewservices; 4. Convenient software upgrade and maintenance, and improves system security and functionality.

The CSS rule set consists of selectors and declaration blocks to define the style of HTML elements. 1. The selector specifies the target element, such as a tag, class, or ID; 2. Declare the block to contain attributes and values to control the appearance of the element. For example: p{color:blue;font-size:16px;} means selecting the paragraph and setting the text color and font size. Master these two parts to write effective CSS styles.
