Can background image adjusts to screen size?

Plus d'informations
il y a 9 ans 11 mois #3932 par annem
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

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 10 mois #4003 par Fay
Réponse de Fay sur le sujet Can background image adjusts to screen size?
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
Les utilisateur(s) suivant ont remercié: annem

Connexion ou Créer un compte pour participer à la conversation.

Plus d'informations
il y a 9 ans 7 mois #4167 par Neil Pollock
Réponse de Neil Pollock sur le sujet Can background image adjusts to screen size?
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; }
Les utilisateur(s) suivant ont remercié: annem

Connexion ou Créer un compte pour participer à la conversation.

Modérateurs: ronmalimcn
Temps de génération de la page : 0.136 secondes
Copyright © 2026 The Xerte Project.
Xerte logo Apereo logo OSI Logo