Does ribbon conflict with background image?

**HappinessIsaWarmGun** · 09-17-2009, 05:07 PM

Hi

I would like to use a ribbon across the top of my pages to add a bit of colour to my site. However, I'm having a problem getting the ribbon to show.

I think the ribbon is being cancelled out by the background image I'm already using.

This is my web page's body code:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 10;
font-size: 80%;
font-weight: bold;
background: #F3FAFF url(graphics/ribbon983997080.gif) top left repeat-x;
padding-top: 10px;
background-attachment: fixed;
background-image: url(graphics/background_gradient_green_fullsize.jpg);
background-repeat: no-repeat;
background-position: center top;
padding-top: 15px;
margin-right: 15px;
margin-left: 15px;
margin-bottom: 15px;
}

The initial red line basically copies the code sample provided (see below) at the Ribbon Rule Generator web page with my site's background #F3FAFF colour rather than "white" in the example.

CSS Sample provided

I had hoped that the 2nd red line in my CSS which is my background image (gradient) would not cancel out the 1st red line (ribbon). I thought background-image: would be read as an entirely different command than background: and therefore that both images would appear.

But both don't appear. In fact, it depends on the order. The way the code is presented above, the background image in line 2 appears, but no ribbon. However, if I switch the order the lines appear (i.e. put the 1st red line after then 2nd) then the ribbon appears, but not the background.

Can anyone suggest a way in which I could have both the background image (so that there is a gradient background for my pages) as well as the ribbon appearing on the same page?

Thanks.

edit: I posted in this category without realizing it was the flash category. I was reading another thread about ribbon which happened to be in flash category and just hit new post. I would have deleted this, and reposted it to the CSS category, however it appears that I do not have the power to delete my posts. Apologies in advance for posting in wrong category.

**simcomedia** · 09-17-2009, 09:47 PM

You can only have one background-image: element in any tag, expecially the body.

To get the ribbon to show up you need to create a <div> and put that ribbon background in it.

#ribbondiv {
width: 100%;
background: #F3FAFF url(graphics/ribbon983997080.gif) top left repeat-x;
height: 150px;// or whatever it is
}

Now it gets a bit tricky because you need this to be behind your other HTML. So, something like:

<html>
<head></head>
<body>
<div id="ribbondiv">
<div id="contentcontainer">Page code here</div>
</div>
<div id="mainarea">this would be more stuff blah blah</div>
<div id="footer">end of page</div>

This is loosey goosey example because there's no width, margins, padding, etc. set for these div's but what this does is show that the body has one background and any of the other elements can also have a background.

**HappinessIsaWarmGun** · 09-18-2009, 07:17 AM

Much thanks simcomedia. Your suggestion worked like a charm.

Prior to reading your post, I had applied the unsatisfactory workaround of using the IMG SRC html command to place the ribbon .gif where I wanted it at the top of each page.

However, upon receiving your suggestion, I have re-edited all pages and implemented your <div> suggestion most satisfactorily.

**simcomedia** · 09-18-2009, 03:39 PM

Fantastic! Glad it helped. As I mentioned, though, my code was just an example. You may have to make other settings to get it to work right. Like background-repeat: no-repeat; if you just want it displayed once.

Thread: Does ribbon conflict with background image?

Thread Tools

Search Thread

Does ribbon conflict with background image?

The Following User Says Thank You to simcomedia For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions