So after tinkering for a while and looking at what might be a good addition to our current store I might have finally found it, there is just no add-on for this, though it is a small modification.
So banners basically resize based on the screen width, the screen doesn't really cut off the corners, which is too bad because then the text on the banner is unreadable.
So what I want to adjust is that it cuts the edges of at a certain screen width. So I have created a small example for you guys to actually see what I mean with cutting off the edges: http://jsfiddle.net/ab4p4aaj/4/
Well seems easy to implement right? Well that's when I realized that I have to place the background in the .LESS file, but you can just place it in the .tpl file? Yes I definitely could but the problem is that I want no inline CSS. Although I do realize that this small piece of code doesn't really matter, I just want to know if this is possible in any way.
!!! Do keep in mind that this is meant to work for multiple banners, the #mainslider will have a suffix which will be the banner ID. !!!
Do you guys have any advice on how to fix this?