CSS - Background Image Issue

The layout I have going is a bit difficult to explain. Here's a diagram..



The area of importance is the header. The content and main head area are centered. The area to the left and right of the header are a <div>. However, as you can see, the background image on the left is different than the one on the right. I'm having difficulty making this work. the images can be stretched horizontally without a problem, but the two sides must meet in the middle beneath the header.

I hope this makes sense.

What I've got to do, I think, is tell the background image of the underlying <div> to stretch to 100%, and make this image 300px wide or so including both sides of the image and a split. The split would hide behind the header. I can't find a method to stretch the background image, though.

Does anybody know of a better way, or a way to achieve this method at all without getting into completely different layouts?

Thanks in advance for any assistance/suggestions.

In short, I'm trying to get this one image to tile down the page to the bottom, underneath a static background image. Basically, it's a 2pixel high image that's ready to tile vertically, just having a tough time getting it to work.

You can clearly see the problem here, a gap at the bottom:

http://www.groundedgroup.com/clients/NWR/

Here's the relevant css:
http://www.groundedgroup.com/client...WR-GG/style.css

I've googled and subsequently tried out some solutions, but no luck. Got any ideas?

Thanks in advance.

PS - Is there a way to keep the spiders from indexing my links above? The site is on a test server, so I don't want the url indexed.

Pleaes look at this page in FF and IE -

www.tmhdesign3.com

In FF you see the unwanted gap at the top? The issue is with the <div id="content"> element. If I style that element with a border-top:1px solid transparent the gap closes and it looks fine, but IE does not recognize the transparent on a border. Can someone tell me how I can get rid of that gap in FF? Thanks. Tom

I have menu on my site using ul il with a background image. It works fine in Chrome and Firefox but I can't get it to work in IE.

this is th code I'm using

Code:

<div class="menu">
<ul> 
<il><a href=\"http://www.netgamegurus.com/index.php\">Home</a></il> 
<il><a href=\"http://www.netgamegurus.com/forum/index.php?action=register\">Register</a></il> 
<il><a href=\"http://www.netgamegurus.com/contact/index.php\">Contact Us</a></il> 
<il><a href=\"http://www.netgamegurus.com/about/index.php\">About</a></il> 
</ul>
</div>

with this CSS
Code:

.menu {
height:26px;
position:relative;
background-image:url(../images/menu_bg_001.jpg);
background-repeat:repeat-x;	
}

.menu ul { 
font-size:18px; 
clear:left; 
float:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
left:50%; 
text-align:center; 
}

.menu ul il { 
display:block; 
float:left; 
list-style:none; 
margin:0; 
padding:0; 
position:relative; 
right:50%; 
}

.menu ul il a { 
padding: 0px 0.5em; 
text-decoration: none; 
float: left; 
color: #FFFFFF; 
background-image:url(../images/menu_bg_001.jpg); 
height:25px; 
border-left: 
1px solid; 
border-left-color:#000099; 
border-right: 
1px solid; 
border-right-color:#000099; 
}

.menu ul il a:hover { 
color:#CCCCCC; 
}

Any one have any ideas on this?

Hi,

In IE the sidebar background image appears ok yet in FF it doesnt.

*****************

Does anyone know how i can fix this?

Another issue that will be a problem in the future is that in IE7 it doesnt display the background or the header correctly

Thanks,
Mike

Even though I have used the background-color property, the background doesn't change to the color I specified. (CSS class "tutorial2" should have a gray background (#EDEDEC), but it doesn't display.)

(I trying to create altnernating background for easier reading.)

Code:

.tutorialpreview {
    padding-right: 4px;
    padding-left: 4px;
    float: left;
    padding-bottom: 2px;
    padding-top: 2px;
    border: 0px;
    height: 50px;
    width: 50px;
}

.tutorial {
    height: 54px;
    margin-bottom: 4px;
}

.tutorial2 {
    background-color: #EDEDEC;
    height: 54px;
    margin-bottom: 4px;
}

.tutdesc {
    height: 52px;
    padding-top: 3px;
    background-color: transparent;
}

XHTML Code:

