search

Home >Web Front-end >CSS Tutorial >How to set the background to remain unchanged in css

How to set the background to remain unchanged in css

藏色散人
藏色散人Original
2021-04-09 09:31:014137browse

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
Previous article：How to hide multi-line text overflow in cssNext article：How to hide multi-line text overflow in css

Related articles

See more