Welcome, Guest
Username: Password: Remember me

TOPIC: Can background image adjusts to screen size?

Can background image adjusts to screen size? 2 years 9 months ago #3932

  • Anne Misselbrook
  • Anne Misselbrook's Avatar
  • Offline
  • Senior Boarder
  • Posts: 51
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
The administrator has disabled public write access.

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

  • Fay
  • Fay's Avatar
  • Offline
  • Expert Boarder
  • Posts: 149
  • Thank you received: 47
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 administrator has disabled public write access.
The following user(s) said Thank You: Anne Misselbrook

Can background image adjusts to screen size? 2 years 5 months ago #4167

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Senior Boarder
  • Posts: 68
  • Thank you received: 3
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 administrator has disabled public write access.
The following user(s) said Thank You: Anne Misselbrook
Moderators: Alistair McNaught
Time to create page: 0.261 seconds
Powered by Kunena Forum