Question

感谢您在我的第一个问题上与我合作。我正在学习Bootstrap（我是一名正在学习代码的设计师），有很多试验和错误，但我很喜欢它。所以这是交易：

我正在重新设计我的公司网站，并为我的移动设备CSS添加媒体查询。当我添加并调整背景位置时，我可以立即在Dreamweaver和我的实时预览中看到调整。但在我的移动设备（iPad和iPhone 5）中，X轴会移动，但不会移动Y轴。

这是我的测试网站：http://test.lighthousesoftware.com

我该怎么办才能在移动屏幕上看到波浪背景（我想将图像向上移动Y轴）？

这是我的HTML：

<header>
    <div class="header-content">
        <div class="header-content-inner">
            <h1 id="homeHeading">Automated Business Process,<br>Your Business Intelligence </h1>
            <hr>
            <p>Prism vice artisan, venmo migas you probably haven't heard of them crucifix meditation organic marfa cardigan. Dreamcatcher banh mi synth, organic flannel hell of gastropub keffiyeh marfa poke roof party. </p>
            <a href="#about" class="btn btn-primary btn-xl page-scroll">Find Out More</a>
        </div>
    </div>
</header>

我的CSS：

    header {
        position: relative;
        width: 100%;
        min-height: auto;
        background-size: cover;
        background-image: 
        url("https://lssinc.com/files/original/header.jpg");
        text-align: center;
        background-attachment: fixed;
        background-position: 25% 0;
        color: white;
        height: 80%;
    }
    @media only screen and (max-width: 1024px) {
        header {
            background-image: url(url("https://lssinc.com/files/original/header.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: 0px 20px;
            background-attachment: fixed;
            color: white;
            height: 80%;
            text-align: center;
        }
    }
    @media only screen and (max-width: 320px) {
        header {
            background-image: url("https://lssinc.com/files/original/header.jpg");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: -70px -80px;
            background-attachment: fixed;
            color: white;
            height: 150%;
            text-align: center;
        }
     }

Answer 1

好问题！我相信这个问题已经得到解答here。问题在于背景大小：封面。

Bootstrap CSS后台位置无法在移动设备上运行

1 个答案: