Supporting each other

Community forums

Welcome, Guest

Forum

Main Forum

Accessibility

Can background image adjusts to screen size?

Page:
1

TOPIC:

Can background image adjusts to screen size? 7 years 8 months ago #3932

annem Topic Author Offline Elite Member Posts: 178 Thank you received: 0	Hi, Can a background image adjust to the screensize? The image looks fine in the background as normal screen, but when the 'expand screen' button is clicked, the background image looks stretched. Please can you let me know. Many thanks. Anne
	Please Log in or Create an account to join the conversation.

Can background image adjusts to screen size? 7 years 7 months ago #4003

Fay Offline Elite Member Posts: 231 Thank you received: 86	Hi Anne No, background images are just made to fit the current screen dimensions so they can appear stretched. At some point we would like to do some more work on making images etc. more responsive to screen size so this is something I will look at then. Fay The following user(s) said Thank You: annem
	Please Log in or Create an account to join the conversation.

Can background image adjusts to screen size? 7 years 3 months ago #4167

Neil Pollock
Offline
Premium Member
Posts: 92
Thank you received: 4

You could always try:

#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):

#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;
}

The following user(s) said Thank You: annem

Please Log in or Create an account to join the conversation.