Adding an Image (Simple)

To make an image appear within your layout or page text, use the following code and replace the URLHERE with your image’s provided URL (we recommend using imgur.com or postimages.org for hosting your images – after uploading, copy the link that ends in either .jpg, .jpeg, .png, or .gif).

<img src="URLHERE">

The above will display the image completely as-is, with no changes to the size. Sometimes, you might want to scale the image down to fit nicely within your layout or on your page, but you don’t want to compromise the size of the original image by resizing it within an editing program. Use the following code to resize your image by changing only the width to keep the proportions the same (you can also change just the height for the same effect).

<img src="URLHERE" width="250">

Adding an Image (Advanced)

Already have a base code or a layout and want to change the main layout image? You will probably find an element labeled #content { or body { in your CSS. Within one of those elements, either add the following code and/or replace the URL of the existing code with your new, desired image. Make sure that the background-repeat line is set to no-repeat for the main layout image, and that the width: –px; line matches the width of your new main layout image.

background-image: URL(URLHERE);
background-repeat: no-repeat;
width: --px;

%d bloggers like this: