How to Insert an Overlay CSS Picture at the Bottom
Adding a floating picture overlay to your website doesn't have to turn into an afternoon of coding. Overlays, often seen in light box effects that cover an entire screen, can appear anywhere on a Web page. Some site owners might position them at the top and use them as logos. Others may overlay images along the edge of the page. If your Web page needs a picture overlay at the bottom of of the page, you can insert it there using a few CSS attributes.
Other People Are Reading
Instructions
-
-
1
Open a Web page document using your HTML editor or Notepad.
-
2
Paste the following div code in the document's body section:
<div class="overlay">
<img src="xyz.jpg" />
</div>This creates a div element containing a picture. Replace "xyz.jpg" with the name of an image on your hard drive or the URL of a picture located on the Internet. This div also references a CSS class named "overlay."
-
-
3
Create the overlay class by adding the code shown below to the document’s style section:
.overlay { z-index:10000; bottom:0px; position:absolute; }
The attributes in this class tell browsers to anchor any element that references the class at the bottom of the Web page. Since the div holding the picture overlay references this class, the browser will insert the picture at the bottom of the page. The z-index attribute determines whether an item on a Web page appears in front of another. By making this value high, you insure that it will overlay any other element on the page.
-
4
Save your document and open it in a browser. The picture overlay appears at the bottom of the Web page.
-
1
Tips & Warnings
You may also wish to position the overlay horizontally. Do this by adding one of the following attributes to your CSS class: text-align:left, text-align:center or text-align:right. Browsers will keep the picture overlay on the bottom of the page and move it to the left, to the center or to the right depending on the attribute you choose from this list.
