Table of Contents
Reply to the discussion (solution)
Home Web Front-end HTML Tutorial How to make the bottom and sides of the background image extend infinitely_html/css_WEB-ITnose

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

Jun 24, 2016 am 11:56 AM
bottom extend unlimited Background picture

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 of this Website
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

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to customize background image in Win11 How to customize background image in Win11 Jun 30, 2023 pm 08:45 PM

How to customize background image in Win11? In the newly released win11 system, there are many custom functions, but many friends do not know how to use these functions. Some friends think that the background image is relatively monotonous and want to customize the background image, but don’t know how to customize the background image. If you don’t know how to define the background image, the editor has compiled the steps to customize the background image in Win11 below. If you are interested If so, take a look below! Steps for customizing background images in Win11: 1. Click the win button on the desktop and click Settings in the pop-up menu, as shown in the figure. 2. Enter the settings menu and click Personalization, as shown in the figure. 3. Enter Personalization and click on Background, as shown in the picture. 4. Enter background settings and click to browse pictures

How to delete background image in win10 personalization settings How to delete background image in win10 personalization settings Dec 21, 2023 pm 02:31 PM

Every time the desktop background used in Win10 system will be displayed in the personalized background image in the settings, some users want to delete it, but don’t know how to do it. This article is about how to delete the personalized background image in Win10 shared by this site. View used desktop background images: 1. Click [right-click] on a blank space on the desktop, and select [Personalize] in the menu item that opens; 2. In the selection image in the background, you can view the desktop backgrounds you have used. Picture; delete the used desktop background picture: Note: This operation involves modifying the registry. Modifying the registry is risky. Please back up the data in advance. 1. Press the [Win+R] key combination at the same time to open the run window and enter [regedit] ] command, and then click [OK]; 2

How to add a background image to Douyin Live Companion - How to add a background image to Douyin Live Companion How to add a background image to Douyin Live Companion - How to add a background image to Douyin Live Companion Mar 05, 2024 am 09:16 AM

Many users who live broadcast on Douyin will use the Douyin Live Companion software, but do you know how to add a background image to the Douyin Live Companion? The following is the method of adding a background image to the Douyin Live Companion brought to you by the editor. If you are interested Users, please come and take a look below. First log in to Douyin Live Companion on your computer, and then enter the homepage. On the left, we select [Add Material] under [Scene 1]. Next, there will be a window to add materials on the page. We can directly select the [Picture] function and click to enter. We will then open a window where the image material is stored locally. We need to select the picture materials we want to add and then click the Open button in the lower right corner to add them. After adding the picture, we need to use the left mouse button to drag the picture to the appropriate

How to uniformly replace ppt background images How to uniformly replace ppt background images Mar 25, 2024 pm 04:16 PM

The unified replacement of PPT background images is an important operation to improve the visual style of presentations, and can be achieved through two main methods: slide master replacement and batch replacement. Slide master replacement involves deleting the original image and inserting a new image in the master, thereby applying to all slides. The batch replacement function directly replaces the background images of all slides in the presentation. A unified background image not only enhances your presentation but also enhances your audience's focus. It is important to choose high-quality images that are consistent with the theme, and you should pay attention to adjusting details such as transparency and size. In addition, PPT also provides rich background setting options, such as gradients, textures and patterns, which can be customized according to needs.

Introduction to setting background images in WPS Office 2016 Introduction to setting background images in WPS Office 2016 Mar 29, 2024 pm 10:21 PM

1. Start the WPS demonstration, as shown in the figure. 2. Click the [+] button to create a new slide, as shown in the figure. 3. Right-click and select [Background], as shown in the figure. 4. In the fill options on the [Object Properties] page, select [Picture or Texture Fill], as shown in the figure. 5. In the image source, click Local File[, as shown in the figure. 6. In the dialog box, select the picture you want to insert, and click the ] to open the [ button, as shown in the example. 7. This completes the background image setting for the WPS demonstration. The effect is as shown in the picture.

How to use JavaScript to automatically load more content when scrolling to the bottom of a web page? How to use JavaScript to automatically load more content when scrolling to the bottom of a web page? Oct 18, 2023 am 11:40 AM

How does JavaScript implement the function of automatically loading more content when scrolling to the bottom of a web page? Overview: Infinite scrolling is a common feature in modern internet applications. When users scroll to the bottom of the web page, more content is automatically loaded, providing a better user experience. JavaScript can help us achieve this functionality. This article will introduce specific code examples of how to use JavaScript to listen to user scroll events and load more content based on the scroll position. Specific implementation: First, in HTM

What should I do if the Win10 desktop refreshes infinitely when I start it? Solution to infinite refresh of Win10 startup desktop What should I do if the Win10 desktop refreshes infinitely when I start it? Solution to infinite refresh of Win10 startup desktop Jul 08, 2023 am 09:33 AM

Recently, when some users were using the Win10 system, they found that sometimes the desktop would be automatically refreshed without stopping, and it would also refresh while we were watching videos and listening to music, which greatly affected the user experience. So What to do when the computer is turned on and the wireless network is refreshed? The editor below will tell you how to deal with the infinite refresh of the Win10 desktop when it is turned on. What should I do if the computer is turned on and the wireless network is refreshed? 1. After we enter the desktop, click the menu bar icon with the mouse. 2. Select [Resource Manager] in the opened interface. 3. After entering the page, click [Windows Task Manager] and select [End Task]. 4. After proceeding, return to the desktop and right-click the mouse to select the menu bar. 5. At this time, everyone clicks [luck]

How to set ppt background picture How to set ppt background picture Mar 25, 2024 pm 04:12 PM

Setting a PPT background image can add visual effect and appeal to your presentation. This tutorial details how to choose the right image, set up a background image, and adjust it to match the content of your presentation. By following this guide, you can easily create impressive background images for PPT and enhance the overall effect of your presentation.

See all articles