X-Cart forums

[digiemp]

Hello,

My site is fixed width at

min-width: 780px;
max-width:970px;

and I want to add a static background image which would be visible to those with wider resolutions. I am able to add a background image, but I can't seem to get it how I'd like. The image, which I want on the outside of the template, never seems to show up right. Currently I'm making a 1440px wide image and setting it as the background. And of course, I add the subject to the edges of the image. This doesn't seem to be the right way to go though. I want the image fixed and static so that it doesn't move when a user scrolls.

Any suggestions?

Thanks,

[digiemp]

Oh, I should add that I am familiar with the

background-repeat:no-repeat;
background-attachment:fixed;

and other commands. My problem is how to get the image where I want it. There has to be a better way than simply playing with the physical size of the actual image.

Thanks,

[balinor]

background-position: center top;

[digiemp]

Thanks, Ryan. But that doesn't seem to be the fix I need.

The middle content is affected still, meaning the image shows up everywhere and not just outside the defined template. The right and left columns are unaffected, that is, they appear normal which is good, but the image shows through the center column. How do I get the image just to display on the outside of the right and left columns, just for people with screen resolutions larger than 960 wide?

Also, the background does not affect the footer so this looks a little weird as well.

[Sunray Sales]

Can you give us a link to your site, we can quickly use firebug to determine the correct style you need for your background image to appear the way you want.

Without being able to play with your site, it would be a little difficult to determine the style needed.

[digiemp]

Attached is a screen shot showing what happens.

[digiemp]

Okay, I added

background-color:#FFFFFF;

to the

#center-main

part and that helped. But the top content that isn't part of the products doesn't have an outline and it looks off. Also, the footer is still unaffected.

Currently the image is 100% fixed in place. Meaning that as my window resizes, the image does not. I can't always see it, depending on my window size. I would like the image to be just outside of the right and left columns, always just to the side of them. Currently I can get this to happen on the left, but the right depends on window size. Unless I just resize the image itself, which moves the image closer or farther from the right column. Is there a way to make the image fluid like the site itself?

[digiemp]

Added

background-color:#FFFFFF;

to

#center {

and it looks a lot better. Instead of actually having an image, an object, I set the background to a color for now since I don't know how to make it relative.

Thanks,

[Sunray Sales]

Yes you are on the correct path in terms of what you want to accomplish. I would like to re-iterate, continue using Firebug and keep playing with the css until you get the desired results. Also keep track of them, so that you implement the final changes in your main.css.