Code:

	 	<div class="tutorals">
		<a href="http://www.depiction.net/?id=psimagemapdrawingtools">
		 <img src="images/imapdrawingtoolspreview.gif" class="tutorialpreview" alt="" /></a>
		<div class="tutdesc"><a href="http://www.depiction.net/?id=psimagemapdrawingtools">
		<strong>Image Maps with Drawing Tools</strong></a><br />
            Use Image Ready to automatically create image maps using many drawing tools to select complex shapes.<br /></div>
        </div>
		<div class="tutorials2">
		<a href="http://www.depiction.net/?id=psinterface">
        <img src="images/psinterfacepreview.gif" class="tutorialpreview" alt="" /></a>
		<div class="tutdesc"><a href="http://www.depiction.net/?id=psinterface">
		<strong>Photoshop Interface</strong></a><br />
             An overview of the toolbox, palettes, the option bar, and tool presets in Photoshop's Interface.<br /></div>
		</div>

Any thoughts?

Hi,

Usual story, ive got the site working great in IE but FF has a little problem with the white background. Its like the content isnt actually inside the inside div:

(school section example)
<div id="new_outside_school"> - the colour box
<div id="new_inside_school"> - the white centre

LINK TO SITE HERE

ive been messing and got the 'our school' section slightly better but its still not right, any ideas?

Thanks. Mike

Hi,

I have a question about setting up the Body background-image via a linked external stylesheet.

I have a index.html file and a myStyle.css file. I want to setup the background to load an image file, test.JPG.

When I embed the following in my index.html, I see the background show up:

** inside index.html file **
<BODY STYLE="background-image: url(test.JPG);"> blah </BODY>

BUT, when I define my background in the externally linked myStyle.css file, the background does not load:

** inside myStyle.css file **
BODY { background-image: url(test.JPG); }

** inside index.html file **
<LINK REL="stylesheet" TYPE="text/css" HREF="myStyle.css">
<BODY>
blah
</BODY>
</LINK>

Please help.

thanks!

Hi. Really hoping someone can help me with this... I'll try and explain this as best I can(!)

Basically I've got a page containing a block of 9 images, with each linking to a video clip. At the moment I've got the CSS coded so that whenever the mouse is hovered over the 'infobar' (at the bottom of each image) it goes from having a transparent background with black text to having a grey background with white text.

What I'm trying to achieve is that same effect whenever the mouse is hovered over any part of the image and infobar. The live online link can be found at:
www.markmcm.co.uk/test/test.html

The CSS is as as follows:

Code:

/*
 *  Page Stylesheet 
 */
body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #eaeaea;
  border:0; margin:0; padding:0;
  height: 100%;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
#container {
	margin-left: auto;
	margin-right: auto;
   	min-height: 100%;
	width: 936px;
}
* html #container {
	height: 100%;
}
#content {
	float:left;
	position: relative;
	height: 528px;
	width: 936px;
	z-index: 0;
}
.miniscreen1, .miniscreen2, .miniscreen3, .miniscreen4, .miniscreen5, .miniscreen6, .miniscreen7, .miniscreen8, .miniscreen9 {
	position: absolute;
	float: left;
	display: block;
	width: 312px;
	height: 176px;
}
.miniscreen1 {
	top: 0;
	left: 0;
}
.miniscreen2 {
	top:0;
	left: 312px;
}
.miniscreen3 {
	top: 0;
	left: 624px;
}
.miniscreen4 {
	left: 0;
	top:176px;
}
.miniscreen5 {
	left: 312px;
	top:176px;
}
.miniscreen6 {
	left: 624px;
	top:176px;
}
.miniscreen7 {
	left: 0;
	top:352px;
}
.miniscreen8 {
	left: 312px;
	top:352px;
}
.miniscreen9 {
	left: 624px;
	top:352px;
}
.info {
	height: 30px;
	top:3px;
	left: 40px;
	width: 265px;
	float: left;
	position: absolute;
}
.infobar  {
	left:0px;
	position: absolute;
	top: 140px;
	width: 312px;
	height: 36px;
	outline: none;
	color:#000;
	background: url("data/infobar.png") no-repeat 0 0;
	z-index: 650;
}
.infobar:hover  { 
	background-position: 0 -36px;
	outline: none;
	color:#fff;
}
#infobar span {
	display: none;
	outline: none;
}
.clip_title {
	outline: none;
	font-size: 85%;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}
.clip_sub {
	outline: none;
	height: 13px;
	font-size: 80%;
	line-height: 13px;
	font-weight: 700;
	vertical-align: top;
	text-align: left;
}

And the HTML is:

Code:

<!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">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Test Page</title>
		<meta name="description" content=" " />
		<meta name="keywords" content=" " />
		<meta name="generator" content=" " />
		<link rel="stylesheet" type="text/css" href="page.css" media="screen" />
	</head>
