• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Resize Background image for different resolutions?

#1
Well on my site I use a background image. I can't remember what the image size is, but when I look at the site on my 1920x1080 monitor, it looks perfect.

But when I use a different PC or Mac with other resolutions, the image doesn't fit perfectly. Some resolutions you can only see about half of the background image, and some resolutions the background image is shifted far to the right, etc etc.

How can I fix this to fit all resolutions perfectly and center?
 

Tracy Perry

Well-known member
#2
Well on my site I use a background image. I can't remember what the image size is, but when I look at the site on my 1920x1080 monitor, it looks perfect.

But when I use a different PC or Mac with other resolutions, the image doesn't fit perfectly. Some resolutions you can only see about half of the background image, and some resolutions the background image is shifted far to the right, etc etc.

How can I fix this to fit all resolutions perfectly and center?
Where you define your background image use CSS.
http://www.w3schools.com/cssref/css3_pr_background-size.asp

Another option is to use javascript
http://srobbin.com/jquery-plugins/backstretch/
 
#3
I did the first option.

I put in my Miscellanous box (where you can enter CSS for the background image)
div
{
background:url(./styles/mystyle/xenforo/images/bg2.jpg);
background-size:1884px 1052px;
background-repeat:no-repeat;
}

But when I change my resolutions on my screen it will moves the background image to different places and doesn't show it perfectly like it does when I'm on 1920x1080 resolution.
 

Tracy Perry

Well-known member
#4
I did the first option.
But when I change my resolutions on my screen it will moves the background image to different places and doesn't show it perfectly like it does when I'm on 1920x1080 resolution.
Your best option will probably be the javascript route. It's not really that hard to implement.
You may also want to try background-size: contain or background-size: 100% (or auto)
 
#6
Ehh that didnt seem to do the trick either.
Can you please explain to me how to install that javascript backstretch?
When I click to download it on their site it just hows a page with a bunch of code.

EDIT: I followed this: http://www.calebgittins.com.au/news/tutorial-full-screen-backgrounds-with-jquery/

But It still isnt working on my site. I downloaded the backstretch file (i had a brainfart before), and i uploaded it to public/js/jquery/jquery.backstretch.min.js

and I added this to my footer template.

Code:
<script type="text/javascript" src="<?php bloginfo('template_url');?>./js/jquery/jquery.backstretch.min.js"></script>
<script type="text/javascript">
$.backstretch("<?php bloginfo('template_url');?>./styles/mystyle/xenforoe/images/bg2.jpg", {speed: 150, centeredX: false, centeredY: false});
</script>
Changed resolutions.. still messed up.
 
Last edited: