CSS - Creating Text With Background And Foreground Images

I'm not sure if the title describes exactly what I mean, but here it goes.

I'm working on this website: http://denartcc.org/d/

The menu along the top has images that change position when you hover over them. The thing that I'm trying to do is create something that looks like this site's menu: http://www.aopa.org/ Notice how hovering over one of the menu items reveals another blue bar that contains more links. This is what I'm trying to create.

Unfortunately I'm stuck when it comes to comparing these side-by-side, and I just don't know how to create that secondary set of links. The code I'm using is below.

CSS:
Code:

#amenu {
	list-style: none;
	padding: 0;
	margin:auto 0 0 0;
	width: 930px;
	height: 30px;
	background-color: black;
	position: relative;
	border-bottom:medium solid white;
	float:left;
}
#amenu ul  {
	display: none;
	position: absolute;
}

#amenu ul li {
	}

#amenu li a {
	display: block;
	text-indent: -900%;
	position: absolute;
	outline: none;
}

.home {
	width: 120px;
	height: 30px;
	background: url(../images/menu/home.png) no-repeat;
	left: 20px;
	top: 0px;
}

.airspace {
	width: 163px;
	height: 30px;
	background: url(../images/menu/airspace.png) no-repeat;
	left:160px;
	top:0;
}

.community {
	width: 174px;
	height: 30px;
	background: url(../images/menu/community.png) no-repeat;
	left:343px;
	top:0;
}

.controllers {
	width: 195px;
	height: 30px;
	background: url(../images/menu/controllers.png) no-repeat;
	left:537px;
	top:0;
}

.pilots {
	width: 174px;
	height: 30px;
	background: url(../images/menu/pilots.png) no-repeat;
	left:752px;
	top:0;
}

#amenu a:hover {
	background-position: left bottom;
}

#amenu a:hover span{
	display: block;
}

HTML
Code:

<div>
		<ul id="amenu">
			<li><a href="#" class="home">Home<span></span></a></li>
			<li>
			<a href="#" class="airspace">Airspace<span></span></a>
				<ul>
				<li>ZDV Airports</li>
				<li>Preferred Routing</li>
				<li>Try Something New</li>
				</ul>
			</li>
			<li><a href="#" class="community">Community<span></span></a></li>
			<li><a href="#" class="controllers">Controllers<span></span></a></li>
			<li><a href="#" class="pilots">Pilots<span></span></a></li>
		</ul>
	</div>

Is there some way to rig CSS to display 2 separate background images. I wanted to put the 2 images on opposite sides. I tried, but both IE 6 and Firefox 1.0.2 displayed only 1 bg image. Anyone got a suggestion?

Edit - Oh yeah...this is for the BODY tag. I thought I ought to mention that.

Hi

I have a table which i want to add 2 background images too.
what i have is. one image with no-repeat at the top. Then for the rest of the table, i want to have a gradient background. Is this possible?

Hi there,

hopefully someone can help me out with some background image issues. I simply want a right hand section on my site, where i can fill it with content and it can expand appropriately as per the content and display a top, middle and bottom background image.

this is because the style of the site has curved edges, so this will be a top image with the curves, a centre image and a bottom image with bottom curves.

here is my code but none of the top or bottom background images show.

please help, thanking you in advance.

css:
#feature {
float:right;
width: 287px;
height: auto;
}
.featuretop {
background-image:url(../images/css/featuretop.gif);
background-position:top;
background-repeat:no-repeat;
}
.featuremiddle {
background-image:url(../images/css/feature.gif);
background-position:center;
background-repeat:repeat-y;
}
.featurebottom {
background-image:url(../images/css/featurebottom.gif);
background-position:bottom;
background-repeat:no-repeat;
}


html code:
<div id="feature">
<div class="marTOP10">
<div class="featuretop"></div>
<div class="featuremiddle"></div>
<div class="featurebottom"></div>
</div>
</div>

Hello, I'm new to Dev Shed, I hope I won't seem like a fool here


Is there any way to have to background images?
I mean, I want to have a heading background image, and a footer background image to the same table.

longing to your replies>>>>

Hi Folks,
I've designed an H1 page heading within a DIV with rounded ends. and HTML text inbetween. It should appear as a horizontally expanding and contracting capsule. I can make one end rounded with a CSS background image in the DIV or the H1 - but how can I do the other? No tables allowed here and it has to be done only in the stylesheet. I've tried a BG in the DIV and a BG in the H1 but they don't line-up, even when there's no padding or margins.

Is it possible to somehow attach an image to one side of an element?
Thanks
John