<body>

<div id="container">

	<div id="content">
		<span class="miniscreen1">			
		<a href="#"> <img src="img/clip1.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 1<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
					
		<span class="miniscreen2">
		<a href="#"><img src="img/clip2.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 2<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
		
		<span class="miniscreen3">
		<a href="#"><img src="img/clip3.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 3<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
			
		<span class="miniscreen4">
		<a href="#"><img src="img/clip4.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 4<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen5">
		<a href="#"><img src="img/clip5.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 5<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen6">
		<a href="#"><img src="img/clip6.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 6<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen7">
		<a href="#"><img src="img/clip7.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 7<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen8">
		<a href="#"><img src="img/clip8.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 8<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
	
		<span class="miniscreen9">
		<a href="#"><img src="img/clip9.jpg" width="312" height="176" border="0">
		<span class="infobar"><span class="info clip_title">Test Clip 9<br><span class="clip_sub">123 Productions</span></span></span></a>
		</span></span>
				
	</div>
</div>
	
</body>
</html>

There must be a better (and easier?) way to do this. Any help would be very-much appreciated - and save an old bloke from tearing too much of his hair out(!)

CSS :
Code:

body{
	margin:0;
	background-image:url(images/pattern1.gif);
	padding-left:5%;
	padding-right:5%;
}
h1{
	background : url(images/logo.gif) no-repeat;
	width:291px;
	height: 127px;
}
#main{
	background : #FFFFFF url(images/back.gif) repeat-x;
	border-left: 8px solid #5D5F60;
	border-right: 8px solid #5D5F60;
}

HTML:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" title="standard" href="blueDream.css"/>
		<title></title>
	</head>
	<body>
		<div id='main'>
			<h1></h1>
		</div>
	</body>
</html>

There appears to be a very strange gap on the left side
of the heading background which I cannot seem to get rid of.
Any ideas?

Hi,

I'm getting a weird problem when viewing my client's site with IE6, however, it works fine in IE7 and FF.

Here's the link:
http://www.groundedgroup.com/client...or-sale/554421/

As you'll notice, the middle area containing the description of the home is messed up. Basically, the background resizes as you move the browser scroll bar up and down. Never seen this before. Does the same with the comment area below, too.

Any ideas what's causing this?

Thanks in advance.

I'm currently using the tutorial located at Use Sprites to Create an Awesomeness-Filled Navigation Menu

Based on that I've created a sprite image that is 960x88.

I've got my menu in place, but the background-position completely fails. While I can change the width of each item, revealing more or less of the image it still only shows the first part of the image, repeating "Home". See attached screenshot for example of what it's doing.

Here is my HTML and CSS:

html Code:
Original - html Code <nav> <ul id="main_nav"> <li><a href="#" class="home"></a></li> <li><a href="#" class="case_studies"></a></li> <li><a href="#" class="solutions"></a></li> <li><a href="#" class="free_quotes"></a></li> <li><a href="#" class="government"></a></li> <li><a href="#" class="recycle"></a></li> <li><a href="#" class="resources"></a></li> <li><a href="#" class="about_us"></a></li> <li><a href="#" class="contact_us"></a></li> <li><a href="#" class="login"></a></li> </ul> </nav>

  
  <nav>
    <ul id="main_nav">
      <li><a href="#" class="home"></a></li>
      <li><a href="#" class="case_studies"></a></li>
      <li><a href="#" class="solutions"></a></li>
      <li><a href="#" class="free_quotes"></a></li>
      <li><a href="#" class="government"></a></li>
      <li><a href="#" class="recycle"></a></li>
      <li><a href="#" class="resources"></a></li>
      <li><a href="#" class="about_us"></a></li>
      <li><a href="#" class="contact_us"></a></li>
      <li><a href="#" class="login"></a></li>
    </ul>
  </nav>

