CSS - Multiple Background Images.

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

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>>>>

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.

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

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>

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, I have 12 thumbnails, and I want a horizontal scrollbar in the div for the thumbnails

Here's the HTML: Code:

 <table  bordercolor="333333" border="1" cellpadding="8">
<th valign="center">
<p class="productText"> MEET THE PHERMONES</p>
</th>
<tr><td height="75" id="productImages">
<a href="#"><img src="images/products/thumbs/prod1T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod2T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod3T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod4T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod5T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod6T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod7T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod8T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod9T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod10T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod11T.jpg" border="0"></a>
<a href="#"><img src="images/products/thumbs/prod12T.jpg" border="0"></a>
  </td>
</tr>
<tr>
 <td height="138"><p class="productText">THIS IS A TEXT BOX. WHEN THE USER CLICKS ON ONE <br />
  OF THE ABOVE IMAGES, THIS BOX SHOULD BE FILLED WITH CONTENT SPECIFIC TO THE IMAGE: <br />
IE A DESCRIPTION OF THE IMAGE. </p>
<p>&nbsp;</p>
</td>
</tr>
</table>

Here's the CSS: Code:

#productImages{
float:right;
margin-right: 21px;
postion:absolute;
height:78px !important;
width:300px;
overflow: scroll;
}

Here's the site: http://www.caillouette.com/alpha-dream3/alpha-maschio.html#

Basically I need a horizontal scroller, and not a verticle.
Why are my images stacking vertically instead of horizontally?
thanks

I want to create a rule which specifies a container, then allows a number of images to be displayed within that container at defined positions (top-left, top-right, bottom-left, bottom-right)

I also want any text placed in the div to wrap around all the images.

here's how far I've got - I've got the images where I want 'em - but the text won't flow around the absolutely positioned elements...

I need the bottom elements to be positioned relative to the BOTTOM of the div as its size will change relative to the length of the text displayed within it...

css code:
#content {
background-color: #99CCFF;
position: relative;
width: 400px;
left: 100px;
top: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
overflow: hidden;
}

#content .imgtopleft
{
top: 0px;
float: left;
padding: 5px;
}


#content .imgtopright
{
top: 0px;
float: right;
padding: 5px;

}

#content .imgbottomleft
{
position:absolute;
bottom: 0px;
left:0px;
float: left;
padding: 5px;
}

#content .imgbottomright
{
position:absolute;
bottom: 0px;
right:0px;
float: right;
padding: 5px;

}

HTML:

<div id="content">
<img src="images/emsmall.gif" class="imgtopleft">
<img src="images/emsmall.gif" class="imgtopright">
<img src="images/emsmall.gif" class="imgbottomleft">
<img src="images/emsmall.gif" class="imgbottomright">
Lorem ipsum...
</div>

hi all,

I am trying to figure out how to have multiple CSS Rollover images with links on one page.

Any ideas, tips, suggestions or samples are greatly appreciated!

Brook

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

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?

I'm trying to adapt a technique I saw on matthewjamestaylor 's website to a design for my site that involves overlapping divs with background images. I can't get one of them to show up, and I'm not sure why?

I'm using nested divs to get equal column heights. I need different background images on a number of elements.

Here's the overall structu

<body> - has an image background that repeats.
<wrapper> - has an image background that repeats.
<header>
<navbar> - has a background image that doesn't repeat.
</navbar>

<banner>
</banner>
</header>
<colmask>
<colright>
<content>
<main> - has a background image that doesn't repeat.
</main>
<sidebar> - has a background image that doesn't repeat.
</sidebar>
</content>
</colright>
</colmask>
<footer> - has a background image that doesn't repeat.
</footer>
</wrapper>
</body>

I also need a background image on either colmask, colright, or content as well, and it's not showing up! I can't figure out why. It's a border image that should show up between the sidebar background and the main content background. Any idea why it's not expanding to fill it?

I'm uploading my site to elenmir dot com / themes / elenmir / default dot html

Thanks

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.

I am writing my site in XHTML 1.1 (application/xhtml+xml) entirely using ems. The page scales really nicely with browser text resizes however all of my rounded corners (background images), image bullet points, and any other background images do not.

Is there any way to specify the background image width in ems? I think I'm going to have to mix presentational images with content otherwise.

I have a website that I am trying to add some graphical enhancements to. I made them, and I think they look great! The problem is that they do not look the same when viewed in IE and I am not even sure where to start fixing them, as the problem doesn't make sense to me.

starcraft-source.com/sandbox/

That is the URL to the page. It works great in FF but as I have said IE is messed up. Any help anyone can offer would be awesome.

Thank you in advance.