Background Image

They have: 7 posts

Joined: Apr 2009

Hi to all.
I have a question?
I am designing web site and I created my layout in photoshop now i try to use jpg image for my background but my image is losing colors as soon as I open it in Firefox, Opera some how its keeping all colors in Safari. I know it has something to do with color rendering.
But my question is how keep all the colors from image in Firexor etc.

There must be a way I found those website which have beautiful colors and I try to archive similar background but it didn't work.
www.alexbuga.com/v8/
www.saturized.com/

Any help will be appreciated

greg's picture

He has: 1,573 posts

Joined: Nov 2005

Hi, welcome to TWF Wink

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

They have: 5 posts

Joined: Feb 2010

greg wrote:

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

Never tried this software but wrote it down and going to check it out, cheers:D

They have: 7 posts

Joined: Apr 2009

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.

Megan's picture

She has: 11,365 posts

Joined: Jun 1999

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?

greg's picture

He has: 1,573 posts

Joined: Nov 2005

They have: 7 posts

Joined: Apr 2009

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

They have: 7 posts

Joined: Apr 2009

This is screen shoot of my website viewed in Safari

They have: 7 posts

Joined: Apr 2009

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 ).

Megan's picture

She has: 11,365 posts

Joined: Jun 1999

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)

He has: 630 posts

Joined: May 2007

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?

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

Megan's picture

She has: 11,365 posts

Joined: Jun 1999

What did you use to save the image with? Check the documentation for your software or use their support channels. Also poke around in the save settings or image format settings to see if there is anything that might do this.

They have: 7 posts

Joined: Apr 2009

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.

kanonfire's picture

They have: 9 posts

Joined: May 2009

I read the article and I actually found it amusing!!! hehehe
anyway thanks for sharing. This will serve as a heads up to me.

They have: 83 posts

Joined: Apr 2009

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.

He has: 630 posts

Joined: May 2007

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! Wink

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

They have: 7 posts

Joined: Apr 2009

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.

They have: 3 posts

Joined: Aug 2009

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 Sad

greg's picture

He has: 1,573 posts

Joined: Nov 2005

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

They have: 3 posts

Joined: Aug 2009

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

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

They have: 3 posts

Joined: Aug 2009

In css file it is:

/* Page */

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

greg's picture

He has: 1,573 posts

Joined: Nov 2005

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:

#content{
float:right;
padding:10px 50px 10px 10px;
width:650px;
}

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

He has: 630 posts

Joined: May 2007

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...

Cordially, David
--
delete from internet where user_agent="MSIE" and version < 8;

They have: 13 posts

Joined: Aug 2009

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.

paperkool's picture

They have: 10 posts

Joined: Aug 2009

meyson wrote:
Hi to all.
I have a question?
I am designing web site and I created my layout in photoshop now i try to use jpg image for my background but my image is losing colors as soon as I open it in Firefox, Opera some how its keeping all colors in Safari. I know it has something to do with color rendering.
But my question is how keep all the colors from image in Firexor etc.

There must be a way I found those website which have beautiful colors and I try to archive similar background but it didn't work.
www.alexbuga.com/v8/
www.saturized.com/

Any help will be appreciated


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.

They have: 5 posts

Joined: Aug 2009

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.

He has: 630 posts

Joined: May 2007

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

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

They have: 8 posts

Joined: Sep 2009

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

kedwin's picture

He has: 29 posts

Joined: Dec 2009

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?

They have: 2 posts

Joined: Jun 2011

Hi!
I have the same question.

They have: 3 posts

Joined: Dec 2009

hey, don t put image on background.

They have: 17 posts

Joined: Mar 2010

Putting image at background make website slow and it takes comparitively more time to load at client locations with slow internet. so it is always advised to avoid use of background image. Its better to use CSS style sheets and color schemes.

They have: 3 posts

Joined: Jul 2011

Thanks for the details provided by all

thanks a lot

They have: 3 posts

Joined: Jul 2011

do not put image on the back ground..

They have: 6 posts

Joined: Jul 2011

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

They have: 1 posts

Joined: Dec 2011

It's likely because the image is too large

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.