How to set the background to remain unchanged in css-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

How to set the background to remain unchanged in css

藏色散人

Apr 09, 2021 am 09:31 AM

css

How to set the background of css to be fixed: first create an HTML sample file; then enter the head tag and css style tag code; then between the style tags, enter the code that defines the background image of the web page; finally set "background -repeat:no-repeat" attribute is enough.

How to set the background to remain unchanged in css

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

First we open the system notepad program and enter the basic code of the web page

<html>
 <body>
 </body>
</html>

How to set the background to remain unchanged in css

Then enter the head tag and css style tag code

<head>
  <style type="text/css">
  </style>
</head>

How to set the background to remain unchanged in css

Click between the style tags and enter the code that defines the background image of the web page

body
{ 
  background-image:url(&#39;d:/bg.gif&#39;);
}

How to set the background to remain unchanged in css

##Then enter some body tags and content under the body tag

<body>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
</body>

How to set the background to remain unchanged in css

Click the file and save as command, save the content in html format, and open the webpage to preview.

How to set the background to remain unchanged in css

Everyone found that in this situation, when we scroll the mouse wheel, the web page content and background image scroll at the same time. For ease of viewing, we modify the code so that the image does not Displayed repeatedly.

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>

Then preview the effect.

How to set the background to remain unchanged in css

This way you can clearly see the change of the background image. In order to fix the background image, we modify the code to

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>

and see the effect.

How to set the background to remain unchanged in css

[Recommended learning:

css video tutorial]

The above is the detailed content of How to set the background to remain unchanged in css. For more information, please follow other related articles on the PHP Chinese website!

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

How We Tagged Google Fonts and Created goofonts.comApr 12, 2025 pm 12:02 PM

GooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google

Timeless Web Dev ArticlesApr 12, 2025 am 11:44 AM

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their

The Deal with the Section ElementApr 12, 2025 am 11:39 AM

Two articles published the exact same day:

Practice GraphQL Queries With the State of JavaScript APIApr 12, 2025 am 11:33 AM

Learning how to build GraphQL APIs can be quite challenging. But you can learn how to use GraphQL APIs in 10 minutes! And it so happens I've got the perfect

Component-Level CMSsApr 12, 2025 am 11:09 AM

When a component lives in an environment where the data queries populating it live nearby, there is a pretty direct line between the visual component and the

Set Type on a Circle... with offset-pathApr 12, 2025 am 11:00 AM

Here's some legit CSS trickery from yuanchuan. There is this CSS property offset-path. Once upon a time, it was called motion-path and then it was renamed. I

What does 'revert' do in CSS?Apr 12, 2025 am 10:59 AM

Miriam Suzanne explains in a Mozilla Developer video on the subject.

The Modern LoversApr 12, 2025 am 10:58 AM

I love stuff like this.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks agoByDDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: How To Unlock Everything In MyRise

4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Dreamweaver Mac version

Visual web development tools

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.