大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
html5中设置整页背景图片的方法是利用css3样式:
站在用户的角度思考问题,与客户深入沟通,找到东辽网站设计与东辽网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名注册、网络空间、企业邮箱。业务覆盖东辽地区。
写法如下:
img.bg {
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;
/* Set up proportionate scaling */
width: 100%;
height: auto;
/* Set up positioning */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
img.bg {
left: 50%;
margin-left: -512px; /* 50% */
}
}
效果如:
body{ font-family: "微软雅黑";
width: 100%;
height:auto;
background:url("../img/....png") no-repeat;
background-size: 100%; }
在插入背景图片的容器里设置background-size: 100%,这样图片就会覆盖整页。
.body{
background:url(../image/pr_gb.png);//此处为你的图片
background-repeat:no-repeat;
background-size:100% 100%;
}
fixed表示指定的背景是永远固定的,即:背景图片不随着网页的滚动而滚动。
style
body {background-position: center;//背景居中
background-repeat: no-repeat;//无重复
background-attachment: fixed;//固定不动}
/style
1,输入position:fixed;top:0;left:0;将整个div固定在屏幕的顶部和左侧。
2、输入width:100%;height:100%;min-width:1000px;这个可以适合div的高度和宽度,而min-width是为了实现让屏幕宽度在1000px以内时,div的大小保持不变。
3、输入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使图片随屏幕大小同步缩放,但是有部分可能会被裁切,不过不至于会露白,下面两句是为chrome和opera浏览器作兼容。
4、输入background-position:center0;使图片的位置,居中,靠左对齐。