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

1 Attachment

 
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
I do not believe there is a way to fix this, unfortunately. I have a couple themes that use a similar effect to this, and I have been unsuccessful in making it not crop anything.

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.
whimsmedia replied on at Permalink Reply 1 Attachment
whimsmedia
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.
jonesin replied on at Permalink Reply 1 Attachment
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.
whimsmedia replied on at Permalink Reply
whimsmedia
There's also an attachment to my previous post so you can see what I'm talking about.
whimsmedia replied on at Permalink Reply
whimsmedia
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:

$.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.
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
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.
whimsmedia replied on at Permalink Reply
whimsmedia
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.
PineCreativeLabs replied on at Permalink Reply
PineCreativeLabs
Yes I believe so.
jonesin replied on at Permalink Reply 1 Attachment
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.