Image to css form please

[njrocket]

Hi guys, ive hear some suggestions that my layout in the middle has images as the title bars. It takes a while to load up for slow users. Heres what im talking about, on my site, Sports NightCap, you can see what im saying. I basically want this image http://www.njrocket8.profusehost.net.../howardbar.gif to be used through css so its not really an image anymore but just a css style design. But i want it to look exactly like the image bar. Any way to do this?

[kromey]

Step 1:
Chop your bar image into two pieces: the first piece should be just the leftmost part of the bar, the part that has the curve in the top left corner. We'll call this bar_left.gif. The second piece should be a 1 pixel-wide cut of the gradient you used on your bar. We'll call this bar_bg.gif

Step 2:
Write your CSS class. It would look something like this:

.bar {
     background-image: url("images/bar_bg.gif");
     background-repeat: repeat-x;
     width: 100%;
}

You could add some attributes to style your text (in fact, I strongly recommend you do), but that's the easy part, so I'll let you do that.

Step 3:
Write your HTML. It would look something like this:

<div class="bar">
<img src="images/bar_left.gif" alt="" />Kromey: World's Best Athlete?
</div>

This should at least get you on your way. Not the easiest thing in the world to do, but now your users only have 2 small images to download (I'd guesstimate less than 2K combined) instead of one big one for each headline.

[Northern Star]

An even better way of doing things would be to mark up your heading tagswould to mark up your headings tags.

Using kromey's image's you could do something like...

h1 {
     width: 100%;
     height: 25px;
     background: url("images/bar_bg.gif") repeat-x 0 0;

}
h1 span {
     background: url("images/bar_left.gif) no-repeat 0 0;
     padding-left: 10px;

}

<h1><span>Sports Nightcap</span></h1>

You'll need to mess about with the padding of both the span tag and the heading tag to get it looking right.

I'd knock you up an example if I had more time.

[njrocket]

With your example of coding in css, where is the "bar_left"? Did you forget to put that in their, or is it not necessary?

If somebody could have the basic html and css coding to show as an example that would be great.

Step 1:
Chop your bar image into two pieces: the first piece should be just the leftmost part of the bar, the part that has the curve in the top left corner. We'll call this bar_left.gif. The second piece should be a 1 pixel-wide cut of the gradient you used on your bar. We'll call this bar_bg.gif

Step 2:
Write your CSS class. It would look something like this:

.bar {
     background-image: url("images/bar_bg.gif");
     background-repeat: repeat-x;
     width: 100%;
}

You could add some attributes to style your text (in fact, I strongly recommend you do), but that's the easy part, so I'll let you do that.

Step 3:
Write your HTML. It would look something like this:

<div class="bar">
<img src="images/bar_left.gif" alt="" />Kromey: World's Best Athlete?
</div>

This should at least get you on your way. Not the easiest thing in the world to do, but now your users only have 2 small images to download (I'd guesstimate less than 2K combined) instead of one big one for each headline.

[njrocket]

neither of those examples are working maybe im explaining it wrong here. Heres what i want to do.

I want to have that image bar in css so that i dont have to photoshop it each time to make a new headline. Is there a way i can add text to it through css or something? I rather not go through photoshop to edit the image bar, takes time and looks sloppy.

[njrocket]

any ideas?

[kromey]

I was unable to get Northern Star's suggestion to work (even though I like the elegance of it better than my own suggestion), but with only some very minor tweaking I got my code to work exactly as intended.

The CSS:

.bar {
     background-image: url("bar_bg.gif");
     background-repeat: repeat-x;
     width: 100%;
     height: 25px;
     padding-bottom: 6px;
     color: white;
     font-weight: bold;
}
.bar img {
     margin-bottom: -6px;
}

The HTML:

<div class="bar">
<img src="bar_left.gif" alt="" />Kromey: World's Best Athlete?
</div>

I'd throw this up on my server to show you, but unfortunately that's not an option at the moment. Make sure that you create the images as I instructed in my first post, and adjust the image paths in this code to point to those images that you created.