Help with adding a image to background bars CSS.

[drgr33n]

Hey Peops

I wanted to ask for some help floating an image at the end of the sidebox bars of my store.

First my CSS responsible for the bar is here ..

background: #35568C;
color: white;
font-size: 15px;
font-weight: bold;
padding: 21px 20px 20px;
text-transform: uppercase;

That looks like this ..



And I would like to float an image over the bar so it looks like this ...



Can someone help me out or point me in the right direction ?

Thank you in advance !!

[drgr33n]

Sorry forgot to link my site ..

http://www.colmangroup.co.uk

[gjh42]

You can't have a background image that extends beyond the edges of an element, as you show. What you need to do is make the owl image for the sideboxes to include the blue field, and use that as the background-image for the headings instead of the background-color. Essentially info_bar_owl.jpg without the text.

If you want the owl's wing to visually extend beyond the rest of the sidebox content and have the blue edge align with the rest, give your headings a negative margin-right, like this:

margin-right: -13px;

[drgr33n]

Thank gjh42 much appriciated. I also want to do this with other bars that extend over the entire page. If i use a image for those bars it may throw the page out of proportion on different screen sizes. Can I make a smaller image if the owl with the background colour and position it at the end ? If so how would I achieve this using CSS ? Sorry about all the questions I'm pretty clueless on all this stuff lol

[gjh42]

You could do that easily if the owl didn't also project above the top of the blue bar. Solid color takes almost no extra file size to extend a long distance, so you can make the bar long enough to fit the widest you want your page to get. Any extra width of the bg image will just be cut off, so no problems there.
I recommend using max-width: 1234px; (whatever size you want) in #mainWrapper, because most pages are not going to look good with the content stretched over a big widescreen monitor. Either that, or they will be crowded beyond recognition or requre major horizontal scrolling in a small screen.

By the way, you will want to use for any bg image that doesn't exactly fit the container

background-position: right top;

[drgr33n]

Many thanks gjh42 worked a treat ;)