Hello, as the subject states I have a question about whether IE can display a background image on a tr and a td correctly. I have a table row with a repeating background then in the first cell in that row I have another background image that goes in the top left corner with a transparent background color on the cell so that the tr background can show though.

This works as it should in all browsers except IE where only the td background image appears and its transparent to the page background not the tr background.

This is the css:
Code:

.professor_forum_row {
	background: #ffffff url(../images/author_post_background.jpg) repeat top left;
}

.professor_corner_tab {
	background: transparent url(../images/article_sticky_author.jpg) no-repeat top left;
}

the html is just a table with those classes assigned to the row and first td.

Any ideas on why this is happening?

Thanks,
Ryan

I have a site that will be relying heavily on background images sitting behind all the tables. These backgrounds will work in concert with the overall background-color: property.

My question is this, on the style sheet, of which I would like to have ONE. Is there a way to change entire background-images for each page within the site.

In another post, we went over how to change images within the same <div> by simply making the <div> a holder and swapping the image on each page by using something like:

<div id="image" class="page_two">

Is there a way to do something similar using an entire background image? Or do I need a separate style sheet for each page? Perhaps the main style sheet which has a body like this

body
{
margin:0px;
}

and then attach an additional style sheet to each page that supersedes the body tag in the main sheet?

I hope I am making sense...


thanks

jon

K. I have my content bg which is to repeat, but I want to put like another background image set to the right in the content box.
HTML Coding
*************
<div id="special_feature_top">
<img src="images/specialfeatures.jpg" width="800" height="30" alt="" />
</div>

<div id="special_feature_mid">
<img src="images/imagegalleryfeature.jpg" width="193" height="178" alt="Image Gallery" />
<img src="images/jointodayfeature.jpg" width="193" height="178" alt="Join Battle Glory Today!" />
<img src="images/forumsfeature.jpg" width="193" height="178" alt="Forums" />
</div>

<div id="special_feature_btm">
<img src="images/specialfeatures_btm.jpg" width="800" height="30" alt="" />
</div>


CSS Coding
*************
#special_feature_mid {
padding: 1px 0px 1px 10px;
background-image: url('images/content_bg.jpg');
}

That's the coding for the image now just with the content_bg. Now the other image I just want set to the background also so text can over lap or other images. It's a really nice opacity image that blends in perfect. I just want it in background also positioned to the right. thanks

Matta

having an issue with trying to work out the best way to overcome my current issue.

what i am trying to accomplish best case scenario is as i hover over a link i get a descriptive box over on the right of this describing what the link is preferable like the nav bar always visible near the top right .

now i have got some examples of trying to get this to work but it not that good currently.

I am currently using a span to accomplish this but have a few issues with it so far.

the first two links are my css sheet and the verified html page but it doesn't look the way i want it.

the third link is the page that is more like what i want. but still not 100% what i need.

be aware my whole page is self sizing so absolute position with measurements are out of the question.

Please help and if span is not the option whatever someone can suggest to put me on the right path.

I currently using pure css and html for the page but running out of ideas if no suggestions will use java if that will accomplish the task needed be but prefer not too.

CSS verified

theknowledgeden .com / default .css

Verified html

theknowledgeden .com / ancient-afr .html

non verified html but closer to what i am trying to accomplish.

theknowledgeden .com / ancient -asia .html

Hi:

Does anyone know of a site(s) that deal with text presentation in CSS? I'm looking not for the plain text manipulation but for really, really good FX(maybe?) text presentations.

Just place a link to a site(s) that you consider you would be looking for.

Also, if it has been mentioned in the forum, kindly show me the link to it.

Thanks.

Hi

I have 3 background images that make up the background for my navigation you can see here http://dmumford.bizhat.com/test/about.htm

When viewed in FF and Netscape it breaks in 3 positions, in IE just below the top image.

Does anyone know why, and can they please help me

Thanks

I have split up a huge background image into three much smaller images.

I want one of them to tile horizontally across the top of the page, another to tile vertically down the left side of the page, and the third to be in the topleft corner of the page.

Is there anyway to do this in IE6?

I have tried using multiple containers and the background-position attribute, but have been unable to get it right.

Any ideas?

Code and page displayed

Ive been working on it for a few days...making it look like a page. But now im so close i just cant get the top and the top right and top left corners to appear correctly as you can see from the link above. Any ideas why?

I realise using just div's isn't the best way w3 style but there are reasons why im not making use of other elements.

This puzzles me for this is the first time EVER that it is not working. I have "background-image" coding and NONE of those images are even showing up, yet when i add them on the index file as a normal image all is well...

Any ideas?