I'm struggling with creating a responsive website, specifically with images that have a background-imaged mask. While they look fine on larger screens, on medium and small screens, my headline and some images are not visible with the "masked" background image. Can you help me identify where I might be making a mistake? Is it a coding issue or a problem with my method?
The images that display on the screen can be found at the bottom of this page. In larger screens, there are no issues, but on other screens, the headline is not visible and only half of the images are shown, with the background failing to stretch to cover all images and the headline.
Visit the website here to have a better understanding of the problem.
<!-- SCRIPTS -->
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="js/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- MDB core JavaScript -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!--Menü scroll change color-->
<script>
$(document).ready(function(){
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if (scroll > 10) {
$(".navbar").css("background", "black");
} else {
$(".navbar").css("background", "transparent");
}
});
</script>
<!--Menü scroll change color-->
html,
body,
header,
#intro {
height: 100%;
}
#intro {
background: url('../img/fft99_mf5629880.Jpeg') no-repeat center center fixed ;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family:Arial;
}
.navbar-brand{
font-family: Gabriola;
font-size:35px;
padding-top:10px;
}
.navbar-nav li a {
color:white !important;
font-family: 'Kristen ITC';
}
/* Rest of the CSS code */