Screen Issues

[timduncan86]

Many of your images are at fault being too wide to render at lower resolutions

As one is 998px × 640px

A fluid layout would utilize a small tile for a background repeated as required

Your main images need to be down sized in width to at least fit the lowest resolution you are concerned with

Maybe 1024X768

Well the only image I'm having trouble with is the header at the top of the page. In my stylesheet I have the following:

#logoWrapper {
background-image:url(http://rainenjewelry.com/pix/headban);
background-repeat:no-repeat;
height:160px;
background-position: top center;
}


That being said, the size of the image itself is 1095x161.

So how should I make this image so it appears normal?

[kobra]

So how should I make this image so it appears normal?

You don't as a single image with a mainWrapper being fluid or 100%

Options
Make the mainWrapper a fixed width to match your image or 1095px

Or seperate your image into a true background image with a seperate image as a logo
This still does not address your other too wide images

i.e. dealhead.jpg at 998px × 198px
So with left & right column at 150px each your total is 1298px

[timduncan86]

You don't as a single image with a mainWrapper being fluid or 100%

Options
Make the mainWrapper a fixed width to match your image or 1095px

Or seperate your image into a true background image with a seperate image as a logo
This still does not address your other too wide images

i.e. dealhead.jpg at 998px × 198px
So with left & right column at 150px each your total is 1298px

Okay, so I have made the width of the mainwrapper to a fixed 1095px. I have, for now, removed the images on the main page. Everything seems to be looking a lot better now. Do you have any suggestions on the new width of those images?

[clydejones]

Many of your images are at fault being too wide to render at lower resolutions

As one is 998px × 640px

A fluid layout would utilize a small tile for a background repeated as required

Your main images need to be down sized in width to at least fit the lowest resolution you are concerned with

Maybe 1024X768

Your header image is 1095px wide.
I'd reduce that to 1000px wide

[clydejones]

Well the only image I'm having trouble with is the header at the top of the page. In my stylesheet I have the following:

#logoWrapper {
background-image:url(http://rainenjewelry.com/pix/headban);
background-repeat:no-repeat;
height:160px;
background-position: top center;
}


That being said, the size of the image itself is 1095x161.

So how should I make this image so it appears normal?

You're also missing an image suffix, and your are using an absolute reference to that image.

I'd copy the image to includes/templates/YOUR_TEMPLATE/images

and then make the highlighted changes in your stylesheet.css

#logoWrapper {
background-image:url(../images/headban.jpg);
background-repeat:no-repeat;
height:160px;
background-position: top center;
}

[timduncan86]

You're also missing an image suffix, and your are using an absolute reference to that image.

I'd copy the image to includes/templates/YOUR_TEMPLATE/images

and then make the highlighted changes in your stylesheet.css

#logoWrapper {
background-image:url(../images/headban.jpg);
background-repeat:no-repeat;
height:160px;
background-position: top center;
}

Okay,

So I have fixed this. Just out of curiosity, why is this better than accessing the image directly on the server?

Anyway, my main and, hopefully last, question is, what should the width of the images on the main page be now? I understand that the blue side boxes consume 150px a piece. So if the header is 1095px and the two side boxes are 300px (total), then the width of an image should be no larger than 795px? Does that make sense or are my poor math skills showing again?

[clydejones]

Okay,

So I have fixed this. Just out of curiosity, why is this better than accessing the image directly on the server?

Anyway, my main and, hopefully last, question is, what should the width of the images on the main page be now? I understand that the blue side boxes consume 150px a piece. So if the header is 1095px and the two side boxes are 300px (total), then the width of an image should be no larger than 795px? Does that make sense or are my poor math skills showing again?

Relative references will save you problems later on in particular they will prevent the "only secured items" error that might show up when you install your SSL certificate.

the total width of the site is 1095px

the width of the side columns is 300px (plus any margins/padding)

so the center column where those images will be 795px.