google-site-verification=XK9IDkjU7jjUURp5A425iStvbYoDk39UO0ryXDjSqWw Set small blog Header image to full page width HTML Editing css editing ~ Blog on Computer Tips, Blogging Tips, Mobile Phones, Latest Technology and Topics of Public Interest

Set small blog Header image to full page width HTML Editing css editing

HTML Editing-How to set a small blog Header image to full page width-Every blogger uploads a blog header image of his choice to make the appearance of his blog better. Blog header images really decorate the blog and make it’s appearance attractive, but if the blog header image, if it is of in correct size or not properly set, will spoil the look of the blog instead of making it attractive. A small blog header image placed in centre or in the left or right may look awkward but if you want to stretch the image on your entire page, you can easily do it using the blogger template designer and adding a small HTML code there. To do it follow this simple procedure -

HTML Editing-How to set a small blog Header image to full page width

1)   Login to your blogger Dashboard using your blogger ID and password.

2)   Click template.

3)   Click customize.

4)   Click Advanced.

5)   Click Add CSS

6)   The following screen will appear

Blogger template designer

Here you have to add the following CSS code in the empty box as shown above-

#header-inner {
background-size: cover;
width: 100% !important;
text-align: center;
}
#header-inner img {
 width: 100%;
 height: 100%;
 }

Click “Apply to Blog” button in the top right hand corner to apply the template changes and return to blogger by clicking the Back to blogger. 



Now check your blog header image and if you have done every thing correct it will spread over the entire header line.

0 टिप्पणियाँ: