Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Can background image adjusts to screen size?

Can background image adjusts to screen size? 3 years 1 month ago #3932

  • anne.misselbrook@northampton.ac.uk
  • anne.misselbrook@northampton.ac.uk's Avatar Topic Author
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 58
  • 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? 3 years 2 weeks ago #4003

  • Fay
  • Fay's Avatar
  • Offline
  • Expert Boarder
  • Expert Boarder
  • Posts: 158
  • Thank you received: 49
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: anne.misselbrook@northampton.ac.uk

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

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

  • Neil Pollock
  • Neil Pollock's Avatar
  • Offline
  • Senior Boarder
  • Senior Boarder
  • Posts: 71
  • 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 following user(s) said Thank You: anne.misselbrook@northampton.ac.uk

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

  • Page:
  • 1
Moderators: alimcn
Time to create page: 0.050 seconds
Copyright © 2019 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search