Monday, June 13, 2016

CODE TO CENTRALIZE MY BLOG HEADER IMAGE


Centralizing your blog image make your blog site more beautiful 
in this article i will show you how to centralize your blog header image
this are the step to follow

STEP 1
login to your bloggers account  go your Template show below then click Customize

 
 Blogger Template Designer shown below click on Advance - Add Css

HERE IS THE CODE TO PAST
____________________________

#header-inner {
background-position: center !important;
width: 100% !important;
text-align: center;
}
#header-inner img {
margin: auto;


_____________________________
 If the image is small and you want it to be full size or width add this CSS code inside
_____________________________

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


_____________________________
 Align the blogger header banner and text side by side image on the right and title on the left
  _____________________________

#header-inner {
background-position: right !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: left;
clear: both;
margin-left: 20px;


_____________________________
 Make your image on the left and title on the right 
_____________________________

#header-inner {
background-position: left !important;
width: 100% !important;
}
.titlewrapper, .descriptionwrapper {
float: right;
clear: both;
margin-right: 20px;


_____________________________  
 

1 comment: