Background Image

Hi, welcome to TWF

It's likely because the image is too large at 1492px × 764px, and is being resized to fit the screen (a resolution in 1492px × 764px would probably make it look fine).
That doesn't make it lose colours, but resizing the image without maintaining aspect ratio can make an image look disfigured.

What if I viewed your site in a screen at 1920 x 1080? The image would stretch? Or not fill the screen?

A usual trick, instead of using one full image, is to take a small section of an image and repeat it across the screen. You can repeat on the x or y axis, or both.

If you need to use the full image, as looking at your image you might want to, then you are probably going to have to decide on a width like 900px, centre align it on your site and add a background colour taken from the image itself to fill the left and right edges the image doesn't fill.

If you want to try and take a small section of the image, about 50px x 50px, and repeat it across the page, then in The Gimp (I don't use Photoshop but imagine it has the same feature) you can take an image and make it seamless so it can be repeated without breaks or seams, such as on a web page.

In The Gimp from the drop down menus, click
Filters --> Map --> Make Seamless

Thanks for quick reply
I am afraid it is not that. I know about repeating the image and thinks like that its about saving image in “save for web” it is compressing image and image is losing colours and if I “save as” in photoshop image will keep its colours but browser (Firefox, Opera, IE) except Safari, will reduce those colours.

I am not sure if it’s clear what I am trying to tell?
Thanks again.

Can you post a link to the image? That might help.

I know what you're trying to say but I've never heard of that happening before. How are you saving the image in Photoshop? Are you using Save for Web or just Save as? I wasn't clear on that in your last message. And what settings are you using in Save for Web?

I presumed the images in question are

This
http://www.alexbuga.com/v8/css/images/bg-body.jpg

and this
http://www.saturized.com/evolution/img/bg-body.jpg

I will try to take screen shoot of the two websites one in Safari and other in firefox

This is screen shoot of my website viewed in Safari

Sorry i couldn't attached two files into one post.
To this post I am attaching screen shoot of the same background, the same image was used but i viewed this page in firefox.
Just have a look and hope you will see those differences which i can see.
I know I could avoid these by saving my background image in photoshop for website but then I would loose some colours.
Some how on those two pages mentioned before, people who designed them manage to save background images with all the colours and the background looks the same in all the browsers.

Sorry for the way the posts are written( English wise ).

I opened this image:

http://www.alexbuga.com/v8/css/images/bg-body.jpg

In Safari, Firefox, and Opera simultaneously on the same monitor on the same computer. They all look the same to me. Or are you working with a different version of the same image and trying to save it again? If so, can you upload the image you are working with?

This is a dumb question, but are these screenshots are coming from the same computer and monitor?

This article might help:

http://www.viget.com/inspire/the-mysterious-save-for-web-color-shift/

(see Step 3 in particular)

Hi Megan et al,

I have come across this same phenomenon, so pardon me while I try to explain.

Viewing a nicely-colored image on my Mac, then in Safari, the colors look rich and saturated. Imagine my disappointment when I used it as a page background, opened it in Firefox 3.0 and found the colors pale and washed-out looking. But hey! In Firefox 3.5 beta they colors came back!

So far all I have discovered is that it has something to do with some "color profile" that only certain browsers respect. Sadly, I don't know how to solve the problem, but I hope my description sheds some light.

EDIT: I read the article you linked to, Megan, but I do not have, nor can I afford Photoshop. Is there another way?

Hi again i did find solution it has something to do with MAC settings its so annoying
just read this article its ridicules
http://blogs.smugmug.com/don/2007/02/14/this-is-your-mac-on-drugs/
Thanks for all the help.

The problem which you mentioned should not be happened i think you are trying to add the large Pixel of image do one thing first decide among 2 which image do you like, the do one thing cut a piece of the image and add it in your background and do tile it the you will find there will be no more image problem and it will also load quickly in all browsers.
Thanks.

Actually, that article meyson refers to regarding Mac is misinformed. The problem arises from the fact that some browsers are incapable of using color profiles embedded in images. The usual solution recommended is to strip out color profiles, but that means no-one sees what the designer intends.

All Mac software recognizes color profiles, as does Safari, including the Windows version. Firefox has added this capability to version 3.5. I heard that Internet Explorer can be configured to do this as well, but the two comments that claimed this did not elaborate.

The bane of our lives is bad browsers. Don't blame good operating systems!

Thanks for taking part in this conversation
I did read few articles about those browsers differences (Safari vs Firefox) but the solution from article

http://blogs.smugmug.com/don/2007/02/14/this-is-your-mac-on-drugs/

fixed my problem.

Hello, similar problem

http://www.jadownikiwww.home.pl/borehole-drillers/test/index.html

Firefox doesn't display background image as IE6 has no problem with that.

Not sure what is wrong

Which image are you having a problem with?
In Firefox there are no images listed as not loading correctly, and there are background images.

Hi, the image that I'm having problem with is :

http://www.jadownikiwww.home.pl/borehole-drillers/test/images/page-bgr.jpg

In css file it is:

/* Page */

#page {
width: 973px;
margin: 0 auto;
background: #FFFFFF url(images/page-bgr.jpg) repeat right top;
}

You still have a float left over when you close all the divs and start new ones.

So after you close the right sidebar div you need to clear the previous float, which was the content div:

So in the HTML, after this
<div id="sidebar">SIDEBARCODE</div>
put this:
<div style="clear: right;"></div>

projekt_y: I absolutely see the problem. Checking the blue color on your image with the Firefox eyedropper tool, I get a color value of #A3C9D6 in FF 3.0.13, but #96C9D5 in FF 3.5.1. A very significant difference, easy to see.

According to the GIMP, the color is #A3C9D6 and the color profile is sRGB IEC61966-2.1 - the one usually recommended for Web. As mentioned in my earlier reply, I don't know the solution to this, but wish I did...

Ok, save the image in gif format, and then use it. sometimes the jpeg format creates the problem, because it is a very rich format. convert it to gif, because while using images in website building, it is recommended to use gifs.

I've come to the conclusion that one can not expect the exact same rendering on every system. My best solution is to except a common resolution. Resizing the image can sometimes bring you to a point of happiness on all systems, but I except defeat here. "It ain't gonna always look exactly the same on all systems." This goes for viewing anything as well as backgrounds. The output hardware will differ and slight changes will happen. Try to find a common ground by resizing.

thanks greg.I liked your reply very much.am about to learn photoshop.and to have these small ideas before hand helps a lot.you simplified it.

Google "save for web color shift" to get a half million references to this phenomenon.

(But I suspect that ztydbgelg's response is spam...)

you know many a times you problem with the resolution.try to fix the resolution settings accordingly

Hi all!

Here I have one smart question..
How do I center an image background in dream weaver because every time I try to center my background image, the browser preview comes up with a blank page. Any suggestions?

hey, don t put image on background.

Thanks for the details provided by all

thanks a lot

do not put image on the back ground..

Hi,
its not your browser problem you convert image another format that will solve your problem
thanks

It's likely because the image is too large