Looking for guidance on CSS styling. I have successfully set up a responsive background image on my page and now want to add a circular logo positioned at the bottom center of it. However, I am facing an issue where the logo's position changes when the screen size is adjusted. I need help making sure the logo stays in the same spot regardless of the view size.
I've tried adjusting the padding and positioning of the image, but these settings are not responsive. The image moves up when the screen is smaller and down when it's larger. My goal is to keep it static.
Feel free to check out my latest attempt on this fiddle:
https://jsfiddle.net/ybeuvn9m/
Here's the code snippet:
<div class="container-fluid">
<div class="row">
<div class="splash col-sm-12">
<div class="photo">
<img class="img-responsive img-circle logo" src="http://i.imgur.com/Dum5A8J.png">
</div>
</div>
</div>
</div>
.logo {
padding-top: 200px;
width: 10%;
margin: 0 auto;
display: block;
}
.splash {
background: url('http://s169923.gridserver.com/images/IntelligentsiaMocha.jpg');
background-repeat: no-repeat;
background-size: cover;
height: 50vh;
background-color: rgba(0, 0, 0, 0.2);
background-blend-mode: overlay;
}