XF 1.2 Resize Background image for different resolutions?

[Ren3gade10]

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?

 

[TPerry]

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/

 

[Ren3gade10]

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/

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.

 

[TPerry]

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)

 

[TPerry]

@Ren3gade10, try the below in the box

width: 100%;
position: absolute;
top: 0;
left: 0;

And I'm not going to take credit for it if it works (or it doesn't ).
I found it at http://css-tricks.com/how-to-resizeable-background-image/

 

[Ren3gade10]

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: [url]http://www.calebgittins.com.au/news/tutorial-full-screen-backgrounds-with-jquery/[/URL]

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.

<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.

 

[EQnoble]

can you link me to your forum

 

[TPerry]

Changed resolutions.. still messed up.

As I said, I don't use it, but there is an example of someone who uses xenForo that does at http://xenforo.com/community/threads/question-set-background-styler-to-workd-with-cookies.50968/.

 

[TPerry]

You may also want to start a conversation with @Russ as they use it on their Splash style.

 

[Ren3gade10]

You may also want to start a conversation with @Russ as they use it on their Splash style.

Yeah I'm talking to Russ. Thanks!

 

[TPerry]

Yeah I'm talking to Russ. Thanks!

Good deal. @Russ & @Steve F are good people. I use one of their styles on two of the forums that I have and on the rare occasion I need support what they provide is A+. They are also a wealth of knowledge on styling between the two of them.

 

[Ren3gade10]

I agree! I have only worked with Russ, and he is great! (He did my custom style)