Gradient Effect for Blog Background

Isn't it nice to have a background that is catchy instead of plain color? If yes, proceed reading this.

However, the most important is the content itself  because it makes your readers visit you blog often as it should be. This simple tweak will just add some "flavor" of your blog skin.

Here's how to do it:

1. Create an image using Photoshop. Don't worry it wont require advance talent to create one.

  • Create a New Image in Photoshop: 
    • 50px-width, 450px-height
    • Use gradient tool to fill that image with your choice of color


Important: The second "color stop" should be the main color of your background so that it will blend.


Upload you image then get the image link. You can upload it through your posting.

 2. Implement by CSS. From Dashboard> Template > Edit HTML > Find "body{" then add this code below:
background: <main color> url("IMAGE LINK") repeat-x top;
e.g.
background: white url("https://lh3.googleusercontent.com/-Q6sS9wZv2p8/UF3N5dREXzI/AAAAAAAACvc/A4QioHGenMk/s500/mattmorzbg.png") repeat-x top}

Like this image the first/top color is blue and the second color is black. Therefore, you should use black as your main-color in your body in CSS code.










It should look like this:

body{
  margin:10px;
  color:white;
background: white url("https://lh3.googleusercontent.com/- Q6sS9wZv2p8/UF3N5dREXzI/AAAAAAAACvc/A4QioHGenMk/s500/mattmorzbg.png") repeat-x top;

That's all folks!

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables