Question

我正在努力通过我的个人网站calebcharles.com调整背景图片的大小。我不知道这是否需要使用后台大小来完成：在CSS中修复或者我是否需要为基于媒体查询的修复创建备用图像。我是新设计师，所以请放轻松！我真诚地感谢在正确方向上的推动。以下是我网站其中一个部分的示例：

h1.slide1 {

padding-top: 10%;
    color: white;
    background-image: url("images/rainbow.jpg");
    background-position: 50%;
    margin: auto;
    padding-bottom: 10%;
    text-align: center;
    font-family: 'Amatic SC', cursive;
    font-size: 400%;
    background-attachment: fixed;
    background-size: 100% 100%;
    -webkit-background-size:100% 100%;
    background-repeat: no-repeat;

}

完整网站是www.calebcharles.com。移动设备上的背景看起来很糟糕。请帮忙！

Answer 1

你所拥有的是一个传播到100％的背景。背景本身是宽屏1920x730图像，而移动分辨率通常是纵向。

查看媒体查询并预先渲染多个背景分辨率。

.slide1 {
    background-image: url('images/rainbow.jpg');
}

@media (min-width:768px) {
   .slide1 {
        background-image: url('images/rainbow-768.jpg');
    }
}

@media (min-width:1920px) {
   .slide1 {
        background-image: url('images/rainbow-1920.jpg');
    }
}

@media (min-width:2560px) {
   .slide1 {
        background-image: url('images/rainbow-2560.jpg');
    }
}

使用移动视差和CSS重新调整背景图像的大小

1 个答案: