Full Page Background Image in Blogger

Many people wants a full size background image for their blog which is not possible with the basic options provided in Blogger's template designer. But it is possible in blogger with some CSS lines.
Blogger does provide hundreds of customization options in template designer to design the template of a blog in a graphical user interface and it's very easy to use to especially for normal users who don't want like to work with codes to design their blog. But it doesn't however provide all the options for design so the only way left is using CSS manually.

Background images in blogger blogs can be changed and customized from the template designer but the options for background image is limited and you can't make much changes. Many blogger users want their blog to have a full sized background image that covers the complete background. Before you proceed to the tutorial, check how it gonna look.
   
Preview Demo Download Files

Tutorial

Doing this is very simple, just a small CSS rule needs to be added to the blog but before that you have to do some basic changes in your template to make sure no current CSS rule will override the new style.

Uploading a full size image

The background image you want to use as a full page background should be large enough to cover the entire viewport without getting pixelate. The image shouldn't be too large to be used on a web page and not even too small to be used for a full size background, it should be around 100kb - 150kb.

The CSS

This CSS adds some advanced background image properties that makes the full page background image possible. This is the CSS

?

1 2 3 4 5 6 7

html, body { background: url('bgimage.jpg') no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

Just change bgimage.jpg with the URL to your background image. It's the only change you need to make in the code. Now proceed to the next step. 

Adding the CSS to blog

The final step is to add that CSS in your blogger template. To add the CSS, follow the steps :

1. Go to your Blogger dashboard
2. Select the Template tab
3. Click on the Customize button to open Template designer
4. Navigate to Advance -> Add CSS 
5. Paste the code in custom CSS box and click Apply to Blog

Now check your blog for the change. If it didn't worked try clearing your caches and then refresh your blog usingCTRL+F5or try adding the CSS directly in the template.

CSS styled error and success message

While programming webpage sometimes we need to show the error or success message. Instead of showing in a simple text which will not get concentrated by user, we can use CSS styled messages. Below I will explain how to stylize your success and error message by using CSS.

You can see the demo and download the example file below

Here is the CSS style for success message.

padding:2px 4px;
margin:0px;
border:solid 1px #C0F0B9;
background:#D5FFC6;
color:#48A41C; 
font-family:Arial, Helvetica, sans-serif; font-size:14px; 
font-weight:bold;
text-align:center;

Below is the CSS style for error message.

padding:2px 4px;
margin:0px;
border:solid 1px #FBD3C6;
background:#FDE4E1;
color:#CB4721;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-align:center;

After applying this style your message will look like this

Error Message goes here

Success Message goes here

Hope that this will help you. If you are beginner for CSS read this article called ..... check in the list

Basics of css and css designing tutorials.

CSS – Cascading Style Sheet format the presentation of the html document like content alignment, font, background color, border, etc. Separating the contents from the presentation result in clean html code and fast loading time.
CSS include two parts:

• Selector
• Declaration
• Property
• value

Selector is the name of class and Declaration is the properties explained in the class for a particular style.
Declaration has two parts: property like font-style and value as italic.
Eg:

The style can be placed in a separate page called css or can be written in the head portion of the html document. Declaration is written within curly braces and each declaration ends with semi-colon. The style (format) can be applied to many tags in a single page or in multiple pages which is possible in the case of external style sheet. When a css is updated, the element with the style gets automatically updated.
Three types of CSS:

• Internal style sheet
• External style sheet
• Inline style sheet

Internal style sheet includes placing the style in the head portion of the html document. It is good to use this when the style is used only in a single page.

<html >

<head>

<title>Cascade Style Sheet</title>

<style type="text/css">

<!—

.style1 {font-size:  12px; color: #FF0000;}

-->

</style>

</head>

External style sheet includes placing the styles in a separate notepad or dreamweaver document and saving it with .css extension. External style sheet should be linked to the html document in its head portion.
The advantages of external style sheet:

• Easier maintenance.
• Reduce file size.
• Reduce bandwidth.
• Increase flexibility.
• Loading of web page will be faster.

“stylesheet” type=“text/css” href=“Path To stylesheet.css” />
Inline style sheet includes placing the style along with the element.
Eg:

<p style="color: #FFFF00;">Inline style sheet</p>
Inline style sheet