css Code:
Original - css Code #main_nav { height: 40px; } #main_nav li { float: left; } #main_nav li a { background:url(../images/main_nav_sprite.png); display: block; height: 40px; } .home { background-position: 0px 0px; width: 60px; height: 40px; } .case_studies { background-position: -60px 0px; width:120px; height:40px } .solutions { background-position: -180px 0px; width:100px; height:40px } .free_quotes { background-position: -280px 0px; width:100px; height:40px } .government { background-position: -380px 0px; width:120px; height:40px } .recycle { background-position: -455px 0px; width:75px; height:40px } .resources { background-position: -555px 0px; width:100px; height:40px } .about_us { background-position: -642px 0px; width:87px; height:40px } .contact_us { background-position: -748px 0px; width:106px; height:40px } .login { background-position: -822px 0px; width:74px; height:40px }

  

  


 #main_nav {


     height: 40px;


 }


 #main_nav li {


     float: left;


 }


 #main_nav li a {


     background:url(../images/main_nav_sprite.png);


     display: block;


     height: 40px;


 }


 .home {


     background-position: 0px 0px;


     width: 60px;


     height: 40px;


 }


 .case_studies {


     background-position: -60px 0px;


     width:120px;


     height:40px


 }


 .solutions {


     background-position: -180px 0px;


     width:100px;


     height:40px


 }


 .free_quotes {


     background-position: -280px 0px;


     width:100px;


     height:40px


 }


 .government {


     background-position: -380px 0px;


     width:120px;


     height:40px


 }


 .recycle {


     background-position: -455px 0px;


     width:75px;


     height:40px


 }


 .resources {


     background-position: -555px 0px;


     width:100px;


     height:40px


 }


 .about_us {


     background-position: -642px 0px;


     width:87px;


     height:40px


 }


 .contact_us {


     background-position: -748px 0px;


     width:106px;


     height:40px


 }


 .login {


     background-position: -822px 0px;


     width:74px;


     height:40px


 } 

Ive been trying to get my new site layout up, but as I was testing different browsers, IE7 has 1 problem.

kb-studio.org/test/

when i was testing how it would look in different browser sizes, i noticed that it looked fine in all sizes above 1280 x 720. If you open, the site in a 1024 resolution, something weird happens to the background (only in IE). I validated my css and xhtml, can anyone help?

Hi Everyone,
Sorry for the (probably) dumb question, but I've been searching for answers and can't seem to figure this out. I am brand new, only using CSS because WYSIWYG and unnecessarily long HTML codes are infuriating and I was begged to try making a web page. Anyway, I guess I'm not as smart as I thought I was--when I put the following into my style sheet, I get the layout I want (because I copied it from a how-to site), but the color (which I put in) is only directly around the text, with white space on top, between the sections and on the bottom and sides. What I really want is some sort of textures thing that I found, but I figure that that will come once I can get a color to work (the same issue came up when I tried it). How do I make this work?

Again, I apologize for the inane question, but all the help sites I find are too simplistic, don't show all of this put together, or have big words that I don't understand. Care to be nice anyway and give me a hand?
Thanks!
~Tasha



body
{
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-left: 0;
padding-right: 0;}

#menu {
position: absolute;
left: 10px;
padding: 0px;
width: 250px;
background-color: blue}

#content {
margin-left: 260px;
padding: 0px;
margin-right: 15px;
background-color: blue}

Hi there. I seem to be having an issue with my backgrounds that I've set to tile in my CSS not tiling (I've tried setting the width by percents, but that skews the entire design). I'm also not seeing the "container" background show up for some reason. Hopefully someone can assist me with this, I'd be forever grateful. You can see the page he

http://sttwilightfrontier.co.uk/theme.php

Theme.php Code:
Code:

<html>

<head>
<link rel="stylesheet" type="text/css" href="styles/theme.css">
<title>Theme Test</title>


</head>

<div id="container">

    <div id="hleftcorner"></div>
    
    <div id="headertop"></div>
    
    <div id="hrightcorner"></div>
    
    <div id="missionName"></div>
    
    <div id="missionDesc"></div>
    
    <div id="headercb"></div>
    
    <div id="contenttlc"></div>
    
    <div id="contenttop"></div>
    
    <div id="contenttrc"></div>
    
    <div id="sidebartop"></div>
    
    <div id="contentleft"></div>
    
    <div id="contentright"></div>
    
    <div id="sidebar"></div>
    
        <div id="content">
            <div id="emblem"></div>
        </div>
        
    <div id="contentblc"></div>
    
    <div id="contentbottom"></div>
    
    <div id="contentbrc"></div>
    
    <div id="sidebarbottom"> </div>
    
    <div id="contentareabottom"></div>
    
</div>

</body>
</html>

theme.css Code

Code:

@charset "UTF-8";
body  {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #666666;
	margin: 0;
	padding: 0;
	text-align: center;
	color: #000000;
}

#container {
	width: 100%;
	margin: 0 auto;
	border: 1px solid #000000;
	text-align: left;
	background: url(../images/theme/stars.png) repeat;
} 

