Setting a responsive background image using Bootstrap to cover the width of a table
Question
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.
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. I've tried various solutions suggested on Stack Overflow and other websites. 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.
1 answers
solution1
0 ACCPTED 2019-02-01 00:16:15
This css is going to work on any screen size, and it will resize automatically. 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; }
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.