Prior to the advent of CSS, Web developers had little control over the page and background elements. Of course, at that time they could use the background property to tile an image across the page, and they could use the bgcolor property to control the background color of the image. But their control is just these-for example, they can't adjust the position of the page background image, cannot control the tile (tiling), and cannot generate the page watermark.
Now with CSS, these have been changed, and it is possible to accurately control the page and element backgrounds through a set of background-* instructions. In addition, it provides a large number of optimized functions. There are many advantages to using CSS directives to control background elements: it does not require any special software, it works on most browsers, and it can centrally control the background images and colors of the site.
Does that sound interesting? Next, let's take a look at what's going on, this article describes the CSS background attribute, which provides an alternative to the old background attribute, which is a great tool for controlling the position, color, and layout of the page and element backgrounds.
Control background Color
First, let's look at the background color property, which defines the background color that the element applies to. This command can accept hexadecimal RGB values as well as "color words" such as red, silver, or blue. Listinga gave us an example of this:
Listing A
<style type= "Text/css" >
. author {
Background-color: #FFE303
}
. quote {
Font-style:italic;
Background-color:lime
}
</style>
<body>
<div class= "Author" >william Shakespeare said:</div>
<p/>
<div class= "quote" >to being or not to, which is the question.</div>
</body>
The result of it running is as shown in Figure A:
Figure A
Example of Listing a
Control background Image
If you want to use a background image to replace a single color, you can use the background-image instruction, which allows you to specify the URL of the background image.
Listing B
<style type= "Text/css" >
Body {
Background-image:url (' mylogo.gif ');
}
</style>
<body>
</body>
Figure B is the result of its operation:
Figure B
Listing B Sample
You can also specify its URL for a particular element, as shown in Listing C:
Listing C
<style type= "Text/css" >
. header {
width:100%;
height:60%;
Border:solid 1px red;
Background-image:url (' mylogo.gif ');
}
</style>
<body>
<div class= "Header" ></div>
</body>
The results of the run are as shown in Figure C:
Figure C
Listing C Example
Control background Image Recurrence
By default, the Background-image directive can tile the selected image horizontally and vertically in two directions. Usually, that's what you want--in the previous example, if you want to use the company logo as the background, you can control it only once, or just design the background image in a vertical direction.
For all of these cases, CSS has background-repeat instructions that accept one of the following four values: Repeat-x (only in horizontal direction), Repeat-y (repeat only in vertical direction), no-repeat (No Duplicates), and Repeat (repeat in horizontal and vertical two directions).
The following is a look at its implementation, as shown in Listing D, in the first <div> will be tiled (tiling) closed, that is, do not repeat, in the second <div> in the logo level repeat.
Listing D
<style type= "Text/css" >
. header1 {
width:100%;
height:35%;
Border:solid 2px Red;
Background-image:url (' mylogo.gif ');
Background-repeat:no-repeat;
}
. header2 {
width:100%;
height:60%;
Border:solid 2px Black;
Background-image:url (' mylogo.gif ');
Background-repeat:repeat-x;
}
</style>
<body>
<div class= "Header1" ></div>
<p/>
<div class= "Header2" ></div>
</body>
Figure D shows us the results of its operation:
Figure D
Listing D Example
Controlling the position of the background image
It may also control where the background image-related elements are placed. The background-position instruction can accept either a percentage or a length, or a keyword like top, bottom, left, right, and center. Now let's look at how it works, as shown in Listing E, where the background image is placed in the lower-right corner of the container element.
Listing E
<style type= "Text/css" >
. header {
width:100%;
height:80%;
Border:solid 2px Red;
Background-image:url (' mylogo.gif ');
Background-repeat:no-repeat;
Background-position:bottom right;
}
</style>
<body>
<div class= "Header" ></div>
</body>
Figure E is the result of the above program running:
Figure E
Listing E Example
Needless to say, this instruction is useful when placing a single background image, for example, when you place a company icon on a Web page.
Controlling Background image scrolling
Finally, in CSS, you can set whether the background image scrolls when the container element scrolls. Most of this application is used on watermark pages, which use the background-attachment instruction to accept scroll or fixed values. Listing F This example shows you how to create a watermark that appears in the upper-right corner of the page.
Listing F
<style type= "Text/css" >
Body {
Background-image:url (' mylogo.gif ');
Background-repeat:no-repeat;
Background-position:top right;
background-attachment:fixed;
}
</style>
<body>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p/>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
<p/>
Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here. Content goes here.
</body>
Now, when you try to scroll this page, the image in the upper-right corner is fixed relative to the browser window, and it doesn't scroll with the rest of the page.
Figure F
Listing F Sample
Of course, these examples are only a small part of the CSS background application. However, they should give you a way to use these properties in a practical application, and you should now be able to apply these attributes to your program. So, what are you waiting for now? Start writing these delightful code!
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
