Hi,

Does anyone know how to create a banner using CSS like the one attached?

I am trying to add something similar to my blog.

Can someone give me some code as a example please?

(Just used the MyBB one as a example )

Thank you

Use a graphics program to create a narrow vertical cross section of the banner (so that the weight of the image is small) and then use background-repeat along the x-axis like this:

background: url(bg01.jpg) repeat-x;

For example the horizontal blue bar here is done that way: http://www.mediafire.com/

Thanks, Where do I place this code?

I take it I place it in my css file? Then what HTML would I need to add for it to show?

I tried putting it in my .css file and my background turned white.

Any assistance with this and I would be grateful.

Thank you

Yes that goes in your css. You would have something like this for the banner text:

<div id="banner">Latest News yada yada</div>

and then your css would say:

#banner {
background: background: url(bg01.jpg) repeat-x;
padding: 10px 0;
}

The padding is there just to give the div a bit of height (there might be more elegant ways to do this that LadynRed will show us when I've made a hash of this )so that your background image shows. If you get stuck, post a link to the page that has the problem.

Hi,

The blog is http://www.mixedmatt.com

You can see near the top it says "test". It's still not working. I think it's a problem with the wordpress theme somewhere. Something in the css regarding that theme but I really am not experienced in this area.

Thanks for your assistance

If you look in the css file here http://www.mixedmatt.com/wp-content/...s-10/style.css

you have:

background: background: url(http://www.mixedmatt.com/wp-content/themes/digg-3-columns-10/images/bg01.jpg) repeat-x;

The 'background' should only occur once.

Also, you would be better using a vertical cross section for your image that would repeat well horizontally, like this http://www.mediafire.com/images/main_fade.gif

Try to change your CSS for #banner to this:

#banner {
background: url(http://www.mixedmatt.com/wp-content/...mages/bg01.jpg) repeat-x;
padding: 10px 0;
text-align: center;
}

****Edit****
Also, if you are just using a solid color for your background, just add the color to your CSS:

The color you have in your background image is FB4C49

So your CSS would look like this:

#banner {
background: #FB4C49 url(http://www.mixedmatt.com/wp-content/...mages/bg01.jpg) repeat-x;
padding: 10px 0;
text-align: center;
}

Unless there's a pattern to that bar that I can't see, there's no reason to use an image at all. Define the <div> to the height you want, then give it the yellow background color. Next you add a 2px solid border at the top and bottom in the darker gold color.

http://www.mixedmatt.com

Getting closer. The top part is now red too.

Thanks for the assistance all. Ladynred I tried that method and had no idea what to do.

I used the code from angele803 post.

Matt

For the borders you will need:

border-top: 2px solid #f00;
border-bottom: 2px solid #f00;

Alter the 2px to change the width and the #f00 to change the colour.

Try this:

#banner {
background: #FB4C49;
padding: 10px 0;
text-align: center;
border-top: 2px solid #f00;
border-bottom: 2px Solid #f00;
}

I think that should do it! (some of this was taken from other people's suggestions. I just wanted to put it together so it would be easier for you)