Let's talk about how CSS sets the background of a webpage. The background of a webpage is an important part of the webpage. It directly determines the style and tone of the webpage. We will mainly learn how to use CSS to set the background color and background image.
Background Color: CSS is particularly easy to set the background color: Background-color: hexadecimal design method.
The background color not only sets the background color for the webpage, but also blocks the webpage. Next, we will use the background color to block the page: Let's seeCode:
block by background color
| Home classification discussion essence I leisure and entertainment Register now Leave this site |
body content... |
Table is used in the whole body for partitioning. The following figure shows the effect:
Here we also need to say that we didn't set the color for the body, but we set the color in topbanner and leftbanner, so if we didn't set the color, we would inherit the body, if this parameter is set, it overwrites the original one. Through the background color and block the entire web page, you can achieve a good typographical effect.
CSS not only sets the background color of the page, but also adds images to the background: Let's take a look at the code.
<HTML>We will download this 03.jpg:
Then let's take a look at the effect:
We can see that this small image is filled with this page both horizontally and vertically, and the effect is very good.
We just saw that the repetition of a small image can be filled with the whole page, but if we do not want to repeat it like this, how should we set it:
<HTML>
What kind of image is bg1.jpg:
Let's look back at the code. We set the background color and repeat the background image. We can see the following results:
If we set background-repeat to repeat-X, we will all know about the effect.
We just saw a duplicate of the background image. It's not messy, either the X axis or the Y axis,They all start from the upper left corner. If we want to change these items, how should we set them: Let's continue to look at the location of the background image:
Let's look at the Code:
<HTML>
Download bg4.jpg:
In the code, we set no duplicates. The background image is located at the bottom right of the image, and the background image is set at the same time. We can see the following results:
By setting the background of an image, you can use some large images as the background of the entire webpage, and the text is above.
We can see that the relative position of the background image and text is fixed, and the image is moved together. How should we set it?
What about fixed background images? Let's continue:
fixed background imagefor a web designer, the HTML language is certainly not unfamiliar, because it is the basis for creating all web pages. However, if you want the webpage to be beautiful, elegant, easy to upgrade, and easy to maintain, HTML alone is not enough. CSS plays an important role in this process. This chapter introduces the features of the CSS language based on the basic concepts of CSS, introduces how to introduce CSS into webpages, and gives a preliminary experience on CSS.
CSS (Cascading Style Sheet) is a markup language used to control webpage styles and allow the separation of style information from webpage content. CSS was approved by W3C in 1996 and is recommended for use. To put it simply, CSS is introduced to make HTML better adapt to the page art design. It is based on HTML and provides rich formatting functions, such as fonts, colors, backgrounds, and overall formatting. web designers can set different styles for various visual browsers, displays, printers, typewriters, projectors, PDAs, etc. The introduction of CSS immediately led to a new upsurge in web page design. Excellent pages designed with CSS emerge one after another.
We can see the background-Attachment: fixed in the code to fix the background image. Let's see the effect:
When text is moved, the background image does not move as the image moves. We will continue to improve.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
