Pages

Falling Snow Effect

Wednesday, August 19, 2015

Here's another great script to customize your blogs or websites! Just copy and paste the code inside the <HEAD></HEAD> tags.

What's so interesting about this script? It reacts to your mouse movement! Why not try to use it and see for yourself?




Script:
<script type="text/javascript" src="http://static.tumblr.com/j4dtzbm/2K5lv8pr9/snowstorm.js"></script>

Your code should now look like this:
<HEAD>
   
</HEAD>

Perfectly Fit Background Image

By default, when you add a background image to your blog or website, it is arranged in tiles. If the image is not large enough to cover the whole page, it is being displayed multiple times.

How to make it full screen? Or full width and full height at the same time? Here's the code:

CSS Code:

background-size: cover;

Place it inside the body{} of your CSS code. This is inside the <STYLE></STYLE> tags and should not be confused with the BODY tag of your HTML. Your code should now look like this:

<style>
body{
   background: url('YOUR_IMAGE_URL_HERE.PNG') center center fixed;
   background-size: cover;
}
</style>

Using the above code will make your background in full width and full height. Also notice that there are additional codes in line with your background attribute. Add center center fixed to make it unscrollable and centered. Just play with the codes and get the result you desire. Enjoy :)

Example:

background: url('your_image_url_here.jpg') fixed;

Example:

background: url('your_image_url_here.jpg') center center fixed;

In the image: Suppanad Jittaleela

Add Images, Pixels, & Dividers

Monday, August 17, 2015

Here's a tutorial on how to add images, pixel arts, and even dividers on your blogs. It is done using HTML codes. All you need to have is the link of the image you're going to use. Change YOUR_IMAGE_LINK_HERE.PNG with your own image link. Also, you can make your image clickable by adding an anchor tag. Refer to the codes below and change YOUR_LINK_HERE with your own url.


Example:


How it looks:

You can also add links to the image by enclosing it in an anchor tag:

   


Example:

   


How it looks:

Image by Randomistics