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

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>

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

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.

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.

Hi all.
I've tried searching the net but every solution either isn't applicable or doesn't work.

My problem is that all my CSS background images are not displaying at all in ie7.

they are called in via link id.
so:
PHP Code:
<a href="javascript:void(0)" id="cus" onClick="changeCus()"><img src="/images/space.gif" height="30" width="50" alt="" title="Customer Ratings" /></a> 




fairly simple stuff.
the corresponding css is
PHP Code:
 a#cus{background:url("../images/custM.png")no-repeat;left:-140px} 





I have treid changing the link as in ../../images... but that was dumb.
Adding a background position.
Adding display:inline.
Adding display:block.

Can anyone please aligten me as to why all my css images are failing.

It works fine in FireFox.
My doctype is set to strict.
It is the correct path to the images.
The images are on the server.

Any help would be greatly apprcieated.
Thanks in advance
Jaza

Hey all
I'm trying to get to images to go to the sides of my content
div. I've been looking on Google and everyone says you cant
have 2 background images on 1 div (well is CSS2 anyways)
is there any other ways of achieving this?

also firefox is putting a space between my nav div and my content
div, but IE7 doesn't, any ideas?

Heres my HTML:
Quote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RWD</title>
<link href="rewebdesstyle.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!-- Container -->
<div id="l_container">
<!-- Banner -->
<H1>Reflective Web Design</H1>
<!-- Navigation -->
<div id="l_nav">
<br />
Home News Bio Portfolio Gallery Links Contact</div>
<!-- close nav -->
<!-- content -->
<div id="l_content" class="l_cont_left">
<p>&nbsp;</p>
<p>&nbsp; </p>
</div>
<!-- close content -->
</div> <!-- close container -->



Heres my CSS:
Quote:
body
{
text-align: center;
margin: 0px;
padding: 0px;
background-color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
}
h1 {
background-color: #666666;
background-image: url(images/l_banner.jpg);
background-repeat: no-repeat;
height: 150px;
width: 1024px;
color: #FFFFFF;
text-indent: -9999em;
margin: 0px;
padding: 0px;
}

#l_container {
margin-left: auto;
margin-right: auto;
width: 1024px;
text-align: left;
}
#l_nav {
position: relative;
height: 60px;
width: 1024px;
background-image: url(images/l_nav.jpg);
color: #666666;
font-size: 14px;
font-weight: bold;
text-align: center;
word-spacing: 4ex;
}
.l_cont_left {
background-image: url(images/l_left.jpg);
background-repeat: repeat-y;
background-position: left top;
position: relative;
width: 25px;
}
.l_cont_right {
background-image: url(images/l_right.jpg);
background-repeat: repeat-y;
background-position: right top;
position: relative;
width: 25px;
}

#l_content {
position: relative;
width: 1024px;
background-color: #7F969E;
margin: 0px;
padding: 0px;
}
#l_footer {
position: relative;
height: 67px;
width: 1024px;
}




Here's where its hosted


what i want it to look like (different fonts tho)


What ive got so far

Cheers
Lance

Ive got three divs all nested in a row. The idea is to have the main div (body tag) contain the background image that composes the color. Then the next div contains the upper left hand image and the next div contains the lower right hand image.

The problem is this. When I specify "top-left" for the image the image is positioned to the top left. When I specify "bottom-right" for the image in the next div, instead of going to the bottom right, the image ends up all the way over on the top left. why is that?

here are my three divs:

Code:

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  text-align: center;
  margin: 0px;
  border: 3px solid black;
  background-image: url(http://www.doublethinkdesigns.com/pics/dtdbg.jpg);
  background-repeat: repeat;
/*
*/
}



div#outer {
  margin: 0px;
  border: 3px solid white;
  background-image: url(http://www.doublethinkdesigns.com/pics/upper-left-fan.gif);
  background-position: top-left;
  background-repeat: no-repeat;

}

div#inner {
  margin: 0px;
  border: 3px solid black;
  background-image: url(http://www.doublethinkdesigns.com/pics/lower-right-samurai.gif);
  background-position: right;
  background-repeat: no-repeat;

}

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?

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

Is it possible without any client side scripting to load in backgrounda.gif for 800x600 resolution and backgroundb.gif for any other resolution?

