margins messed up

Does anyone know how to fix this

What I meant was too not make the Banner to repeat, but to stay in the center

The best way would to not use this as a background image but as a logo image and leave the header background just a space that is white..

If you have not edited the files to remove the logo but do not have a logo image in your template "green" images folder. rename the image to logo.jpg.
In your includes/languages/english/green/ copy the header.php file to this folder and edit it finding this line and changing the red highlighted text

define('HEADER_LOGO_IMAGE', 'logo.jpg'); 

You will have to edit your stylesheet to remove the background that you placed there.

I still have the logo image and the code but forgot how I removed the logo, so i can put it back.

But even if i put the banner as a logo won't i have to make the logo px size larger?

Hope it wasn't confusing?

You have your layout set at 850px, but your background banner is only 760px. You can either make a new white background image, in your graphic program, 850px wide... add/center your current banner image onto it, then things should be okay when you upload it and overwrite the original. PM me if you want me to do that, while having a go at rounding the corners better.

You can try this also, but I'm not sure if it will work... find in your stylesheet.css;

#logoWrapper{
    background-image: url(../images/header_bg.jpg);
    background-repeat: no-repeat;
    background-color: #ffffff;
    height:110px;
}

Try adding this declaration: text-align: center;
That may center your current image as is.

I tried the ```
text-align: center;

I still recommend making it your logo.xxx and then you can adjust the positioning

"Text-align" is meant to control contents, not background.

Try
background-position: top center;
or
background-position: center center;

This will center the background image in the wrapper.

Thank you all i tried the ```
background-position: top center;

and it is centered

can someone please help me do something similar to this?

i want to simply stretch my background whilst using a transparent logo.

i want to define the background height in pix, but width in %.

i do notice that this effects where the main body text starts though....sigh...

please have a look at the wip.

https://www.totalerc.com/zen

You must have been working on it at the same time I viewed your store. I witnessed the problem and I was going to comment on the errors, but you reverted back to error and problem free files. :D

hi sketchy,

well i spent a few hours yesterday trying to get things to work and finally things are starting to click.

so once i'd worked out a few things i reverted back to the original so i could start afresh.

i do still have an issue though perhaps you can look at?

if you notice all the text is sitting a little low in the graphics/boxes.

this was the same in the template.

how do i correct this?

Thanks so much for helping me out, maybe i can help out someone else some time.

Tim

Hi Tim. Yeah, sometimes frustration can only be cured when starting anew. Anyways, you're welcome and I'm sure you'll be helping out on the forum in no time. :happy:

I took a look at your query. Without the boxtop images, the text is centered right, but I guess with the bottom shade of the images... it mirages the effect of misaligned text headings. I guess one way to cure that, is to pad up the text and hopefully the image doesn't suffer side effects.

Find, in your stylesheet.css;

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #C0C0C0;
        background-image: url(../images/box_back.gif);
	padding: 0em;
        line-height: 25px;
	}

Replace above with;

.leftBoxHeading, .rightBoxHeading {
	margin: 0em;
	background-color: #C0C0C0;
        background-image: url(../images/box_back.gif);
        padding: 0em;
	padding-bottom: 0.2em;
        line-height: 25px;
	}

Unfortunately, I have no way to see the finished product as Firefox web dev tools remove images when adjusting virtual CSS. :down:

Good luck, Lorrie