Webpage footer background and footer background

Webpage footer background and footer background

Today I encountered an interesting problem. I want to add a background image to the foot of my website, and write some content at the bottom of footer, so I added background to footer and set the footer size.

First, let's start:

1. Add background to the bottom of footer and set its size.

2. Add a div in footer and write the content.

Q: The content is always at the top. If you use margin or padding, you must specify a fixed value. If you change the background one day, isn't it necessary to reset it?

So Baidu found a solution based on his own thoughts:

1 padding-top: pixel PX; 2 background: url ('./img/footer.jpg') no-repeat center; 3 background-size: 100%; 4 background-position: top center;

Principle: The content can be filled in the padding, such as the background image. Therefore, you can move the top of the footer's padding-top to bring the background image to the top. Of course, the background will also become the top, this function is implemented using the principle that padding is transparent.

Dear friends, have you thought of it?