Scaleable background images

  • 1
  • Question
  • Updated 7 years ago
  • Answered
Does anyone know how to set/upload/make background images that will scale appropriately to different size monitors?

I want to upload a background image that will work on square PC monitors as well as widescreen (mac) monitors without looking squished up. Can anyone help?
Photo of giles

giles

  • 12 Posts
  • 0 Reply Likes

Posted 7 years ago

  • 1
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi Giles,

I did recently reply to the email you sent to our support team. You will certainly receive a response from our HTML team in regards to this query and your Squeaky Clean query as soon as they arrive back online.
Photo of KanThaiDecor

KanThaiDecor

  • 2402 Posts
  • 263 Reply Likes
Actually I think many of us would like to know about the issue of computer monitors as it relates to our sites....We may be close to, or to the point where wide screens are more common.We need to be thinking about tweaking our sites to be optimal for the most common
Photo of Brianna

Brianna

  • 2045 Posts
  • 92 Reply Likes
Hi John,
Thanks for the comment. I have asked out HTML team to respond on these posts as well as Giles' email so our community is aware of our response as well since yes, as you are saying, this is more or less a 'universal' change.
Photo of giles

giles

  • 12 Posts
  • 0 Reply Likes
i've did read stuff online about css3 and jQuery code etc, but honestly it may as well have said rhubarb earthmover teapot endbracket for all the sense it made to a dyed-in-the-wool luddite who didn't grow up with computers. I've just spent -8 hours- trying to make/crop an image to the right size so it just does it, with no luck. I was hoping there's a simple answer/even simpler widget that takes care of it...the html team deserve beer if they can come up with something!
Photo of Sanja

Sanja, Official Rep

  • 10698 Posts
  • 495 Reply Likes
Hello Giles and John

I am part of the HTML Team and to be honest, I don't know the answer to this. I have asked this question to our engineer who I hope will be able to enlighten us on this subject.

In the meantime, Giles, I believe I have responded to your question via email with some possible workarounds for you.
Photo of the_pete

the_pete

  • 65 Posts
  • 16 Reply Likes
You could try something like this...

html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

This will only work on newer versions of Firefox, Safari, Chrome and Opera.

You could also use something like this - css media queries...

@media screen and (min-width : 1200px) {
body{
background:red;
}
}

I'm pretty sure that won't work in IE either.

The way to do this in IE involves a lot of javascript and absolute positioned img elements - a bit to complicated to go into without a lot of knowledge on the subject.

Hope this helps :)