Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>To actually use the original file of <code>farmancover.jpg</code> which is <code>6.7MB</code> in size, you need to convert it to an actual <code>.jpg</code> file! Even though this filename has extension <code>.jpg</code>, it's a <strong>Adobe PSD</strong> project file with wrong extension.</p> <p>Having said that, it's very odd to have a <code>.jpg</code> with that filesize, which is a giveaway that something is the matter.</p> <p><img src="https://i.stack.imgur.com/gzcnK.png" alt="enter image description here"></p> <hr> <p><strong>First</strong>, ensure you have a valid <code>.jpg</code> image file.</p> <p>The correct filename is <a href="http://farmanp-ux.com/images/farmancover.jpg" rel="nofollow noreferrer"><strong>farmancover.jpg</strong></a>.</p> <p>It is at this location: <a href="http://farmanp-ux.com/images/farmancover.jpg" rel="nofollow noreferrer">http://farmanp-ux.com/images/farmancover.jpg</a></p> <p>Your filenames are case sensitive too.</p> <p>The correct image path then is:</p> <pre><code>'images/farmancover.jpg' </code></pre> <p>To access the folder contents of all your images, use this URL: <a href="http://farmanp-ux.com/images/" rel="nofollow noreferrer">http://farmanp-ux.com/images/</a></p> <p>Then in your CSS Style sheet located here: <a href="http://www.farmanp-ux.com/css/style.css" rel="nofollow noreferrer">http://www.farmanp-ux.com/css/style.css</a> </p> <p><strong>Change this:</strong></p> <pre class="lang-css prettyprint-override"><code>body {background-repeat:none} </code></pre> <p><strong>To this:</strong></p> <pre class="lang-css prettyprint-override"><code>body { background:url(http://www.farmanp-ux.com/images/farmancover.jpg) no-repeat center center; background-repeat:none } </code></pre> <p>Also seen in your CSS Stylesheet is that the last attribute per CSS Selector fails to have a <strong>semicolon</strong>. Please ensure <strong>each</strong> attribute ends with one.</p> <hr> <p><strong>Second</strong>, in your HTML webpage, remove the <strong>EXTRA</strong> <code>body</code> tag you have for background image.</p> <p><strong>End Result:</strong></p> <p><a href="http://jsfiddle.net/eXKza/1/show/" rel="nofollow noreferrer"><strong>jsFiddle DEMO with Background Image</strong></a></p> <hr> <p><strong>EXTRA:</strong> Using an <a href="http://paulmason.name/item/full-screen-background-image-pure-css-code" rel="nofollow noreferrer"><strong>Online Tutorial</strong></a> to show the background image full screen, even for older non CSS3 browsers like IE8, this method was used in the fiddle below.</p> <p><a href="http://jsfiddle.net/Sf6ST/show/" rel="nofollow noreferrer"><strong>jsFiddle DEMO with Scalable Background Image</strong></a><br> <em>(Remove <code>/show/</code> from jsFiddle to access edit page)</em></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload