Home > Developer > Web Develop
CSS example of setting a background fixed non-scrolling effect
Background fixed no scrolling you see the most is nothing more than QQ space, we can see in a lot of room content scrolling and Beijing pictures do not scroll, the following finishing a few about the background fixed not scrolling CSS code.
First, the CSS setting does not scroll the effect of the background
<!doctype HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/ Xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<TITLE>CSS Disable background scrolling-Www.jbxue.com<111cn.nettyle type= "Text/css" >
*{margin:0; padding:0;}
html,body{width:100%; height:100%; overflow:auto; position:relative;}
. container{width:100%; height:100%; overflow:auto;}
. bg{background: #000000; opacity:0.5; Filter:alpha (opacity=50); position:absolute; z-index:1; overflow:auto; width : 100%; height:100%; left:0; top:0;}
. box{Position:absolute; left:50%; top:50%; width:300px; z-index:11; height:300px; line-height:300px; color: #f60; Font-weight:bold; font-size:20px;}
info{position:absolute; left:-50%; top:-50%; z-index:10; width:300px; height:300px; text-align:center; border:1px Solid #f00; Background: #fff;}
</style>
<body>
<div class= "Container" >
<script type= "Text/javascript" >
for (Var i=0;i<150;i++) {
document.write (' <center> Scripting Academy, DIV+CSS tutorial, disable background picture scrolling. </center> ');
}
</script>
</div>
<div class= "BG" ></div>
<div class= "box" ><div class= "info" > I won't move </div></div>
</body>
Second, CSS settings body background picture fixed content scrolling
CSS to make the body background picture fixed content scrolling:
Style= "Background-attachment:fixed"
Example:
Body {
Background-image:url (images/dbg.jpg);
Background-repeat:no-repeat;
font-family: "Song Body";
font-size:12px;
Line-height:normal;
Font-weight:normal;
Color: #FFFFFF;
background-attachment:fixed;
}
Third, CSS fixed background picture does not scroll
Example:
<style type= "Text/css" >
Body {
Background-image:url ('/images/wall1.jpg ');
Background-repeat:no-repeat;
background-attachment:fixed;
}
#codefans_net {
height:1628px;
}
</style>
<title>css fixed background picture without scrolling code-www.jbxue.com</title>
<111cn.netv id= "Codefans_net" > Drag the scroll bar, the text disappears, and the background still exists. </div>
</body>
Four, CSS Settings page background does not move only the scroll bar action effect
Method One (the page background does not move only the scroll bar movement):
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> not moving background map </title>
<style type= "Text/css" >
body{
Background-image:url (images/0004.jpg);
Background-repeat:no-repeat;
Background-position:center;
background-attachment:fixed;
}
</style>
<body>
<div style= "position:absolute;top:400px;left:200px;height:500px;color:red" >
Set the page scroll bar to scroll through CSS but the page background picture still does not move (see source code) <br/>
Note: Background-image:url (images/0004.jpg); Set a background image that exists under a relative path
</div>
</body>
Method Two (the page background does not move only the scroll bar movement):
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> not moving background map </title>
<style type= "Text/css" >
body{
Background-image:url (images/0004.jpg);
Background-repeat:no-repeat;
Background-position:center;
}
</style>
<body bgproperties= "fixed" >
<div style= "position:absolute;top:400px;left:200px;height:500px;color:red" >
Please check the source code (using the body's bgproperties= "fixed" property)
</div>
</body>
From the above examples to see the background is not scrolling through the positioning to solve, the above examples of the various people can choose the appropriate effect code.
CSS setting background fixed non-scrolling effect example
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
