How to make the bottom and sides of the background image extend infinitely_html/css_WEB-ITnose

For example, I set a background image for him in a form.
Then the table length is longer than the background image. I hope the bottom can extend infinitely,
instead of the image repeating.
I also hope that the sides can be extended infinitely

If you know, please provide the table code and css code, thank you. .

Reply to the discussion (solution)

You can try the following, put a picture behind the table as the background, and stretch the picture to 100 %, you need to know that the background image cannot be stretched

.....


#back {
width: 800px;
height: 600px;
z-index: -1;
position: absolute;
}
#back img {
width: 100%;
height: 100%;
}

Hope this helps. . .

You can try as follows, put a picture behind the table as the background, and stretch the picture to 100%. You must know that the background picture cannot be stretched

.....

......

Thanks, but that's not what I want ,
because this kind of picture will be deformed.
I have an idea, but I don’t know how to write CSS.

I made the bottom and sides of my picture the same color.
That is, I center the image in the table,
Then is there a way to set the background color outside the background image?
Extract the color at the bottom of the image and make the background color consistent with the color of the background image.
This will show that the edge is stretched. . .

I don’t know how to write CSS. If it works, please tell me again. Thank you!

The description is not clear~ If you need help, please add me at 1157373706

Quote from the 1st floor’s reply:

You can try something like the following, Put a picture behind the table to serve as the background and stretch the picture to 100%. You must know that the background picture cannot be stretched

< div id="back">

.... .


According to your idea, as long as you set the background color and background image in the table at the same time (centered, no-repeat), or follow my above This method can achieve the effect you want by setting the background color and background image of the outer div, but one thing to note is that if your image is too big or too small, it will feel weird. . .

Well, put a new image below and stretch it, then set z-index:-1
Then set margin-top to a negative number haha ​​

Well, put it below A new image is stretched, then set z-index:-1
and then set margin-top to a negative number haha

This is so shit, I might as well process the image directly haha

I understand what the poster means, but I don’t know if it can be realized. You can take a look at the current SOHU homepage. In fact, the SOHU homepage is also made up of two DIVs. The upper DIV has a background image, and the lower one has no background image. So it looks like the white color extends infinitely.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：html css problem, really weird_html/css_WEB-ITnoseNext article：html css problem, really weird_html/css_WEB-ITnose

Related articles

See more

• Summary of Html knowledge
• How to learn HTML quickly
• The difference between html xhtml xml
• The difference between src and href attributes
• About HTML5 and CSS replacement use

Public welfare online PHP training，Help PHP learners grow quickly！

About usDisclaimerSitemap

© php.cn All rights reserved