Need some help with a WP sales theme

I want my theme to look something like this, and no, the site is not mine as I dont sell products that will make me mere pocket change: http://www.clickhereyouidiot.com/

What I want is for the blue and pink ..erh.. "sidebars" to stand still and not follow the scroll, like on that site. I wanna do that on my own site, but I have no idea how the coding is like.

Anyone?

Maybe someone even know of a good theme like this I can try?

I asked the same thing over at DP, but that forum sucks so no one answered. Bah. Why did I even bother posting there..

There is nothing special about that effect. It is a simple CSS property.
On that particular site's case... This is the CSS that was used:


Explanation of the CSS
* background-attachment:fixed; ---> This is the property that forces the background image to stay static and not scroll with the page.

* background-image:url(hxxp://www.clickhereyouidiot.com/images/back2.jpg); ---> This is the actual image used for the background.

* background-position:50% 50%; ---> This sets the starting position of the background image used.

That's pretty much all there is to it.

Ah great!

But what about the image size? What happens with other screen resolutions?

iliketurtles said:

Ah great!

But what about the image size? What happens with other screen resolutions?

Click to expand...

Ok... Here's how that is taken care of.

If you download the image that the site uses as the background and see its dimensions, you'll see that it is 1500 wide by 492 high.
Most internet users have monitors set up at resolutions of 1024x768 or 1280x1024.
So what happens is that the CSS code used will place the image smack in the middle of the screen...

background-position:50% 50%; -> The background-position property takes parameters like this: x% y% where 0% 0% would be the top-left of the screen and 100% 100% would be the bottom-right of the screen. So by doing 50% 50% the image is place in the middle of the screen no matter what resolution. And since the image is wider than the most common resolutions being used, there is no visible difference for visitors using those resolutions. The only problems would be when visitors using higher resolutions like 1600x1200 or the new widescreen monitors like 1920x1200. In those cases the portions of the screen that are not covered by the image would show the color that the site has set up as the background color for the site... The easiest way of making sure that all resolutions are covered is to make a background image that is wider than the highest resolution you want to target. So if you make your image 2000px wide you should be Ok up to 1920x1200.
There are monitors with higher resolutions out there, but those are mostly for specific professions and the people that own them would not be impressed by that site's design anyway (since most large resolution monitors are used by the creative types)...

Electron said:

you could probably accomplish the same effect with an iframe

Click to expand...

Yeah, but why Iframe when CSS is so much easier.

Hell you could accomplish the same effect with CSS3 and get rid of the background image alltogether, but CSS3 is not 100% supported by all browsers so not practical.

Electron said:

HTML5. that just happened

Click to expand...

HTML5 would do it too, but again... Widespread support of new properties is not available in all browsers and since most interwebbers are still on IE6 or 7 (which don't support CSS3 or HTML5 yet) you're better off with the CSS2 option wich is supported by all browsers.

Thank you for good answers, peeps! Man I love BHW. Over at DP I still haven`t got a single answer..

I`ll try to get this crap to work now, guess I`ll be back if it doesn`t..