The background image of the web page footer

I encountered an interesting problem today. I wanted to add a background image to the footer of the website and write some content at the bottom of the footer. So I added a background to the footer and set the size of the footer

Let’s talk about how to start:

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

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

Question: Content It is always at the top. If margin or padding is used, a fixed value must be specified. If the background is changed one day, wouldn’t it have to be reset?

So Baidu found a solution based on its own thinking:

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

Principle: The padding can be filled with content, such as background pictures, so if you push the padding-top of the footer up, the background picture can also be moved up, and of course the background too. To become top, we use the principle that padding is transparent to realize this function

My friends, have you thought of it

The above is the detailed content of The background image of the web page footer. For more information, please follow other related articles on the PHP Chinese website!