How to center the logo in header?

[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...

[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;

[yc]

thanx!

[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...

[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.

[Michael AC]

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

[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;

[yc]

it works! thanks squigg 

[MasterAIP]

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;