You could always try:
Code:
#x_background img {
object-fit: cover;
}
This resizes the image proportionally, rather than stretching, but you might not be happy with it zooming in on large screens or cutting off some of the image on smaller screens. Sadly doesn't work with IE.
I tend to use background images on title pages only, but I get around the stretching issue (and IE compatibility) by having the image as a pseudo element. You could do something similar by just adding this to the CSS (and removing the background image field from the main learning object page):
Code:
#x_background:before {
content: ' ';
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.6;
background-image: url('your image url here');
background-size: cover;
}
