0

So, I've seen these questions a lot but I've tried all the solutions and have found none of them to work. It's giving me a headache and I can't take it anymore. So my background image is placed as follows:

<body background="images/farmancover.jpg"/>

It's rather simple, in fact check it out on my website: http://farmanp-ux.com

Now, my problem is that the background image does not show in any of my web browsers and it's a pain to figure it out. If you guys could gladly help out, it would be much appreciated! I'm a newbie on this so please be gentle.

8
  • You should make the effort of posting your (relevant) code here! Just referencing links will normally get your questions closed!
    – jtheman
    Jan 7, 2013 at 5:44
  • Hello user1954122, to have your code show correctly, select it and then use the { } button in the toolbar. Cheers!
    – arttronics
    Jan 7, 2013 at 5:45
  • I no I just added it, that was my mistake.
    – farmanp
    Jan 7, 2013 at 5:46
  • 1
    thanks for helping me out arttronics
    – farmanp
    Jan 7, 2013 at 5:47
  • 1
    Although @arttonics has have fixed your original issue your markup is still full of errors and should be fixed to prevent problems in other browsers. As is the solution fiddle
    – PassKit
    Jan 7, 2013 at 6:41

3 Answers 3

3
<body style="background:url('images/farmancover.jpg');">

Although you would normally add this to your CSS file instead of using an inline style.

body {
  background:url('images/farmancover.jpg');
}

Specifically for your site, the image may not be showing because your image file is actually images/FarmanCover1.jpg (note that the URL is case sensitive).

The following should give you the desired effect.

<body style="background:url('images/FarmanCover1.jpg') no-repeat;">

You also have a number of HTML errors but the following has been tested working

<!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">
<head>
  <title>
    Farman Pirzada - UX Designer - Harvesting creativity one at a time - Ohio, US
  </title>

  <!-- STYLES -->
  <link rel="stylesheet" type="text/css" href="http://www.farmanp-ux.com/css/style.css" />

  <meta content=
    "Farman Pirzada, UX Designer, CSS, HTML5, Web 2.0, portfolio" />
</head>

<body style="background:url('http://www.farmanp-ux.com/images/farmancover.jpg') no-repeat fixed;">
  <img src="http://www.farmanp-ux.com/images/farmanUX.png" class="center" alt="" />
  <div id="navmenu">
    <ul>
      <li><a href="farman.html">home</a></li>
      <li><a href="about.html">about</a></li>
      <li><a href="design.html">designs</a></li>
      <li><a href="services.html">services</a></li>
      <li><a href="contact.html">contact</a></li>
    </ul>
  </div>
</body>
</html>
11
  • else you can give the image in style too
    – KarSho
    Jan 7, 2013 at 5:47
  • it still does not open up in other browsers and on google chrome it flipped the background image
    – farmanp
    Jan 7, 2013 at 5:59
  • Have you changed your code yet? - I am still seeing <body background="images/farmancover.jpg"/> I just tested in Chrome on a Mac and it looked fine
    – PassKit
    Jan 7, 2013 at 6:05
  • I just did, so now that background image will be viewed through Safari. I renamed the file to be case sensitive because my host provider can't use upper cased.
    – farmanp
    Jan 7, 2013 at 6:06
  • that didn't seem to make any change
    – farmanp
    Jan 7, 2013 at 6:12
3

CSS property body { background-image: url('images/farmancover.jpg'); }; seems to be preferred these days over specifying it as part of your HTML.

1
  • 2
    Your syntax is slightly off, should be background-image: url('images/farmancover.jpg');
    – PassKit
    Jan 7, 2013 at 5:50
2

To actually use the original file of farmancover.jpg which is 6.7MB in size, you need to convert it to an actual .jpg file! Even though this filename has extension .jpg, it's a Adobe PSD project file with wrong extension.

Having said that, it's very odd to have a .jpg with that filesize, which is a giveaway that something is the matter.

enter image description here


First, ensure you have a valid .jpg image file.

The correct filename is farmancover.jpg.

It is at this location: http://farmanp-ux.com/images/farmancover.jpg

Your filenames are case sensitive too.

The correct image path then is:

'images/farmancover.jpg'

To access the folder contents of all your images, use this URL: http://farmanp-ux.com/images/

Then in your CSS Style sheet located here: http://www.farmanp-ux.com/css/style.css

Change this:

body
{background-repeat:none}

To this:

body {
  background:url(http://www.farmanp-ux.com/images/farmancover.jpg) no-repeat center center;
  background-repeat:none
}

Also seen in your CSS Stylesheet is that the last attribute per CSS Selector fails to have a semicolon. Please ensure each attribute ends with one.


Second, in your HTML webpage, remove the EXTRA body tag you have for background image.

End Result:

jsFiddle DEMO with Background Image


EXTRA: Using an Online Tutorial to show the background image full screen, even for older non CSS3 browsers like IE8, this method was used in the fiddle below.

jsFiddle DEMO with Scalable Background Image
(Remove /show/ from jsFiddle to access edit page)

14
  • let me see what happens when I change the file name. I think that is correct and is probably what's going on.
    – farmanp
    Jan 7, 2013 at 5:56
  • Just fixed the URL, your original non '1' filename is corrupted.
    – arttronics
    Jan 7, 2013 at 5:57
  • image is working fine on Safari but still not on Google Chrome, Firefox, and IE
    – farmanp
    Jan 7, 2013 at 6:02
  • Please use image file FarmanCover1.jpg since the other image does not render in other browsers. Thanks.
    – arttronics
    Jan 7, 2013 at 6:05
  • the problem about that image is that it is a different image than what I want as the background, so it will not be suitable for the website
    – farmanp
    Jan 7, 2013 at 6:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.