Permalink
Browse files

Still working on getting code properly formatted in Github's Markdown…

… syntax.
  • Loading branch information...
1 parent 62bf323 commit 4dc154c50fa3bdbb7e4b1e058f754d2b0c6bc5d1 @mhucka committed May 6, 2012
Showing with 5 additions and 15 deletions.
  1. +5 −15 README.md
View
@@ -34,18 +34,16 @@ automatically reset visibility to `visible` when the image is loaded and
rescaled. (See step #5 below.)
Here is an example of loading this plugin:
-<ul>
-<li> Download the jquery.imagesload.js plugin and put it in a directory where
+1. Download the jquery.imagesload.js plugin and put it in a directory where
you put Javascript files in your site. The rest of these instructions
assume that your Javascript files are located in a subdirectory named "js"
in the root directory of your site. Also store this file
(jquery.fullscreenbg.js) in that same directory.
-<li> Create a Javascript file that will serve to load other Javascript files
+2. Create a Javascript file that will serve to load other Javascript files
for your web pages. The rest of these instructions assume that this file
is named "main.js". Put the following code in it:
-
```javascript
$.getScript('js/jquery.imagesloaded.js', function() {
$.getScript('js/jquery.fullscreenbg.js', function() {
@@ -54,18 +52,16 @@ $.getScript('js/jquery.imagesloaded.js', function() {
});
```
-<li> In the HTML file for the page that will contain the background image, put
+3. In the HTML file for the page that will contain the background image, put
the following in the `<head>` element:
-
```HTML
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
```
-<li> In that same HTML file, put an `<img>` element after your `<body>`
+4. In that same HTML file, put an `<img>` element after your `<body>`
element that refers to the image you want on the background, and has the
id `#bgimg`. Example:
-
```HTML
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
tml>
@@ -80,10 +76,9 @@ tml>
... rest of page ...
```
-<li> In your CSS file (in this example called "css/style.css"), include the
+5. In your CSS file (in this example called "css/style.css"), include the
following to define `#bgimg` with `position: absolute` and `visibility:
hidden` as discussed above.
-
```CSS
#bgimg {
position: absolute;
@@ -99,20 +94,15 @@ body {
width: 100%;
}
```
-
If the image should only be scaled to the full width of the browser window,
rather than fitted in both dimensions, add the attribute `widthOnly` to the
`<img>` element. Example:
-
```HTML
<img id="bgimg" widthOnly src="another-image.jpg">
```
-
If for some reason you want to use a different identifier than `#bgimg`, change
the value set for `bgID` in the code shown in step #2 above.
-</ul>
-
History and acknowledgments
---------------------------

0 comments on commit 4dc154c

Please sign in to comment.