the background image does not look the same in the browser

Tina_Bhole
Tina_Bhole used Ask the Experts™
on
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
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Hi,

I've cropped the "body-bg.jpg" from the top by 1px and it solved the prob.

Please use attached background image.
body-bg.jpg
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
Good job, Ronak_Patel.

Author

Commented:
Hi Ronak,

Thanks for the reply. But it didn't make any difference when I tried it.
please see below:
how the background looks now
Rowby Goren Makes an Impact on Screen and Online

Learn about longtime user Rowby Goren and his great contributions to the site. We explore his method for posing questions that are likely to yield a solution, and take a look at how his career transformed from a Hollywood writer to a website entrepreneur.

Hi Tina,

Well at my end it is showing correct background.

Please refer attached image.
test.htm.png
Dave BaldwinFixer of Problems
Most Valuable Expert 2014

Commented:
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 DulalSenior Web Developer

Commented:
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

Author

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

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial