How to remove horizontal scroll bar from responsive background image?

Question

In my responsive website, I have a div that is full width, and it contains a background image (placed in the CSS file). On the desktop, everything looks fine. However, when I view the page in responsive mode (I'm using Chrome Dev Tools), I get a horizontal scroll bar that I can't get rid off with overflow-x: hidden, nor with max-width: 100% or min-width: 100% I've tried this answer and it doesn't work for me. (I'm using Bootstrap 4)

Here's my code:

/* CSS for Desktop */

.country-background-img {
  background: url('https://placeimg.com/1000/695/animals');
  background-repeat: no-repeat;
  background-size: cover;
  height: 695px;
  padding: 60px 30px 0 30px;
  margin-top: 50px;
}


/* Responsive CSS */

.country-background-img {
  height: auto;
  text-align: center;
  background-attachment: fixed;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<div class="row">
  <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
    <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
      <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
      <p class="about-country-text" id="aboutCountryText">Text 1</p>
      <p class="about-country-text">Text 2</p>
      <p class="about-country-text">Text 3</p>
    </div>
  </div>
</div>

if you use `row` witout a parent `container`, use `d-flex` instead`. — G-Cyrillus, Sep 07 '20 at 19:00

score 0 · Accepted Answer · answered Sep 07 '20 at 18:56

The following will get rid of the horizontal scrollbar and give you just the expected result. I have just wrapped your divs under container-fluid bootstrap class -

/* CSS for Desktop */

.country-background-img {
  background: url('https://placeimg.com/1000/695/animals');
  background-repeat: no-repeat;
  background-size: cover;
  height: 695px;
  padding: 60px 30px 0 30px;
  margin-top: 50px;
}


/* Responsive CSS */

.country-background-img {
  height: auto;
  text-align: center;
  background-attachment: fixed;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />

<div class='container-fluid'>
  <div class="row">
    <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
      <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
        <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
        <p class="about-country-text" id="aboutCountryText">Text 1</p>
        <p class="about-country-text">Text 2</p>
        <p class="about-country-text">Text 3</p>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 2 · answered Sep 07 '20 at 19:01

If you need to preserve your html you can add overflow-x for the document body:

.country-background-img {
    background: url('https://placeimg.com/1000/695/animals');
    background-repeat: no-repeat;
    background-size: cover;
    height: 695px;
    padding: 60px 30px 0 30px;
    margin-top: 50px;
}


/* Responsive CSS */

.country-background-img {
    height: auto;
    text-align: center;
    background-attachment: fixed;
}

body {
    overflow-x: hidden;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">


<div class="row">
    <div class="col-12 country-background-img img-fluid" id="countryBackgroundImg">
        <div class="col-lg-6 offset-lg-6 col-md-12 col-sm-12 col-12">
            <p class="about-country-title" id="aboutCountryTitle">About Brazil</p>
            <p class="about-country-text" id="aboutCountryText">Text 1</p>
            <p class="about-country-text">Text 2</p>
            <p class="about-country-text">Text 3</p>
        </div>
    </div>
</div>

score -1 · Answer 3 · answered Sep 07 '20 at 19:23

-1

add this body { overflow-x:hidden; }

answered Sep 07 '20 at 19:23

Huzee

114
7

This would hide conten that maybe would be shown right? – Kaede Nov 27 '20 at 08:21

How to remove horizontal scroll bar from responsive background image?

3 Answers3