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. 

HTML Basics- Webpage, HTML document and principles of HTML writing

 

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

blogger header image size, blogger header html code, how to resize blogger header image, how to change logo size in blogger, blogger header dimensions, blogger header image maker, How do I change the header width in Blogger, How do I make an image full width header, How do I change the size of the header image in HTML, increase the size of the title of your blog page.