Make background image transparent without affecting foreground text in Jekyll theme

Question

I am a newbie with HTML and CSS. I am using this Jekyll boostrap landing theme to build a static responsive website. I want to change the background image for it and make it transparent in order to highlight the foreground text. I understand that there are similar questions asked already but they don't work when I tried to apply them for my code base. I would appreciate if I could get a working solution for the css styling that the theme has.

The relevant html & css code that comes with the theme is as below

<div class="intro-header">        
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <div class="intro-message">
                    <h1>{{ page.title }}</h1>
                    <br><h3>{{ page.subTitle }}</h3>
                </div>
            </div>
        </div>

    </div>
    <!-- /.container -->

</div>

The CSS code is

.intro-header {
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-size: cover;
}

@media (min-width: 200px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_200.jpg);
  }
}

/* more media queries for different widths */

@media (min-width: 1329px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_1329.jpg);
  }
}

@media (min-width: 1400px) {
  .intro-header {
    background-image: url(/img/website_background_d5moc7_c_scale,w_1400.jpg);
  }
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}

.intro-message > h1 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
    font-size: 5em;
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

.intro-message > h3 {
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    .intro-divider {
        width: 100%;
    }
}

How do I modify the above code to make the background transparent and foreground bright?

Thanks!

Answer 1

Set the Background Image to 'none' in CSS. In order to override the theme styles, make it more specific. Don't directly edit the theme CSS file, It's a bad practice. You have to write the below CSS in your CSS file.

div.intro-header {
  background-image: none;
}