I'm new to HTML and CSS, currently working with a Jekyll boostrap landing theme from GitHub to create a static responsive website. I'm looking to change the background image on the theme and make it transparent to enhance the visibility of the foreground text. I've come across some related discussions on Stack Overflow but haven't been successful in applying them to my code base. Any suggestions on how I can achieve this using the existing CSS styling provided by the theme would be greatly appreciated.
The relevant HTML & CSS code snippet from the theme is shown 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>
Here's a snippet of the CSS code:
.intro-header {
padding-top: 50px;
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 -->
.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%;
}
}
Does anyone know how I could tweak the code above to achieve a transparent background and bright foreground effect?
Appreciate any help or advice!