Header Image Alignment problem

[uk_martin]

Hi

I'm trying to modify the Curve theme to match a theme that I am also developing in phpBB3. Progress so far -

phpBB3 - http://www.brummiesfans.com/main/portal.php
Coppermine - http://brummiesfans.com/coppermine/

As can be seen I have a problem with the positioning of the header image. In phpBB, the image acts as a background and sits beneath the border graphic. In Coppermine, the image seems to sit on top of the border.

The header image also seems to form part of the template.html file as opposed to being handled in the style.css like the border image files.

Is there an easy way to:

a) handle the header image in style.css?
b) arrange the order of the grahics files in style.css so that the header image goes "under" the border lines, to give the same effect as in phpBB3?

Thanks in advance.

Martin

[Αndré]

In phpBB, the image acts as a background and sits beneath the border graphic. In Coppermine, the image seems to sit on top of the border.

In phpBB it's the background of a div, in Coppermine it's a separate img element. Try to use your image as background for the cpg_logo_block_inner div.

[uk_martin]

Thank for the reply, but it's not quite there yet.

The header image is now where I want it, but it's come at the expense of the top right corner graphic which comes from the "main_block.png" file. I can't seem to have both files "live" in the code, else the whole header looks a mess.

At the moment I can either have a header and a missing top right corner with this code:

Code Select Expand

body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}

#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
[b]//    background-image: url(images/main_block.png);[/b]
    background-repeat: no-repeat;
    background-attachment: scroll;
[b]//    background-position: 100% -240px;[/b]
    display: block;
    padding-top: 110px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#cpg_logo_block_logo {
    float: center;
    border: none;
}

#cpg_logo_block_name {
    float: right;
    text-align: center;

OR

I can have the border but no header graphic with this code:

Code Select Expand

body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}

#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -240px;
    display: block;
    padding-top: 110px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#cpg_logo_block_logo {
    float: center;
    border: none;
}

#cpg_logo_block_name {
    float: right;
    text-align: center;


It appears that the "main_block.png" image needs the "background-position:" values in order to line up correctly, but these values then throw the "header_random_1.png" off the screen.

How can I get both of the images to display corectly?

Thanks again.

Martin

[uk_martin]

Thank for the reply, but it's not quite there yet.

The header image is now where I want it, but it's come at the expense of the top right corner graphic which comes from the "main_block.png" file. I can't seem to have both files "live" in the code, else the whole header looks a mess.

At the moment I can either have a header and a missing top right corner with this code:

Code Select Expand

body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}

#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
//    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
//    background-position: 100% -240px;
    display: block;
    padding-top: 110px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#cpg_logo_block_logo {
    float: center;
    border: none;
}

#cpg_logo_block_name {
    float: right;
    text-align: center;

OR

I can have the border but no header graphic with this code:

Code Select Expand

body {
    background: #d00000;
    font-family : Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color : Black;
    margin: 0px;
    padding-top: 10px;
    padding-right: 5%;
    padding-bottom: 15px;
    padding-left: 5%;
}

#cpg_logo_block_outer  {
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 0pt -240px;
    padding-left: 10px;
}

#cpg_logo_block_outer div.cpg_logo_block_inner {
    background-color: transparent;
    background-image: url(images/header_random_1.png);
    background-image: url(images/main_block.png);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: 100% -240px;
    display: block;
    padding-top: 110px;
    padding-right: 20px;
    padding-bottom: 0px;
    padding-left: 0px;
}

#cpg_logo_block_logo {
    float: center;
    border: none;
}

#cpg_logo_block_name {
    float: right;
    text-align: center;


It appears that the "main_block.png" image needs the "background-position:" values in order to line up correctly, but these values then throw the "header_random_1.png" off the screen.

How can I get both of the images to display corectly?

Thanks again.

Martin

[uk_martin]

Does anyone have any ideas on how the two images can happily co-exist?

Thanks in advance

Martin