使用Bootstrap设置响应式背景图片以覆盖表格的宽度

Question

我试图在整个“关于”页面中显示的背景图像显示不正确。 它适用于我容器中的第一个<div>，但是对于第二个<div>，它在表的左侧和右侧都有大的白色条。

我真的不想寻求帮助，因为我一般对Bootstrap和HTML还是陌生的，但是我一直在为此苦苦挣扎大约一个星期，但无济于事。 我尝试了Stack Overflow和其他网站上建议的各种解决方案。 老实说，我已经尝试了很多事情，以至于我不记得自己尝试过的一切。 我试着将表放在它自己的容器中，向我当前拥有的容器中添加行，在多个位置添加背景图像，等等。 我敢肯定我在这里做些愚蠢的事，我事先表示歉意。 感谢您提供的任何帮助。

<body>
    <header>
        <!-- Start of Top Navbar -->
        <!-- End of Top Navbar -->  
        <!-- Start of Background Image -->
        <div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
            <!-- Start of Unique Page Content -->
            <div class="container h-100">
                <div class="d-flex align-items-center justify-content-center h-100 align-self-center">
                    <div class="d-flex flex-column text-center">
                        <h1><strong>About</strong></h1>
                        <h4>
                            Content.
                        </h4>
                    </div>
                </div>
                <div class="d-flex flex-column text-center">
                    <div class="view" style="background-image: url('/images/backgrounds/forest_sunset.jpg'); background-color: black; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center center;">
                        <div class="table-responsive">
                            <table class="table table-sm" id="forest_sunset">
                                <thead>
                                    <tr>
                                        <th scope="col"></th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <th scope="row"></th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                    </tr>
                                    <tr>
                                        <th scope="row"></th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                    </tr>
                                    <tr>
                                        <th scope="row"></th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                        <th scope="col">Data</th>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>  
            </div>  
            <!-- End of Unique Page Content -->
        </div>
        <!-- End of Background Image -->
    </header>
    <footer>
        <!-- Start of Bottom Navbar -->
        <!-- End of Bottom Navbar -->
    </footer>   
        <!-- JQuery --> 
        <!-- Popper.js -->
        <!-- Bootstrap JavaScript -->
</body>

这是页面外观的图像。 我希望它看起来像那样，除了背景占据了屏幕的整个宽度而侧面没有留白条。 我也希望它具有响应性，因此为什么我首先尝试学习Bootstrap。

Answer 1

此CSS可以在任何屏幕尺寸上工作，并且会自动调整大小。 因此它是响应式的。 它能解决您的问题吗？

 body { background: url("https://images.pexels.com/photos/373912/pexels-photo-373912.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

使用Bootstrap设置响应式背景图片以覆盖表格的宽度

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-02-01 00:16:15

使用Bootstrap设置响应式背景图片以覆盖表格的宽度

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-02-01 00:16:15

解决方案1
0 已采纳 2019-02-01 00:16:15