Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2010
    Posts
    53
    Thanks
    6
    Thanked 1 Time in 1 Post

    Background Positioning Issues

    Hey guys, so I'm trying to implement this trendy background that everyone seems to be doing (e.g. cnet, cramster, etc.) for my boss's company that I work for. This is an e-comerce site so I am very restricted on the coding. However, it allows me to adjust the store alignment, store width, content min. height, left and right spacer width and input CSS codes for store design.

    I managed to display the background the way I want. However when it comes down to different screen resolutions, the background image won't stay aligned with the store with. Inputting 80% on store width helps for some screen resolutions but not all, especially when you hit CTRL+ to zoom in or CTRL- to zoom out in a page. The background image will not auto adjust.

    If you look at CNET.com, their background for the '3D tab' look adjusts perfectly to screen resolution as well as when you zoom in and out. Cramster.com does this too (You must actually login to the site to see what I am talking about). So I am wondering if it is possible to implement this onto my company's site as well?

    Also is there a way to input 2 (left and right) background images for that '3D' effect?
    Thanks in advance.

    Also, in case you guys were wondering...
    Here are my Settings:
    Store width = 1000px
    Store alignment = center
    Left Spacer = 0
    Right Spacer = 0

    CSS:
    body {
    background: #fffeff
    url(http://www.modbargains.com/images/WhiteBG.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top-center;
    }

    Here's a screenshot of the website I'm working on...

  • #2
    New to the CF scene
    Join Date
    Oct 2010
    Location
    Romania
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It breaks at different resolutions because you use an image (the background) with a certain resolution. This is the wrong way to do it.
    You have to have a class/id(css rule) for one corner (3D tab) and use it in your design assigning it to an html element.

  • #3
    New Coder
    Join Date
    Aug 2010
    Posts
    53
    Thanks
    6
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ax8l View Post
    It breaks at different resolutions because you use an image (the background) with a certain resolution. This is the wrong way to do it.
    You have to have a class/id(css rule) for one corner (3D tab) and use it in your design assigning it to an html element.
    I added separate ids to the top menu tabs:
    #home{
    background: #fffeff
    url(http://www.modbargains.com/images/WhiteBG.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top-center;
    }
    #about{
    background: #fffeff
    url(http://www.modbargains.com/images/WhiteBG2.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top-center;
    }
    #account{
    background: #fffeff
    url(http://www.modbargains.com/images/WhiteBG2.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top-center;
    }
    #contact{
    background: #fffeff
    url(http://www.modbargains.com/images/WhiteBG2.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: top-center;
    }

    Right now it is disabled but if I were to enable it on the site the IDs are located under the body tag. Ex. <body id="home"> It displays it right but I know it isn't the right way to go about it like you said.

    I tried
    <body>
    <div id="home"
    </div>
    </body>
    but that didn't work (probably cuz i gotta adjust the settings). I'm new to CSS but I'm starting to get the hang of it. I'll see what I can come up with later today and i'll post my results. Any tips would be gladly appreciated.

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Have a look at http://www.alistapart.com/articles/slidingdoors/ which describes what I think you're trying to do.

    The trick with zoom is to make the images you are using for background of your tabs bigger than they need to be, so if the page is zoomed, there is sufficient "spare image" to fill the expanded space.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •