【Web前端】网页背景图设置技巧

问题一:如何设置背景图铺满整个屏幕

css代码:

body {
    background-image: url("../img/bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

简写:

body{
    background:url("../image/bg.jpg") no-repeat center center fixed;
    background-size:cover;
}

效果说明:当窗口页面合适时,图片铺满;但是窗口比例变化时,背景可能只显示原图中心一部分

问题2:如何让背景随屏幕伸缩(背景图会变形) 

css代码

body{
    background: url("../img/LoginBG.jpg") ;
    background-size: 100% 100%;
}

效果图:

 

你可能感兴趣的:(Web前端)