in CSS

Using a Gif and CSS on Large Images

## What? Using CSS you can put an image as the background image of any images on your web site. Sounds confusing but a image is just a normal HTML DOM element, which means you can add the same CSS attributes to it such as borders and backgrounds. If you have a website which has large images to load on the page the user will need to wait for them to load leaving a blank space on the screen. ## Why? If you place a background image on all images this will load before the image loads. So all you have to do is create a smaller image such as a loading gif this will be loaded and it will be displayed in place of the larger image, when the larger image finishes loading it will replace the smaller image. ## How? Just create a small gif loading image and upload it to your website. Then change your CSS by adding this near the top of the CSS file. ``` img { background: url(images/loading.gif) no-repeat; } ```

Upgrade to access all content on Paulund

Members unlock all tutorials and snippets

Access to all downloadable content

Access to code examples before others

Sign Up Now

Already a member? Login here

Subscribe To The Weekly Newsletter

Get weekly updates to your email