What to use for background image and how to use transparency with a background image

[toolmania1]

I am wondering what the best way to make a background is? I would like to use an image. However, that are many problems that I have encountered. For example, if I make the image too small and someone uses a higher resolution that me, the image will not cover the whole page. Furthermore, if I make the image too large, as I currently have my background, it is taking too long to load ( Probably 5 to 8 seconds on a decent connection ). I made the image 3000 pixels wide so that no matter what resolution someone was using, unless they used a crazy resolution, the image would cover their whole screen. However, as stated, that image takes too long to load.

Other solutions I have found are to make the 4 to 8 pixel wide image that basically look like a long line. Then, let this repeat. These have loaded quickly in the past. However, that does not let me use an image.

So, I would like to use an image if possible. How can I accomplish this and have it load quickly? If not, is the best way to do as I said as an alternative by creating the few pixel wide image and letting it repeat.


Furthermore, I would like to make my image transparent. I have not found a way to create a transparent background easily yet. Any ideas?

 

[smoovo]

You can use image as a background (you already know that...), and you can set it up with JavaScript (you can use PHP too) to fit any screen. What i'm saying is that you can do it in the smart way of letting the user choose it's own size.

You need to make 3 different sizes of the same image. While user will enter your site it will recognize the window size and will upload the image that will fit he's/her's screen. Also, use width 100% (only width), since all the screens are more wider than higher this will fit all the screen, and make it "background-position: center center;"

Transparent background can be used with .PNG image that edited to be transparent, or, to use CSS3 with "background-color: rgba(255,255,255,0.5);",
the a stand for "Alpha" (0, 0.1, ..., 1).

- Good Luck.

 

[PixelPusher]

What are you adding the background image to? the body? a div? As of now, I don't see why you are having issues making it repeat, nor do I see why you would need javascript.

If you can, please provide an example of what you are attempting to do, this will help us better guide you to the right solution.

Like smoovo mentioned, you can use css3 to accomplish this, but for consistency purposes, you would still need a fallback for all browsers that don't support it.

 

[toolmania1]

Using Background image for the body

I believe as of right now that I am going to use the background image for the body tag. I am not against a better way though. I do not know which ways are better. So, I guess we actually could start there. What do you think? Is it better to put the background image, that will fill up the whole page on any screen resolution, on the body tag or should I make a div tag and put in on that? If I put the background image on the div tag, how do I make it so that no matter what the screen resolution, the background image will be centered.

Also, when using php, would I do something like this:

if screen.resolution < 1024
{
use image 1
}
elseif screen.resolution > 1024 && < 1600
{
use image 2
}
else
{
use image 3
}

?

I know the syntax is not correct. I was just posting pseudocode. I can google the syntax unless you quickly know what it would be.

Thanks in advance!

 

[PixelPusher]

I think you are over complicating matters. You should not need to check the screen resolution at all. If you set a background image for the body tag, the body will expand to the full width and height of the browser window.

Here is an example:
(image is a gradient flows from color stop #333 to color stop #999, linear, top to bottom. Dimensions 2x768)

body {
   background:#999 url(../images/gradient-bg.png) left top repeat-x;
}