This is the fourth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Thank you for meeting me. Hi, I’m Ken

Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).

This blog is suitable for those who are new to HTML and those who want to review after a long time

You come to earth, you want to see the sun,

Walk down the street with your sweetheart.

Hai Zi “Summer Sun”

🌊🌈 About:

5.3.4 📚 Setting background image tile (background-repeat)

By default, the background image is automatically tiled in both horizontal and vertical directions. If you do not want the image to be tiled or tiled in only one direction, you can control this with the background-repeat attribute.

The values of this attribute are as follows:

  • repeat: Tils horizontally and vertically (default).
  • no-repeat: Not tiled (the image is in the upper left corner of the element and only one is displayed).
  • repeat-x: Tiled only in the horizontal direction.
  • repeat-y: Tils only in the vertical direction.

If the background image tiled propertybackground-repeatIs defined asno-repeatBy default, the image will be displayed at the upper left corner of the element.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Sets the position of the background image</title>
<style type="text/css">

body {
background-image: url(#); /* Set the background image of the page */
background-repeat: no-repeat; /* Set the background image not to tile */
}

</style>
</head>
<body>

<h2>———— Wang Meng "Life is Burning"</h2>
<p>"Even when life is hard and love is dim,</p>
<p>Learning is also a long way, the society is clearly secretly,</p>
<p>There's a lot of injustice out there, and you have to invest in it, and you have to do your best to do everything possible,</p>
<p>Strive for everything that can and should be achieved so that you can gain wisdom and light, achievement and value."</p>

</body>
<html>
Copy the code


Define the background image of the body element as no-repeat non-tile. Running in a browser, the background image is in the upper-left corner of the HTML page, the upper-left corner of the element.

5.3.5 📚 Setting the background-position of the background image

If you want the background image to appear somewhere else, you need another CSS property, background-position, to set the position of the background image.

Example: You can change the CSS style code for the body element by defining the background image in the above example at the upper right corner of the page:

body {
background-image: url(#); /* Set the background image of the page */
background-repeat: no-repeat;/* Set the background image not to tile */
background-position: right top;/* Set the background image position */

/* The background image appears in the upper right corner of the page */
}
Copy the code

In CSS, the background-position property is usually set to two values, separated by a space, that define the horizontal and vertical coordinates of the background image in the element, such as “right top” above. The background-position property defaults to “0.0” or “left top, “meaning the background image is in the upper left corner of the element.

background-positionThere are various values of the attribute, including:

  • (1) Use values in different units (most commonly pixels, px) : Directly set the coordinates of the upper-left corner of the image within the element. Such as”background-position: 20px 20px; “.

  • (2) Use predefined keywords: specify the alignment of the background image in the element. ● Horizontal value: left, center, right. ● Vertical direction: top, center, bottom. The order of the two keywords is arbitrary. If only one value is used, the other defaults to Center. For example, center corresponds to Center Center (displayed in the center).

    Top is the same as Center top (horizontal center, top aligned).

  • (3) Use percentage: align the background image with the specified point of the element.

    0% indicates that the upper-left corner of the image is aligned with the upper-left corner of the element.

    ● 50% 50% means the image 50% 50% center point is aligned with the element 50% 50% center point.

    ● 20% 30% means that 20% 30% of the points of the image are aligned with 20% 30% of the points of the element.

    100% means that the lower right corner of the image is aligned with the lower right corner of the element, rather than the image being filled with elements.

    If there is only one percentage, it is taken as the horizontal value, while the vertical value defaults to 50%.

Next, define the backounder-poiton value as the pixel value to control the position of the background image in the case code above. The CSS style code for the body element is as follows:

body {
background-image:url(images/wdjl.jpg); /* Set the background image of the page */
background-repeat:no-repeat;/* Set the background image not to tile */
background-position:50px 80px;/* Use pixel values to control the position of the background image */
}
Copy the code

After running, the image is 50px from the left edge of the body element and 80px from the top edge.

5.3.6 📚 Setting background Image Fixation (background-attachment)

When there is a lot of content in the page, the background image set in the page will move along with the page scroll bar.

If you want the background image to be fixed at a certain position on the screen and not move with the scroll bar, you can use the background-attachment property to set it.

background-attachmentThe attribute has two attribute values:

  • scroll: Images scroll with page elements (default).
  • fixed: The image is fixed on the screen and does not scroll with page elements.

To control the background image in the example code above and make it fixed on the screen, the CSS style code for the body element is as follows:

body {
background-image: url(#); /* Set the background image of the page */
background-repeat: no-repeat;/* Set the background image not to tile */
background-position: 50px 80px;/* Use pixel values to control the position of the background image */
background-attachment: fixed; /* Set the position of the background image fixed */
}
Copy the code

No matter how you drag the browser’s scroll bar, the position of the background image is fixed.

5.3.7 📚 Setting the background Image size (background-size)

In CSS3, the background-size attribute is used to control the size of the background image.

The basic syntax is as follows:

background-size: attribute values1Attribute values2;
Copy the code

In the syntax format above, the backgroud-size attribute can set one or two values to define the background image, where the attribute value 1 is mandatory and the attribute value 2 is optional. Attribute values can be pixel values, percentages, “cover”, or “contain” keywords.

Background-size:

Attribute values instructions
Pixel values Sets the height and width of the background image. The first value sets the width and the second the height. If only one value is set, the second value defaults toauto
The percentage Sets the width and height of the background image as a percentage of the parent element. The first value sets the width and the second the height. If only one value is set, the first value defaults toauto
cover The background image is extended large enough to completely cover the background area. Some parts of the background image may not be displayed in the background location area
contain Expand the image to its maximum size so that its width and height fully fit the content area

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Sets the size of background image</title>
<style type="text/css">

div{
width: 300px;
height: 300px;
border: 3px solid # 666;
margin: 0 auto;
background-color: #FCC;
background-image: url(images/JL.png);
background-repeat: no-repeat;
background-position: center center;
}

</style>
</head>
<body>

<div>A box of 300 px</div>

</body>
</html>
Copy the code

The above code defines a box 300px by 300px and fills it with a background image shown in the center. The background image is shown in the center.

Use the background-size attribute to control the size of the image. Add a CSS style code to the div as follows:

background-size: 100px 200px;
Copy the code

After running, it is easy to see that the background image is not scaled down. If you want to scale the image size, you can set only one property value.

5.3.8 📚 Setting the Background Display Area (background-origin)

By default, the background-Position attribute always takes the upper left corner of the element as the coordinate origin to locate the background image. The background-Origin attribute in CSS3 can be used to change this positioning method and define the relative position of the background image by itself.

The basic syntax is as follows:

background-origin: Attribute value;Copy the code

In the syntax format above, background-origin has three values, respectively representing different meanings. The specific explanation is as follows:

  • padding-box: The background image is positioned relative to the inner margin region.
  • border-box: Position the background image relative to the border.
  • content-box: The background image is positioned relative to the content.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Sets the display area of the background image</title>
<style type="text/css">

p{
width: 300px;
height: 200px;
border: 8px solid #bbb;
padding: 40px;
background-image: url(#);
background-repeat: no-repeat;
}

</style>
</head>
<body>

<p>China's night, carrying a wide range of the must you must is made in the stream gravel, if say, a life, why sad, ask DBS, is the floor on her mind, deep six points, three distribution of dust, a minute you'll Gao Zhao heart structure under floor: low double growth for a long way, see the world beyond, fireworks easy cold, only favor the youth, the world of mortals of the past, over load, joy, and sadness.</p>

</body>
</html>
Copy the code


The background image is displayed in the upper left corner of the element area. Adding the background-orign attribute to the paragraph text changes the position of the background image.

For example, to position the background image relative to the text, the CSS would look like this:

background-origin: content-box; /* Position the background image relative to the text content */
Copy the code


5.3.9 📚 Set background-clip area of background image

In CSS styles, the background-clip property is used to define the clipping area of the background image,

Basic syntax format:

background-clip: Attribute value;Copy the code

In terms of syntax format, background-clip and background-origin have similar values, but different meanings. The specific explanation is as follows:

  • border-box: Default, cuts the background from the border area outward.
  • padding-box: Cuts out the background from the inner margin area.
  • content-box: Cuts out the background from the content area.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Sets the clipping area of the background image</title>
<style type="text/css">

p{
width: 300px;
height: 150px;
border: 8px dotted # 666;
padding: 40px;
background-color: #CF9; // For paragraph text <p> Define a light green background color.background-repeat: no-repeat;
}

</style>
</head>
<body>

<p>The deep night, carrying a lot of trivial wandering in the brook stone path. If you say, life in the world, even if it is sad. Heaven has tears, why and sad, ask the stars, it is that a wisp of worry, six points deep buried, three points send dust, a thin wine is difficult to calm melancholy! Low sigh life long, look at the world, fireworks easy to cold, only the moment youth. The world of mortals in the past, wan Zai tangled, also happy, also sad.</p>

</body>
</html>
Copy the code


When it runs, it’s easy to see that the background color is spread over the entire area, including the border and the inner margin. At this point, if you want the green background to cover only the text, you need to set the clipping area of the background image and add the following style code for the paragraph text

:

background-clip: content-box/* Cuts out the background from the content area */Copy the code


That’s the end of today’s introductory study

Peace

🌊🌈

HTML page elements and attributes (Note 2) HTML page elements and Attributes (Note 3) Ken’s HTML, CSS starter guide _CSS3 selector (note 4) Ken’s HTML, CSS starter guide _CSS box model (note 5) one Ken’s HTML, CSS starter guide _CSS box model (note 5) two

Hi, I’m Ken

Thank you for reading

If there are flaws in the blog, please leave a message in the comment area or add the public account in the personal introduction to chat with me

Thank you for your kind words