Position Christmas bells on header1-module

I created a style3, a christmasstyle for the coffe-template. Everything looks fine, except one thing:
I want to display a picture with christmasbells a the lefttop of the header1-module.
To to that I used this code (style3.css):

Code: Select all

#gkHeaderModule1::before {
   content: url('../images/style3/decoration_left.png');
   left: 410px;
   position: absolute;
   top: 220px;
   z-index: 1;

The problem is that the christmar not on the same place on every screenresolution.
example when it's ok:


example, seen with another screenresolution:


Is there a way, to get the picture always on the same place?

Hi,

yes, but you have to set the position: relative to the container with the main template content and the bells and then you should set the left property to 0 or a little bit negative value i.e. -20px.

Currently the bells are positioned to be 410 pixels from the left side what cause your problem.

Hi,

yes, but you have to set the position: relative to the container with the main template content and the bells and then you should set the left property to 0 or a little bit negative value i.e. -20px.

Currently the bells are positioned to be 410 pixels from the left side what cause your problem.

Thank you for your quick response. The xmasbells are now at the right position but for some reason, the header1-module is below the xmasbells.

I used this code:

Code: Select all

#gkHeaderModule1::before {
   content: url('../images/style3/decoration_left.png');
   left: -20px;
   position: relative;
   top: -20px;
   z-index: 1;

This is the result:


The URL of the testsite is http://www.marcbogaert.be/ooievaar

You have understand me wrong - please put position: relative for the #gkHeader element and use position: absolute for the bells

Ooops, my mistake.

Changed the code into this fixed the problem:

Code: Select all

#gkHeader {
   position: relative;
}
#gkHeaderModule1::before {
   content: url('../images/style3/decoration_left.png');
   left: -40px;
   position: absolute;
   top: -55px;
   z-index: 1;
}


Thank you for your help!