Preamble
Hi, it’s you again Today I will work with you to learn some basic css properties to create a satisfactory background . I will divide it into 2 parts which are Background color and Background image , let’s start too
Background Color
Background Color determines the background color for one or more html tags
background-color: color
I have a piece of html and css as follows:
html:
1 2 3 4 5 6 7 8 | <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <span class="token punctuation">.</span> container <span class="token punctuation">{</span> display <span class="token punctuation">:</span> flex <span class="token punctuation">;</span> flex <span class="token operator">-</span> direction <span class="token punctuation">:</span> column <span class="token punctuation">;</span> padding <span class="token punctuation">:</span> <span class="token number">30</span> px <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">.</span> item <span class="token punctuation">{</span> margin <span class="token operator">-</span> bottom <span class="token punctuation">:</span> <span class="token number">10</span> px <span class="token punctuation">;</span> width <span class="token punctuation">:</span> <span class="token number">100</span> <span class="token operator">%</span> <span class="token punctuation">;</span> height <span class="token punctuation">:</span> <span class="token number">40</span> px <span class="token punctuation">;</span> text <span class="token operator">-</span> align <span class="token punctuation">:</span> center <span class="token punctuation">;</span> padding <span class="token operator">-</span> top <span class="token punctuation">:</span> <span class="token number">25</span> px <span class="token punctuation">;</span> <span class="token punctuation">}</span> |
I added the background-color: #41efb4; The result will be:
Note : #41efb4 you can replace with any color
background-color: transparent
transparent background color to see more clearly then I will take for example. I added a background color for the class container as background-color: #c9dde8; and consider background 1 have the attribute background-color: transparent; . Here is the result
As you can see, the background color of background 1 is transparent (coincides with the background color of the container )
background-color: transparent
This is pretty good, I often go to this page to create a background. You just need to choose the starting color, the ending color here
then copy this css and throw it into your post.
Here I consider background-color: transparent for background 1 . Here is the result
Pretty pretty right: v.
Background Image
Background-image : Specifies the background image for the component. With url is the path to the image used as the background. It has a number of basic properties that I often use as follows:
- background-repeat
- background-size
- background-position
- background-attachment
First I went online and downloaded a photo and added the background-image: url("vector.jpg"); attribute background-image: url("vector.jpg"); for background 2 , here vector.jpg is the name of the image. Result
background-repeat
rules if the image is repeated when the image size is smaller than the size of the background. The default value is probably background-repeat: repeat; ie be repeated in both horizontal and vertical. There are also some properties such as
background-repeat: no-repeat:
Photos will not be repeated
background-repeat: repeat-x:
The image is repeated horizontally
background-repeat: repeat-y:
The image is repeated in the vertical axis
background-size
Specifies the display size of the image
background-size: contain:
Shrink the image to make it 100% visible on the background
background-size: cover: makes the image span the background with the smallest size. I combine with the background-position attribute to be able to adjust the display background as I like. With the background-position there are some commonly used values:
- center: background display frame will be in the middle of the image
- top: the background display will be at the top of the image
- bottom: background display frame will be at the bottom of the image Also we can adjust by:
background-position: 20px -300px;corresponds to 20px to the right, and up to 300px up.
Here I combine background-size and background-position with the css as follows:
1 2 3 4 5 6 7 8 | <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"container"</span> <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">1</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">2</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> div <span class="token keyword">class</span> <span class="token operator">=</span> <span class="token double-quoted-string string">"item"</span> <span class="token operator">></span> background <span class="token number">3</span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> <span class="token operator"><</span> <span class="token operator">/</span> div <span class="token operator">></span> |
background-attachment
Specifies whether the background will scroll by scroll or by element. There are values such as:
scroll: Background scroll by component. It is also the default value of background-attachment
fixed: The background is fixed to the frame.
local: I find n is similar to scroll if you know where other local scroll is, then comment down so I can know and add to complete the article.
Conclude
Above I have presented what is needed to create a Background as you like. Individual posts are what I know and I feel necessary, so I am still missing something so I hope you can comment down below so I can complement and improve the article. Thank you for reading