Server side scripting is ok but I was hoping for a CSS method although I am pretty sure it's not possible.

Hello Community,

I'll get cracking with my code and explain all below.

My CSS;

Code:

html, body { height:100%; margin:0; padding:0; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }

body { text-align:center; font-family:'lucida grande',tahoma,verdana,arial,sans-serif; background:url(../_images/stretch_header.jpg) repeat-x top left; }

#outer { min-height:100%; height:auto; width:987px; margin-left:auto; margin-right:auto; position:relative; text-align:left; background:url(../_images/stretch_body.jpg) repeat-y top left; }
* html #outer { height:100%; width:987px; w\idth:987px; background:url(../_images/stretch_body.jpg) repeat-y top left; }

#contentContainer { width:100%; overflow:auto; }

#headerContainer { margin:0px auto; width:987px; height:117px; background:url(../_images/stretch_header.jpg) repeat-x top left; }

#centerContent { width:735px; float:right; padding:10px 10px 15px 10px; }

#footerContainer { position:absolute; bottom:0; left:0; width:100%; height:61px; text-align:center; background:url(../_images/stretch_footer.jpg) repeat-x top left; }
#footer { width:987px; height:61px; background:url(../_images/footer.jpg) no-repeat top left; }
#clearfooter { clear:both; height:61px; width:100%; }

My HTML;

Code:

<body>

 <div id="outer">

  <div id="contentContainer">
   <div id="headerContainer"></div>
   <div id="centerContent">a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br></div>
   <div id="clearfooter"></div>
  </div>

  <div id="footerContainer">
   <div id="footer"></div>
  </div>

 </div>

</body>

At the moment you will be able to see that this layout is a 1 column, centered layout. As it stands it works very well. However what I am trying to accomplish now is causing problems.

You can see from my CSS that I have 3 Background Images (stretch_header, stretch_body, stretch_footer). These are to stretch 100% of the browser, width, height, width respectively.

The problem I have is that I only have enough elements present to use 2 of these backgrounds.

stretch_header - put on the body/html works perfectly 100% width.
stretch_body - put on the "outer" div works perfectly 100% height.

This means I don't have another 100% width div to put the stretch_footer on. Every time I try to include a new div, using "position" or "float" cause various div to remove themselves from the document flow, and cause errors.

The reason for the excess "a<br>" is to force the document out of the workspace and make sure it still retains it's rigidity when combined with content.

So basically i'm asking how can I include another div to include the footer background 100% width.

Any help would be greatly appreciated.

http://www.brendanclements.com/UPS/

Code:

@charset "utf-8";
/* CSS Document */
body{
	background-color:#000;
	text-align:center;
	min-width:800px;
	background-image:url(images/lft.jpg), url(images/rht.jpg);
	background-repeat:repeat-y, repeat-y;
	background-position:top left, top right;
}

table{
	background-color:#000;
	border:none;
	border-style:none;
	min-width:800px;
	width:75%;
	margin-left:auto;
	margin-right:auto;
}

td{
	color:#FFF;
	border:none;
	border-style:none;
	text-align:center;
}

WHY WHY WHY WHY!

lol, this is very frustrating. I have 2 background images, one for the left side to repeat down and a mirrored one on the right.

I have done my research, I have tried multiple ways posted online to layer background images to have more than one.

But it won't work. I have verified the background url's which work when there is only one, but not when I try to have two.

I know I could get a workaround with a div but I want to know why this is not working and don't want to make my code more sloppy.

Thank you.

Help please.
When I add the extra <div> the background disappears.

Background image appears behind "Testing"
<body>
<div id="siteinfo">
<div id="fullinfo">
<h1>Testing</h1>
</div>
</div>
</body>

Background image disappears
<body>
<div id="siteinfo">
<div id="fullinfo">
<div id="myinfo">
<h1>Testing</h1>
</div>
</div>
</div>
</body>

Stylesheet entries:

body {
background-color: #DADADA;
background-image: url(/background2.gif);
background-position: center;
background-repeat: repeat-y;
}
#siteinfo {
position: relative;
margin-right: auto;
margin-left: auto;
width: 800px;
}
#fullinfo {
position: relative;
top: 10px;
padding-left: 0px;
padding-right: 25px;
}
#myinfo {
position: inherit;
float: right;
width: 600px;
}

All help appreciated.

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