Page 1 of 1
How to center the logo in header?
Posted: Mon Sep 04, 2006 3:06 pm
by yc
Hi,
I would like to place the logo in center of the title bar. I have an idea..., maybe i can in a way or another split the image in three. First some background image in the left, my logo in the center and some other background in the right... but where did I define in stylesheet where to place the images?

Can somebody help me...? thanx...
Re: How to center the logo in header?
Posted: Mon Sep 04, 2006 8:01 pm
by squigg
use the "background-position" css property.
http://www.w3schools.com/css/css_background.asp
if you are using the default stylesheet then change:
background: #COLOUR url(path/to/your/image/here.gif) no-repeat 0 12px;
to
to background: #COLOUR url(path/to/your/image/here.gif) no-repeat center center;
Re: How to center the logo in header?
Posted: Tue Sep 05, 2006 10:56 am
by yc
thanx!
Re: How to center the logo in header?
Posted: Tue Sep 05, 2006 12:01 pm
by yc
I tried to change it to center center... but it didn't work. the logo appear still in the left corner.
i have these codes in stylesheets:
/* HEADER */
div#header {
margin: 0;
padding: 0;
width: 450px
height: 120px;
background: #000000;
}
div#header a {
background: url(uploads/images/velkommen.jpg) no-repeat center center;
display: block;
height: 120px;
width: 450px;
margin: 0;
padding: 0;
text-decoration:none;
}
and these in template file:
{cms_selflink dir="start" text=""}
Please help...

Re: How to center the logo in header?
Posted: Wed Sep 06, 2006 10:56 am
by squigg
You have modified the "#header a" tag which will only change links within the header. You are trying to apply the background to the link rather than the header itself. Try moving the background code you've got there into the "#header" tag. Also remember to set a colour before the url() section as in my example.
Re: How to center the logo in header?
Posted: Thu Sep 07, 2006 5:09 pm
by Michael AC
yc wrote:
I would like to place the logo in center of the title bar. I have an idea..., maybe i can in a way or another split the image in three. First some background image in the left, my logo in the center and some other background in the right... but where did I define in stylesheet where to place the images?

Can somebody help me...?
Hi yc,
try to add "text-align:center;" to div#header.
Regards from Germany
Michael
Re: How to center the logo in header?
Posted: Thu Sep 07, 2006 7:34 pm
by tsw
Live url for these problems would help..
otherwise it will just be a guess like change background: url ()... top left; to background: url()... center center;
Re: How to center the logo in header?
Posted: Fri Sep 08, 2006 1:01 pm
by yc
it works! thanks squigg

Re: How to center the logo in header?
Posted: Thu Feb 28, 2008 7:29 am
by MasterAIP
squigg wrote:
use the "background-position" css property.
http://www.w3schools.com/css/css_background.asp
if you are using the default stylesheet then change:
background: #COLOUR url(path/to/your/image/here.gif) no-repeat 0 12px;
to
to background: #COLOUR url(path/to/your/image/here.gif) no-repeat center center;
i made my logo image aligned to the right :
example
div#header h1 a {
/* you can set your own image here */
background: #0054a6 url(images/site-logo.png) no-repeat right 1px;