I have a <div> on the page with the CSS class .svgImage applied to it. Whenever I resize the browser window, the svg image resizes correctly but keeps shifting its position on the page.
When I make the browser window vertically smaller, the svg image moves upwards. And when I make it horizontally smaller, the svg shifts leftwards.
The problem is that I want the svg image to remain fixed at the bottom right corner of the page. Just like how all four corners of a square stay in place, I want the bottom right corner of the svg file to stick to the bottom right corner of the page.
Below is the CSS code I'm using to try and keep the div stuck:
.foo {
background: url(images/GraphicElementDesktop.svg);
opacity: 1;
height: 45%;
width: 33%;
position: absolute;
background-repeat: no-repeat;
right: 0px;
bottom: 0px;
z-index: 5000;
filter: alpha(opacity=25) progid:DXImageTransform.Microsoft.Alpha(opacity=25);
}
Does anyone have any ideas on how to solve this issue?
Thank you for your help!