使用Bootstrap设置响应式背景图片以覆盖表格的宽度
[英]Setting a responsive background image using Bootstrap to cover the width of a table
问题描述
The background image that I am trying to display throughout my entire About page is not displaying correctly. 
我试图在整个“关于”页面中显示的背景图像显示不正确。 It works for the first < div > in my container, but for the second < div > it has large white bars on the left and right sides of the table. 它适用于我容器中的第一个<div>，但是对于第二个<div>，它在表的左侧和右侧都有大的白色条。
I really didn't want to ask for help, as I'm very new to Bootstrap and HTML in general, but I've been struggling with this for about a week now to no avail. 我真的不想寻求帮助，因为我一般对Bootstrap和HTML还是陌生的，但是我一直在为此苦苦挣扎大约一个星期，但无济于事。 I've tried various solutions suggested on Stack Overflow and other websites. 我尝试了Stack Overflow和其他网站上建议的各种解决方案。 I've honestly tried so many things that I can't remember everything I've tried. 老实说，我已经尝试了很多事情，以至于我不记得自己尝试过的一切。 Off the top of my head, I've tried putting the table in it's own container, adding rows to the container that I currently have, adding the background image in multiple places, and many more. 我试着将表放在它自己的容器中，向我当前拥有的容器中添加行，在多个位置添加背景图像，等等。 I'm sure that I'm doing something stupid here, and I apologize in advance. 我敢肯定我在这里做些愚蠢的事，我事先表示歉意。 Thanks for any help that you can provide. 感谢您提供的任何帮助。
<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>
Here is an image of what the page looks like. 这是页面外观的图像。 I want it to look like that, except with the background taking up the full width of the screen without leaving the white bars on the side. 我希望它看起来像那样，除了背景占据了屏幕的整个宽度而侧面没有留白条。 I also want it to be responsive, hence why I tried to learn Bootstrap in the first place. 我也希望它具有响应性，因此为什么我首先尝试学习Bootstrap。
1 个解决方案
解决方案1
0 已采纳 2019-02-01 00:16:15
This css is going to work on any screen size, and it will resize automatically. 此CSS可以在任何屏幕尺寸上工作，并且会自动调整大小。 So it is responsive. 因此它是响应式的。 Does it address your issue? 它能解决您的问题吗？
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; }
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.