With the stretch template they have a bit of a flaw. Not so much a design flaw but their is a problem when trying to upload header images. If the image you upload fits perfectly on your screen does not mean it will for everyone else. The problem being is normal template have a set image width and it is normally equal to the content area. With the stretch templates the content area changes size depending on the size of the monitor uses to view it on. Here is a remedy to this problem.
Go to Design > Template Designer > Advanced > Add CSS
Input this code below.
#header-inner {
background-image: width !important;
width: 100% !important;
height:300px;
background-repeat: no-repeat;
background-position: center !important;
}
Change the Red to the same height as the image you are using.
That is it your done.
Search This Blog
3 comments:
used it like this
#header-inner {
background-image:width;
width:100%;
height:200px;
background-repeat:no-repeat;
background-position:center;
}
not working.
http://www.worldpeacevision.co.cc/
This tweak is not to make your header image stretch across the page but to fix a problem with the stretch templates. You blog is not a stretch template therefore this tweak does not apply to you.
You just need to upload a larger image as your header. If your having problems centering the header with a larger image you can use something like this.
.header-inner {
background-position:center;
}
Or if that is not working try this
.header-inner {
margin: 0px 1px 1px 0px
}
Adjust the 2 sections with 1px to move the header one way or another.
Notice I am not using the # sign to specify the CSS rule because with the designer templates the rules are specified with a period.
I did this and it worked great in making my blog wider but my header photo was to the left how do I center it could you please comment me on my blog http://kriznizzel.blogspot.com/
I have changed it back to normal until I work out the header THANK YOU so much! your blog is a real help
Post a Comment
Please don't post hyperlinked text within the comment box! It will not be published and you will be marked as spam.