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.

Instead of setting background to a div, why don't you set it to entire html like this: https://stackoverflow.com/a/22887578/1225270 — arunes, Feb 01 '19 at 00:00
Hello, thanks so much for your response! The reason that the background image is set to a div is to make it responsive using Bootstrap. That way it will display correctly on any screen size. — fdmcgov, Feb 01 '19 at 00:07

score 0 · Accepted Answer · answered Feb 01 '19 at 00:16

0

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;
}

answered Feb 01 '19 at 00:16

arunes

3,464
2
21
31

1

That absolutely did the trick! Thank you so much for your help! – fdmcgov Feb 01 '19 at 00:49

Setting a responsive background image using Bootstrap to cover the width of a table

1 Answers1