Sidebox Image header

[cornick]

I've read this, tutorial. https://www.zen-cart.com/tutorials/i...hp?article=135

And I can't seem to get it to work.

First off, I don't have this code in my ss.

.leftBoxHeading {
margin: 0em;
background: url(../images/your_background_image.jpg) #ff6699;
padding: 0.5em 0.2em;
}
.rightBoxHeading {
margin: 0em;
background: url(../images/your_background_image.jpg) #ff6699;
padding: 0.2em 0em;
}

The only thing remotely close to that code is this.

.leftBoxHeading, .centerBoxHeading, .rightBoxHeading {

	margin: 0em;

	background-color: #000000;

	

	padding: 0.5em 0.2em;

	}

I guess what I'm trying to do is keep the word of the header (ie Categories) and put an image behind said word as a background.

[rstevenson]

You might want to have a look at the Categories Dressing mod in the free Software Add Ons (link top-left.)

Rob

[cornick]

I see "To display images in place of selected category names:"

But I don't want it in place of. I'm looking for 'in addition to the names...'

[rstevenson]

Well, you can certainly add the word to the image. It doesn't have to be text after all.

Rob

[cornick]

This is true. But then I need to create images for each header.

I'm having a hard time believing you can't just insert the image into that section...just seems too complicated to me for some reason.

Of course, coding is NOT my strength in computers.

Thanks for the info, Rob.

Jeff

[rstevenson]

Sorry, I just reread what you said in your original question. I thought you were saying that you had tried that code and it didn't work, so I proceeded from there. But I see now that you just say you don't have that code in your stylesheet.

I believe, in CSS in general, that wherever you have a background-color declaration that works, you can substitute a background-image declaration instead. So the code in your first example above should be the way to go.

So did you add it and it didn't work? Or did you not realize you could add it? If the latter, put that code down at the bottom of your stylesheet.css (to avoid messing up earlier declarations for the same elements) and try it out.

Rob

[cornick]

Ah, putting it at the bottom of the ss file worked. Thanks. I had to add a height limit on there as I was getting a weird issue with the Search header.

All the other headers were 24px and the search one was 26px for some reason.

The headers do show up differently though in IE for some reason, they start to display again under the image. But in FF they don't show..

http://www.project-hope.info/store/