asked on

the background image does not look the same in the browser

Hi Experts,

This is the snippet from the .css file of my web application

body
{
background-image:url("/Images/body_bg.jpg");
background-repeat:repeat;
background-position:left top;
font-size: .80em;
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
margin: 0px;
border:none;
padding: 0px;
color: #474646;

}

Please see attached the body_bg.jpg which I am using as a background image for my web application, but, when viewed in the browser, it looks different to what it is actually like.
Please see Changedbg.jpg to see what it looks like in the browser.
I have tested this in IE, Chrome, Firefox. In none of these browsers the image looks appropriate.

Could someone please suggest something?

Thanks.
Changedbg.JPG
body-bg.jpg

ASKER CERTIFIED SOLUTION

Ronak Patel

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Dave Baldwin

Good job, Ronak_Patel.

Tina_Bhole

ASKER

Hi Ronak,

Thanks for the reply. But it didn't make any difference when I tried it.
please see below:

Ronak Patel

Hi Tina,

Well at my end it is showing correct background.

Please refer attached image.
test.htm.png

Dave Baldwin

Two things. You can't make the backgrounds for the two sections line up or at least I can't. And second, I'm wondering if you are operating at a screen resolution other than the 'native' screen resolution. I am not getting that 'banding' effect on my screen when I set that image as a background in Firefox.

Jagadishwor Dulal

Try this one tested. Change image path which i have used here img only.
The CSS

body  
{
    background:url("img/body-bg.jpg") repeat-y top left;
    font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
    margin: 0px;
    border:none;
    padding: 0px;
    color: #474646;
   
}

Open in new window

body-bg.jpg

Tina_Bhole

ASKER

Hi Experts,

Thanks a lot for your help.
I tried every single thing you all suggested.
Another thing is, it shows up correctly in Google Chrome and Fire Fox when uploaded on to the web server.
Is not showing correctly in IE though.

Tina_Bhole

ASKER

Hi Ronak,
I cropped the image a little from the bottom as well and it worked for me :)

Would like to thank all the experts for their input.