Background image instead of color

[Dale]

I would like to change the background color of the body to a background image which I have uploaded to the Images folder.
I have tried inserting the HTML in several places, but I can't seem to find the right place to insert it.
Perhaps I am not using the correct HTML,
or perhaps it just won't take the modification ???

Can anyone direct me to the proper place to make this modification?

Dale

[cannen]

Look at the following link under "Background Properties".
http://www.w3schools.com/css/css_reference.asp

What you will need to do is change your css. If you go in to edit your template, then select the button to edit the CSS. Choose "Body" and then you will see a text area called "background". You will need to put the relative path to your background image. So, from where you css file site, there will probably be a folder in there called "images". Put your background in there.

The code should like something like this:

#ffffff url(images/BG_image.jpg) repeat

The #ffffff is the color to display when the image ends or where it doesn't cover. The "url(..)" is the image to display and repeat tells the browser to repeat the image both horizontally and vertically. Now, I don't know what your image looks like, so I don't know which directions that you should repeat.

If you have an image that when it is displayed is a gradient from top to bottom, you only need an image that is 1px wide. Then you repeat it horizontally... repeat-x.

I hope that helps.

[Toymaster]

I know it's been a while since someone posted on this but I'm looking for just a tad bit of advice. I currently have my background image on my site and overall it looks pretty good I think. I have it set to

#241a23 url(/assets/images/1up-BCK.jpg)repeat-x

While I was at my office today viewing the site on a 23" monitor the image started repeating itself on the right side of the screen. How do I prevent this from happening?

[Barry]

I know it's been a while since someone posted on this but I'm looking for just a tad bit of advice. I currently have my background image on my site and overall it looks pretty good I think. I have it set to

#241a23 url(/assets/images/1up-BCK.jpg)repeat-x

While I was at my office today viewing the site on a 23" monitor the image started repeating itself on the right side of the screen. How do I prevent this from happening?

Ok, here's what I see on my PC (WinXP):
In IE8, I see a BLACK background - no image!
In FireFox, I do see the "slight" repeat of the background image on the right side.

EDIT: Just noticed another "strange thing" !!!
In IE8, I can scroll EXTREMLY far down the page with a lot of "nonsense", but not in FireFox! Hope this makes sense. Maybe someone else can deny or confirm what I am seeing - to help you, of course.

[piaf]

To my knowledge, the only way to keep it from repeating on the right would be to expand the width of the image so that it accommodates a wider screen.

You might want to check your site's stats to see what are the most common screen resolutions for customers coming to your store. I would think it might vary from niche to niche, so your customers might be more technologically inclined and have bigger monitors. But even on my monitor at 19" wide, it was starting to repeat, so it probably needs to be widened. Right now, it looks like the image is 1,650px wide, so compare that to your top screen widths for your customers and widen appropriately.

[Barry]

Piaf,
Out of curiousity, what browser are you using?

[piaf]

I'm a Firefox user, and right now, I'm using version Beta 5.

[piaf]

I just tried the site "www.1upcollectibles.com" in IE8, and there is no background image displaying, same as what Barry is seeing. Just a very dark purple background.

The nice little bar you have showing at the bottom of the screen with all your social media links displays wonderfully in Firefox, but it tanks in IE. All you see is the purple bar, then all the social media links are spaced out down below it, one link about every 4 lines worth of space or so. So while the site looks good in Firefox, it needs some work for IE display.

[celebra1]

Idea

Have you tried using a container to contain the width of your site?

[Toymaster]

Have you tried using a container to contain the width of your site?

Celebra1,

It's good to see you over here from PS. No I haven't tried that as of yet.

[celebra1]

Containers, etc.

You can find what you need here. Here'a an example of a container:

body {
padding:0px;
margin:0px auto;
background-color:#369;
text-align:center;
width:980px;
}
body.container {
margin:0px;
padding:0px;
border:0px;
width:980px;
}
Basically it says, here's the body size constraints. Stay within those parameters.