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.
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:
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:
That's all folks!
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2aup-92RxMyUTbYP0imuaWTdv6vJT0o0WDXhbDFfw6VSKZvugCfSwPJ9XNBr7qJjU7BMSUEOPAsa6vFM1OTdoY-eVR-xFVVf6upWdvce3IB0XCy8pypWqztlCpP_e_vwh-qvwL0wjoSs/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!
Comments
Post a Comment
Feel free to ask, suggest and comment regarding this post/blog. You can also contact me through e-mail, just always use the contact page. Thank you for visiting this blog.