.centerColumn add image to top

[cgardner]

I have a couple of problems that seem like they could be easily answered. I want to add an image to the center Column. So I added a test image to CSS:

.centerColumn {
background-image: url(../images/nirvanagrandopeningsale.jpg);
background-repeat: repeat-x;
height: 90px;
margin:0;
padding-top: 0;
}

It worked fine, except that it lines up with the h1. Not sure how to change this. See it at http://diginirvana.com/zen_cart/store

You'll also notice if you click on a product, that it covers the product image too.

How do I get the image to not be aligned with h1? Also, how do I move down the product?
Thanks for any help!
Carina

[gjh42]

Increase the padding-top and the content will move down.

You are telling .centerColumn to be 90px high. Did you want the bg image to be 90px high? If so, you have to make the image file that size - you can't specify it with CSS.

[cgardner]

AWESOME! That worked like a charm! But what do I do about the product image? Is there an easy fix for that too?
http://diginirvana.com/zen_cart/stor...products_id=25

[gjh42]

As far as I can see, you still have .centerColumn unchanged in your stylesheet, although the display has changed:

.centerColumn {
	background-image: url(../images/nirvanagrandopeningsale.jpg);
	background-repeat: repeat-x;
	height: 90px;
	margin:0;
	padding-top: 0;
	}

On your product page, it appears that everything except the product main image is moving down to comply with the padding. This doesn't make sense. Unfortunately I don't have any more time right now to figure it out. Hope someone can step in.

[cgardner]

Thanks for your help. I just changed the padding-top in h1. That fixed everything but the product.

I also just noticed that the problem occurs on the contact us page too. Hmmm. Any suggestions.

[cgardner]

I figured it out! Thanks for all your help!

[gjh42]

Changing the h1 padding-top is the wrong way to get a universal solution to the problem, and will possibly cause problems if h1 is used anywhere except in that page location.

CHange .centerColumn as described and see how that works.




Ah good! Glad you got it!



Looks great!