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

Need some help with a WP sales theme

Discussion in 'Web Design' started by iliketurtles, Jul 16, 2010.

  1. iliketurtles

    iliketurtles Regular Member

    Joined:
    Dec 10, 2008
    Messages:
    283
    Likes Received:
    10
    Home Page:
    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.. :rolleyes:
     
  2. xXSebaSXx

    xXSebaSXx Registered Member

    Joined:
    May 8, 2009
    Messages:
    52
    Likes Received:
    28
    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:

    Code:
    body {
      background-attachment:fixed;
      background-image:url(http://www.clickhereyouidiot.com/images/back2.jpg);
      background-position:50% 50%;
    }
    
    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.
     
  3. iliketurtles

    iliketurtles Regular Member

    Joined:
    Dec 10, 2008
    Messages:
    283
    Likes Received:
    10
    Home Page:
    Ah great! :)

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

    xXSebaSXx Registered Member

    Joined:
    May 8, 2009
    Messages:
    52
    Likes Received:
    28

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

    :)
     
    Last edited: Jul 16, 2010
  5. xXSebaSXx

    xXSebaSXx Registered Member

    Joined:
    May 8, 2009
    Messages:
    52
    Likes Received:
    28
    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.
     
  6. xXSebaSXx

    xXSebaSXx Registered Member

    Joined:
    May 8, 2009
    Messages:
    52
    Likes Received:
    28
    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.
     
  7. iliketurtles

    iliketurtles Regular Member

    Joined:
    Dec 10, 2008
    Messages:
    283
    Likes Received:
    10
    Home Page:
    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.. :p