Home > Developer > Web Develop
CSS Basics Series Tutorial : Background Properties
Www.divcss.com
We will give you the answer to the previous section's homework:
1. H1. p1{}: Represents all selectors under the H1 tag with the class P1 ;
2, #content h1{} represents all h1 tags under content ;
3, H1. P1,#content H1 side-by-side relationship, for class P1 and ID #content H1 effect with one effect;
4. h1#content h2{} indicates that H1 under the H2 tag under the content tag , Note that this place does not contain no spaces but is then written. Must belong to the H1 inside the ID #content contains the H2 .
use background (background) is a Web page design and production of a common approach, the site is ubiquitous navigation, the overall page background is completed through the background.
Let's look at the color properties of the background (background-color), we can take the values: 16 binary, color name, transparent background .
Now let's look at an example to see
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<TITLE>DIVCSS8 Background Color example </title>
<style type= "Text/css" >
/* This is the CSS memo form. For later reading convenience, if the color value can be shortened to #ccc; */
H1 {background-color: #cccccc; }
h2{background-color:red;}
/* is the default effect, can not write */
H3{background-color:trasparent;}
</style>
<body>
Hex Example
color name
Transparent Background
</body>
: Color values can be obtained by PS , but also can be obtained by Baidu search
You can not only use the background color in our web page, but also use the background picture property Background-image to define the path to the background image. However , it is best to define the repetition effect of the background image in conjunction with the repeating attribute background-repeat of the background image .
The most important: background images can only be displayed within a certain area, so when you specify a background image, you typically define the element's width and Height properties ;
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>www.divcss.com Background Example </title>
<style type= "Text/css" >
Div{background-image:url (3_01.gif);}
</style>
<body>
<div> Content 1</div>
</body>
Now that's the case. The background image is covered with the entire screen. But there's no high-altitude display.
650) this.width=650; "Width=" 554 "height=" "src=,"/e/u261/themes/default/images/spacer.gif "alt=," dsss.jpg "style=" Background:url ("/e/u261/lang/zh-cn/images/localimage.png") no-repeat center;border:1px solid #ddd; "/>
This is the question I have just highlighted. background images can only be displayed within a certain range of areas . So, we can give DIV specifies a wide (width) and High (height), to make it clearer to everyone. I provide a border.
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-
Transitional.dtd ">
<title>www.divcss.com Background Example </title>
<style type= "Text/css" >
Div{background-image:url (3_01.gif); Width:500px;height:500px;border:2pxsolid #f00;}
</style>
<body>
<div> Content 1</div>
</body>
I don't know if we found out. If you use the image we provided to do the background, it will appear completely tiled. Because our background image is only 184PXwideand 384PXhigh. This is also the default condition. So we can determine how the background image is tiled by background-repeat this property.
Background-repeat: Is the repetition of the background image in the specified element. There are several ways to take the value:
Repeat: fully tiled; By default , we can ignore not write
no-repeat : In X with the Y uneven paving;
Repeat-x : X tiled;
repeat-y : Y axis tiling;
You can make a change to the above code.
background-position : set the position of the background picture in a certain area, this property needs to set two values, one is X Horizontal, a vertical position, can use %, can also use the specific value PX, also can use:top left|top Center |top Right | Center Left | Bottom left this combination
650) this.width=650; "Width=" 277 "height=" 159 "src="/e/u261/themes/default/images/spacer.gif "alt=" css8bj.jpg "style = "Background:url ("/e/u261/lang/zh-cn/images/localimage.png ") no-repeat center;border:1px solid #ddd;"/>
Let's look at an example:
<style type= "Text/css" >
Div
{
WIDTH:400PX;HEIGHT:400PX;BORDER:2PX solid#f00;
Background-image:url (css8bj.jpg);
Background-repeat:no-repeat;
Background-position:top right;
}
</style>
<body>
<body>
<div>
<p> In this example, the picture width is 208px, the height is 120px, when we are uneven, the default is the upper left corner of the DIV , if set by our style in the top right corner, Of course you can also use percentages and PX values for </p>
</div>
</body>
</body>
In the case of the above code, what if we want the background image above to not show the first row and the first column? We can also set a negative value for the background position
<style type= "Text/css" >
Div
{
WIDTH:400PX;HEIGHT:400PX;BORDER:2PX solid#f00;
Background-image:url (css8bj.jpg);
Background-repeat:no-repeat;
background-position:-73px-38px;
}
</style>
<body>
<body>
<div>
<p> In this example the picture width is 208px, High is 120px, when we are uneven, the default is the upper left cornerof the DIV, 73px-38px, We use negative values to offset to the left and offset upward </p>
</div>
</body>
</body>
650) this.width=650; "Width=" 185 "height=" 384 "src="/e/u261/themes/default/images/spacer.gif "alt=" Divcss801.gif " Style= "Background:url ("/e/u261/lang/zh-cn/images/localimage.png ") no-repeat center;border:1px solid #ddd;"/>
And our background image can be combined with color in a piece to use, when the background image is not displayed when the color to fill. Let's look at an example now.
<style type= "Text/css" >
Body
{
Background-image:url (divcss801.gif);
Background-repeat:repeat-x;
background-position:0 0
Background-color: #055269;
}
</style>
<body>
<body>
<div>
<p> Our web page background is tiled along the X-axis, if it is not occupied elsewhere you can use the background color instead of </p>
</div>
</body>
</body>
The background color of this place is determined by the background image. We can use PS to look at the bottom of the background image of the color is not what we use now.
We have learned so much before, in fact, the background can be abbreviated, the form is as follows:
Background:background-color color |background-image background image Path | Whether the Background-repeat is tiled | Background-position Position |background-attachment whether scrolling
emphasis: When using shorthand, it must be Background, if is used bakcground-image: can only write the picture position, cannot add other. So I'm looking at an example
<style type= "Text/css" >
Body
{
Background: #055269 URL (divcss801.gif) repeat-x 0 0;
}
</style>
<body>
<body>
<div>
<p> Our backgrounds are tiled along the X-axis and can be replaced with a background color if not covered elsewhere </p>
</div>
</body>
</body>
This article is from "Shijingshan Computer Training" blog, please be sure to keep this source http://jiefei.blog.51cto.com/6994042/1557754
CSS Basics Series Tutorial: Background properties
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
