Clearview Background image
Permalink
How do I adjust the size of my background image so that it does not crop out a large portion of the image? Compare the attached image to the same image athttp://www.hatchcustoms.com
It would be handy if you could also provide a screenshot of what it looks like for you.
My 1680 x 1050 screen seems to display over 90% of your desired background.
My 1680 x 1050 screen seems to display over 90% of your desired background.
My resolution is 1600 x 900 - see attached for my screenshot. I would be happy if I had th eimage you see, unfortunately mine has lost a lot more of the image.
There's also an attachment to my previous post so you can see what I'm talking about.
Upon further investigation it looks like you're using a jquery plugin called "backstretch" to display the image on the background. There's a homepage for this plugin with examples and useful information:
https://github.com/srobbin/jquery-backstretch...
The code by which you're calling the plugin is this:
As the github plugin page says there are two other parameters, besides speed, you can pass to the plugin. These are "centeredX" and "centeredY". I think centeredY is what you need to be looking at.
Something along the lines of:
Let us know how it goes.
https://github.com/srobbin/jquery-backstretch...
The code by which you're calling the plugin is this:
$.backstretch("/files/6413/3241/9155/testpic.jpg", {speed: 750});
As the github plugin page says there are two other parameters, besides speed, you can pass to the plugin. These are "centeredX" and "centeredY". I think centeredY is what you need to be looking at.
Something along the lines of:
$.backstretch("/files/6413/3241/9155/testpic.jpg", {centeredY: false});
Let us know how it goes.
I am familiar with backstretch. I used it on my some of my own projects. The centeredY:false simply makes it NOT center-align the image vertically within the browser window.
I'm thinking if there's a way to explicitly define the height of the image itself to be 100% of the height of the window, that would be the way to go.
I'm thinking if there's a way to explicitly define the height of the image itself to be 100% of the height of the window, that would be the way to go.
I haven't had a good play with it yet.
Does that just mean it aligns to the top of the page? Something like a top:0px styling?
I would expect it would.
Does that just mean it aligns to the top of the page? Something like a top:0px styling?
I would expect it would.
Yes I believe so.
I got a message from c5mix and he said,
"Try messing with the centeredX and centeredY options. You can see more about those here:http://github.com/srobbin/jquery-backstretch... Look for this code in the theme's header.php file (located at theme_clearview/themes/clearview/elements/header.php): You would need to add those options after the speed option like this: {speed: 750, centeredX: false} "
I did the X axis as false and it made a big difference in my image (see attached. Again, my screen resolution is at 1600 x 900, I would be interested to see how it looks at other resolutions. Thanks for the advice everyone.
"Try messing with the centeredX and centeredY options. You can see more about those here:http://github.com/srobbin/jquery-backstretch... Look for this code in the theme's header.php file (located at theme_clearview/themes/clearview/elements/header.php): You would need to add those options after the speed option like this: {speed: 750, centeredX: false} "
I did the X axis as false and it made a big difference in my image (see attached. Again, my screen resolution is at 1600 x 900, I would be interested to see how it looks at other resolutions. Thanks for the advice everyone.
The only thing I can think of that MIGHT work would be to modify the script that controls this effect, and make it so the script makes the height of the image be equal to the current size of window.
I'm unsure of how to do this exactly, but I suppose it's possible if you know jquery.