How can I make an image float to the right of the page, resize in Large and Medium screens, and vanish in Small and Xtra Small screens?
I know how to hide the image using hidden-sm and hidden-xs in bootstrap, but I'm struggling to get the large image to float to the right of the page like the non-responsive picture attached.
Do I need to use Width: % to achieve this effect? I've tried that method but it doesn't seem to work well in terms of responsiveness.
Check out the non-responsive screenshot here
Here's the HTML for the picture:
<!-- PICTURE -->
<div class="container-fluid">
<div class="row">
<div class="col-offset-md-9 col-md-3 hidden-sm hidden-xs">
<div class="BackgroundImage center-block img-responsive"><img src="Pictures/Profile.png" alt="Background Image"></div>
</div>
</div>
</div>
And here's the simple CSS code I've been working with:
/* Background Image/Neil Photo */
.BackgroundImage {
width: 190px;
}
.BackgroundImage img {
z-index: -1;
margin-bottom: -366%;
display: fixed;
}