search
HomeWeb Front-endCSS TutorialCommon codes for adding background images to Xiaonei.com css code_Experience exchange

Serial number Chinese description mark syntax remarks
1 Background color {background-color: numerical value}
2 Background image {background-image: url(URL)|none}
3 Background repeat {background-repeat:inherit| no-repeat|repeat|repeat-x|repeat-y}
4 Background fixed {background-attachment:fixed|scroll}
5 Background positioning {background-position:value|top|bottom|left|right| center}
6 Back style {background: background color | background image | background repeat | background attachment | background position}

1. Background color: background-color

Syntax: {background-color:numeric}
Explanation: The parameter value is the same as the color attribute
Note: In HTML, a background must be added to an object There is only one way to change the color, and that is to make a table first, set the background color in the table, and then put the object into the cell. This is more troublesome. Not only does it require a lot of code, but it also takes some trouble with the size and positioning of the table. Now it's easy to do it directly with CSS, and the object range is very wide, it can be a piece of text, or just a word or a letter.
Example: Add a background color to some textAdd a background color to some text
Table back color: style="background-color:red"

2. Background image: background-image

Syntax: {background-image: url(URL)|none}
Explanation: URL is the storage path of the background image. If "none" is used instead of the background image storage path, nothing will be displayed.
Example: Add a background image to some text .imgbgstyle { background-image: url(logo.gif)}
3. Background repetition: background-repeat

Syntax: {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}
Function: Background image repetition controls background image tiling Or not, that is to say, combined with the control of background positioning, a background image can be displayed separately somewhere on the web page
Note: Parameter value range:
·inherit inheritance
·no-repeat not repeated Tile the background image
·repeat
·repeat-x makes the image tile only in the horizontal direction
·repeat-y makes the image tile only in the vertical direction
Note: If you do not specify a background For the image repeating attribute, the browser default is for the background image to be tiled in both horizontal and vertical directions.
4. Background fixed: background-attachment

Syntax: {background-attachment:fixed|scroll}
Description: Parameter value range
·fixed: When the web page is scrolled, the background image is relative to the browser window Generally speaking, fixed
·scroll: When the web page is scrolled, the background image scrolls together relative to the browser window
Note: The background image fixed controls whether the background image scrolls with the scrolling of the web page. If you do not set the background image fixed attribute, the browser's default background image will scroll with the scrolling of the web page. In order to prevent overly fancy background images from damaging the viewer's eyesight when scrolling, you can unbundle the background image and text content, which should be bundled with the browser window.
Example: CSS that prevents the background pattern from "scrolling" with the text
BODY { background: purple url(bg.jpg); background-repeat:repeat-y; background-attachment:fixed }
5. Background positioning: background-position

Syntax: {background-position:numeric|top|bottom|left|right|center}
Function: Background positioning is used to control the position of the background image displayed on the web page.
Description: Parameter value range
·Numeric parameter with length unit
·top: top alignment relative to the foreground object
·bottom: bottom alignment relative to the foreground object
·left: relative to the foreground object Left alignment
·right: Right alignment relative to the foreground object
·center: Center alignment relative to the foreground object
·Proportion relationship
The keywords are explained as follows:
top left = left top = 0% 0 %
top = top center = center top = 50% 0%
right top = top right = 100% 0%
left = left center = center left = 0% 50%
center = center center = 50% 50%
right = right center = center right = 100% 50%
bottom left = left bottom = 0% 100%
bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100%
Note: If the center in the parameter is used in front of another parameter, it means horizontal centering; if it is used after another parameter, it means vertical centering.
6. Background style: background

Syntax: {background:background color|background image|background repeat|background attachment|background position}
Function: The background attribute is a clearer background— Shorthand for relationship attributes. Here are some background declarations:
Example:
BODY { background: white url(http://www.htmlhelp.com/foo.gif) }
BLOCKQUOTE { background: #7fffd4 }
P { background: url(../backgrounds/pawn.png) #f0f8ff fixed }
TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right }
Note: When a value is not When specified, its initial value will be accepted. For example, in the first three rules above, the background position property would be set to 0% 0%. To avoid conflicts with the user's style sheet, the background and color should be specified together.

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
The Slideout FooterThe Slideout FooterApr 09, 2025 am 11:50 AM

A fascinating new site called The Markup just launched. Tagline: Big Tech Is Watching You. We’re Watching Big Tech. Great work from Upstatement. The

Pages for LikesPages for LikesApr 09, 2025 am 11:47 AM

I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it.

Recreating the CodePen Gutenberg Embed Block for Sanity.ioRecreating the CodePen Gutenberg Embed Block for Sanity.ioApr 09, 2025 am 11:43 AM

Learn how to create a custom CodePen block with a preview for Sanity Studio, inspired by Chris Coyier’s implementation for Wordpress’ Gutenberg editor.

How to Make a Line Chart With CSSHow to Make a Line Chart With CSSApr 09, 2025 am 11:36 AM

Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG

Programming Sass to Create Accessible Color CombinationsProgramming Sass to Create Accessible Color CombinationsApr 09, 2025 am 11:30 AM

We are always looking to make the web more accessible. Color contrast is just math, so Sass can help cover edge cases that designers might have missed.

How We Created a Static Site That Generates Tartan Patterns in SVGHow We Created a Static Site That Generates Tartan Patterns in SVGApr 09, 2025 am 11:29 AM

Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan

A Follow-Up to PHP TemplatingA Follow-Up to PHP TemplatingApr 09, 2025 am 11:14 AM

Not long ago, I posted about PHP templating in just PHP (which is basically HEREDOC syntax). I'm literally using that technique for some super basic

Creating a Modal Image Gallery With Bootstrap ComponentsCreating a Modal Image Gallery With Bootstrap ComponentsApr 09, 2025 am 11:10 AM

Have you ever clicked on an image on a webpage that opens up a larger version of the image with navigation to view other photos?

See all articles

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

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Atom editor mac version download

Atom editor mac version download

The most popular open source editor

Safe Exam Browser

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.

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use