inherit
147439
0
Oct 15, 2013 3:44:38 GMT -8
britannia
343
September 2009
britannia
|
Post by britannia on Mar 13, 2013 13:46:25 GMT -8
Is there any template modification or any css addition I can use to scale my background image so it fits the width of every monitor?
|
|
inherit
126477
0
Apr 21, 2023 15:18:52 GMT -8
Shrike
Re-appeared briefly after 6 years only to no doubt disappear again.
1,569
June 2008
shrike
|
Post by Shrike on Mar 16, 2013 5:15:39 GMT -8
What size is the image you're using? Obviously you won't be able to do this easily if it is a small image. Edit: For other interested coders, something related where I'm trying to scale the image to fit the window AND maintain the aspect ratio. Needs a browser that supports vh units and background-size (IE 10, FF 19, Chrome 20), and still has some issues. |
|
inherit
147439
0
Oct 15, 2013 3:44:38 GMT -8
britannia
343
September 2009
britannia
|
Post by britannia on Mar 16, 2013 16:40:17 GMT -8
The image (which is a montage) is 1500px x 413px. My idea was to be able to scale the image horizontally and then repeat it vertically.
It's not really a problem if it's not possible because it still looks okay by just repeating it in the Visual Editor.
|
|
inherit
126477
0
Apr 21, 2023 15:18:52 GMT -8
Shrike
Re-appeared briefly after 6 years only to no doubt disappear again.
1,569
June 2008
shrike
|
Post by Shrike on Mar 16, 2013 17:20:49 GMT -8
The image (which is a montage) is 1500px x 413px. My idea was to be able to scale the image horizontally and then repeat it vertically. It's not really a problem if it's not possible because it still looks okay by just repeating it in the Visual Editor. A montage image (like the one on the site in your signature) is good at repeating so it makes most sense to do that rather than have it scaled up/down. You can add body {background-size: contain;} to the Style Sheet (at the bottom is easiest) to see what you could do. That will scale the image so that the longest dimension of the image matches the longest dimension of the window while keeping the aspect ratio the same. Now, if you're still reading at this point  I personally think scaling images usually ruins them. For an example, my tablet has a very high pixel density, so it scales everything up to make it visible. While this makes text look nice, it makes images look worse (unless they were actually being scaled down, like using a wallpaper sized image as an avatar) like in this screenshot. |
|
inherit
147439
0
Oct 15, 2013 3:44:38 GMT -8
britannia
343
September 2009
britannia
|
Post by britannia on Mar 17, 2013 7:20:15 GMT -8
Thanks Shrike, that's really helpful.
|
|
inherit
The Dream Crusher (Ret.)
164921
0
Apr 1, 2014 11:00:25 GMT -8
Tim Camara
Teach a man to fish, etc., etc.
1,721
March 2011
tcamara
|
Post by Tim Camara on Mar 19, 2013 7:46:15 GMT -8
|
|
inherit
147439
0
Oct 15, 2013 3:44:38 GMT -8
britannia
343
September 2009
britannia
|
Post by britannia on Mar 19, 2013 7:49:14 GMT -8
Thanks Tim, I did check that site out when I was trying to figure out my site's background, but Shrike's advice worked a treat.
|
|
inherit
187402
0
Mar 23, 2016 19:15:19 GMT -8
Barkley
1,590
December 2012
avinalaff
|
Post by Barkley on Jul 24, 2013 8:51:40 GMT -8
Guys, I just wanted to share my own experiences incase it helps somebody. I have a few different sized monitors which is handy for checking sizes are working etc, but I wasn't getting things to show across each monitor size perfectly, so I went into the individual style sheets (admin/themes/your particular theme/css) and after trying several options, I realized that the way forward was not to have an image that was 'big enough to do every resolution / monitor size' but instead to have an image that was 'small enough' to suit all, so I changed my particular themes background image, which had been 1920x1080, to a smaller size of 1024x768. Then, at the bottom of the css page, I simply added : body {background-size:100% 100%;}Now it appears to work across all my monitors. I'll now add it to 'all' my theme style sheets. Some further help with personalizing your site using your custom pages facility, is that you can have each page you create with a different background. Add the following code between your <div's
<div>
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('<!--url of your image-->');
background-repeat:no-repeat;
background-size:100% 100%;
}
</style>
</head>
<body>
<!-- now add your own thing etc between-->
<!--then close the body and html tags-->
</body>
</html>
</div>I hope that helps somebody. |
|
I personally think scaling images usually ruins them. For an example, my tablet has a very high pixel density, so it scales everything up to make it visible. While this makes text look nice, it makes images look worse (unless they were actually being scaled down, like using a wallpaper sized image as an avatar) like 