#hleftcorner {
	background: url(../images/theme/h_leftcorner.png);
	position:absolute;
	left:0px;
	top:0px;
	width:245px;
	height:180px;
	z-index:1;
	visibility:visible;
}

#headertop {
	background: url(../images/theme/header_top.png) repeat-x;
	position:absolute;
	left:245px;
	top:0px;
	width:510px;
	height:10px;
	z-index:2;
	visibility:visible;
}

#hrightcorner {
	background: url(../images/theme/h_rightcorner.png);
	position:absolute;
	left:755px;
	top:0px;
	width:245px;
	height:180px;
	z-index:3;
	visibility:visible;
}

#missionName {
	background: url(../images/theme/missionName.png) repeat-x;
	position:absolute;
	left:245px;
	top:10px;
	width:510px;
	height:58px;
	z-index:4;
	visibility:visible;
}

#missionDesc {
	background: url(../images/theme/missionDesc.png) repeat-x;
	position:absolute;
	left:245px;
	top:68px;
	width:510px;
	height:73px;
	z-index:5;
	visibility:visible;
}

#headercb {
	background: url(../images/theme/header_cb.png) repeat-x;
	position:absolute;
	left:245px;
	top:141px;
	width:510px;
	height:39px;
	z-index:6;
	visibility:visible;
}

#contenttlc {
	background: url(../images/theme/content_tlc.png);
	position:absolute;
	left:0px;
	top:180px;
	width:45px;
	height:45px;
	z-index:7;
	visibility:visible;
}

#contenttop {
	background: url(../images/theme/content_top.png) repeat-x;
	position:absolute;
	left:45px;
	top:180px;
	width:702px;
	height:45px;
	z-index:8;
	visibility:visible;
}

#contenttrc {
	background: url(../images/theme/content_trc.png);
	position:absolute;
	left:747px;
	top:180px;
	width:45px;
	height:45px;
	z-index:9;
	visibility:visible;
}

#sidebartop {
	background: url(../images/theme/sidebar_top.png);
	position:absolute;
	left:792px;
	top:180px;
	width:208px;
	height:45px;
	z-index:10;
	visibility:visible;
}

#contentleft {
	background: url(../images/theme/content_left.png) repeat-y;
	position:absolute;
	left:0px;
	top:225px;
	width:45px;
	height:521px;
	z-index:11;
	visibility:visible;
}

#content {
	background: url(../images/theme/content.png) repeat;
	position:absolute;
	left:45px;
	top:225px;
	width:702px;
	height:521px;
	z-index:12;
	visibility:visible;
}

#contentright {
	background: url(../images/theme/content_right.png) repeat-y;
	position:absolute;
	left:747px;
	top:225px;
	width:45px;
	height:521px;
	z-index:13;
	visibility:visible;
}

#sidebar {
	background: url(../images/theme/sidebar.png) repeat-y;
	position:absolute;
	left:792px;
	top:225px;
	width:208px;
	height:521px;
	z-index:14;
	visibility:visible;
}

#emblem {
	background: url(../images/theme/SanctuaryEmblem.png);
	position:absolute;
	width:500px;
	height:500px;
	visibility:visible;
	left: 110px;
	top: 10px;
}

#contentblc {
	background: url(../images/theme/content_blc.png);
	position:absolute;
	left:0px;
	top:746px;
	width:45px;
	height:45px;
	z-index:19;
	visibility:visible;
}

#contentbottom {
	background: url(../images/theme/content_bottom.png) repeat-x;
	position:absolute;
	left:45px;
	top:746px;
	width:702px;
	height:45px;
	z-index:20;
	visibility:visible;
}

#contentbrc {
	background: url(../images/theme/content_brc.png);
	position:absolute;
	left:747px;
	top:746px;
	width:45px;
	height:45px;
	z-index:21;
	visibility:visible;
}

#sidebarbottom {
	background: url(../images/theme/sidebar_bottom.png);
	position:absolute;
	left:792px;
	top:746px;
	width:208px;
	height:54px;
	z-index:22;
	visibility:visible;
}

#contentareabottom {
	background: url(../images/theme/ca_bottom.png);
	position:absolute;
	left:0px;
	top:791px;
	width:792px;
	height:9px;
	z-index:23;
	visibility:visible;
}

I'm basically trying to get some of the areas to scale with the browser window, as it is resized. (Content area, sidebar, header, etc.) You can see which ones I tried to do so with the repeat tags in the CSS Code. Thanks a bunch in advance for any help that comes!