Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium


CSS Body Background Image Only Works in Firefox

Posted on 2011-05-05
Medium Priority
Last Modified: 2012-05-11
Hi Experts,

I noticed that my body background image is not showing up in Internet Explorer. It works fine in FF but also does not appear in Chrome... The strange thing is I have other background images on the site coded exactly the same and they all work fine in all browsers so I know it is pathed correctly. Any suggestions??
html, body {
    height: 100%; width: 100%;
    padding: 0; margin: 0;

	margin: 0;
	padding: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;	
	background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;
	color: #333;

Open in new window

Question by:brettsky07

Expert Comment

ID: 35701914
Try to empty the browser cache of the other browsers and reload the page.

Author Comment

ID: 35701951
I have... I have also tried it on multiple machines... no luck. I've also tried using different images.

Expert Comment

ID: 35701990
I tested your code on IE and Chrome and it just worked. I think the problem is in the other code. Could you give me all the code?
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.


Author Comment

ID: 35702530
The project hasn't launched yet so I cant upload all the code.... its a php file header:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<link href="css/style.css" rel="stylesheet" type="text/css" />



It could very well be something in my css overriding it but I cant seem to figure it out...
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 35704126
Char by char - check if this is exactly the same syntax as in the other cases for including the images, also try to put " around the path

background-image: url("../images/bg.jpg");
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 35704137
Is your image path in the correct location ? I mean you are using style sheet inside a folder css and that means your images folder should be there in your root so you are using "../images/bg.jpg". So check your image path  and I think it's better post your css code and index page code so that can check.

  background-image: url(../images/bg.jpg);
	background-repeat: repeat-x;

Open in new window


Expert Comment

ID: 35704762

i have created a demo page to resolve your issues, please see attachment and let me know if this is not work for you.


Accepted Solution

brettsky07 earned 0 total points
ID: 35723784
Stupid mistake... apparently the file was saved as CMYK and IE didn't like that.... changed it to RGB and seems to work now. Thanks for all your suggestions.

Author Closing Comment

ID: 35759479
File error.

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Several part series to implement Internet Explorer 11 Enterprise Mode
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses
Course of the Month14 days, 6 hours left to enroll

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question