Encountering an issue with my homepage: the jumbotron and background images disappear when the window size changes from full screen to small screen. However, upon resizing the window, the images re-appear. How can I make these images responsive?
Below is the current styling:
<style type = "text/css">
.bd-placeholder-img {
font-size: 1.125rem;
text-anchor: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
@media (min-width: 768px) {
.bd-placeholder-img-lg {
font-size: 3.5rem;
position:center;
background-size:cover;
background-attachment:fixed;
}
.jumbotron{
margin-top:20px;
background-image:url("{% static '9.jpg'%}" );
background-repeat:no-repeat;
background-size:cover;
position:center;
color:white;
}
body{
background-image:url("{% static '8.jpg' %}");
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
background-attachment:fixed;
overflow:visible;
}