...

View Full Version : Background Positioning Issues



Wuteverx1972
10-20-2010, 10:15 AM
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...
http://www.csupomona.edu/~hlugo/Other/bg.jpg

ax8l
10-20-2010, 11:13 AM
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.

Wuteverx1972
10-20-2010, 01:43 PM
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.

SB65
10-20-2010, 01:51 PM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum