How to Transform an IMG to CSS Code
Transform the way a background image appears on a Web page using CSS code rather than standard HTML code and the <img> tag. CSS code, which stands for "cascading style sheet," allows you to specify more attributes of an image's appearance within the page the ordinary HTML code. By using "inline" CSS within the HTML document itself you eliminate needing to edit the site's actual .css "style sheet" file.
Other People Are Reading
Instructions
-
-
1
Log in to your site's "File Manager" and navigate to the "Images" directory. Click the "Upload" button and browse your hard drive for the image you want to use as a background for the page. Click "Open" and wait for the upload to complete.
-
2
Return to the File Manager's "Home" directory and tick the box next to the name of the page where you want to insert the image. Click "Edit" to open the page's HTML in an HTML editor.
-
-
3
Scroll to the point in the page where you want to insert the image and paste in the following code:
<style type="text/css">
#background {
background-image: url(images/backgroundimage.jpg);
background-repeat: no-repeat;
background-position: center top;
padding-top:100px;
margin-bottom:32px;
}
</style>Replace "backgroundimage.jpg" with the actual name of the file you uploaded. Delete "no-" if you want the image to repeat or change the position -- other options include "left," "right" and "bottom" -- of the image on the page. Change the padding or margin numbers to increase or decrease spacing around the image.
-
4
Save the HTML file and view the page in a new tab or window to confirm that the changes you made are to your liking.
-
1
