CSS - Image Will Not Display As Background

I have a gradient background image that goes from dark to light. At the bottom of the table if the body of text grows too large the table will stretch past the length of the background gradient image exposing the bgcolor for the page (not acceptable). If I change the bgcolor of the table the color is applied over the background image. Isn't there a way to fix this with CSS?

Thanks for any help!!!

Hi everyone,

I'm experiencing an unusual problem that I could use some help with.

I've a layout that uses three background images (in separate divs) - a top bg, a bottom bg, and an overall bg.

The bottom and overall background images are causing a problem. The top bg and bottom bg are supposed to line up. And they do! My layout looked fine on my computer (PC using Firefox 3.5.7 and IE8). I uploaded it to my personal website - and it looked fine there also. I validated the code successfully.

The problem happened when I uploaded it to my client's web server. The top bg displayed ok. However, the overall and bottom background images did not display correctly. They seemed "squeezed". The overall should be center and extend to both ends of the browser window (the image is large enough).

I can't seem to identify why it would do this. I even did a test by removing all of the code except for the div containing the background image. I added another div and placed the image directly into it (so that I could compare the size). Here's the css:

Code:

html, body	{
	margin: 0;
	padding: 0;
	background-color: #CCC;
	}

#botDrop	{
/*	margin: auto; 
*/	background: url('../images/bgDropBot.jpg') no-repeat left top;
/*	width: 971px; 
	height: 50px; 
*/	background-color: #CCC;
	}

Again, looked fine on my computer, looked fine on my web server - displayed incorrectly on the client's server. On the client's server it again displayed (horizontally) smaller than it's actual size.

My background image was initially about 1200 pixels wide. I reduced it, and that seemed to make it a little better, but didn't quite fix the issue. I suspect there's some sort of calculation going on depending on the screen size. However, I don't get why it doesn't do that for me when I view it locally or on my personal web server.

Here's a screenshot showing the problem: http://www.stephencamper.com/screenshot/screenshot.jpg


I just want the background image to display at it's actual size.

Any help's appreciated.

Thanks.

-Stephen

Hi All,

Here's my issue... I have decided to try an all css-based layout which will incorporate:

1. a background image (770px wide) that repeats on the y axis in the BODY tag

2. a background image that will not repeat in a DIV tag that is slightly less wide (750px) than the BODY tag's background image

The background image in the BODY will repeat on the y axis and provide a backdrop and edges that extend beyond and below the background image contained in the DIV tag which will also contain the main content/text for the site. [ Note: The background-image in the DIV tag is 631px in height. ]

The problem is as follows:

Since I do not have enough text to extend the content DIV to the height of the background image and/or beyond, the background image is not being fully displayed; the top and bottom of the background image is being cut off and the image as a whole is being pushed upward at the same time.

To see the problem: http://publictrust.ca/css/default.htm

The css is as follows:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #260D0D;
font-size: 0.8em;
background-color: #260D0D;
margin: 0px;
padding: 0px;
background-image: url(../images/body-bg.jpg);
background-repeat: repeat-y;
background-position: center center;
}
#divHeader {
margin: 0px;
width: 750px;
color: #260D0D;
}
#divMain {
background-color: #EDCCA1;
background-image: url(../images/container-bg.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 750px;
color: #260D0D;
}
#divFooter {
text-align: center;
font-size: 0.7em;
margin: 25px 0 0 0;
}
#divHeader, #divMain, #divFooter {
width:750px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
color: #260D0D;
}
#leftMenu {
float:left;
margin:130px 0 0 5px;
padding: 0px;
width:150px;
}
#divMainContent {
float:right;
width:500px;
margin: 150px 5px 50px 5px;
border-top: 1px solid #260D0D;
}

The css file can be downloaded at: http://publictrust.ca/css/css/template_css2.css

Caveat: the solution must work in IE and mozilla/netscape AND when I add more text to the main content area, the DIV must stretch downwards to accommodate the extra text *without* changing the height of the divHeader & divFooter.

Thanks in Advance,

mne

Okay the backgroundimage "content-header" does not display in firefox for the <div id="contentWrapper"> tag. In internet explorer it displays. Not sure what the hell is going on with it.

I hate css

http://www.mgan.net/work/10-06-04/layout1.html

There is the link, I have my styles in the header section of the html file.

An important part of my design is the background image. I have tried many different things but cannot seem to solve this. I have two options:

Option 1:
One placing the image in a tag within the body. Results where pretty good except in IE 6 the content is displayed under the image.

You can see the effect of option 1 on this portion of the site: http://woodysfireworks.nl/w/index.html
example

Code:

/*option1 background image*/
img.bg {
background-color:#000;
/* Set rules to fill background */
min-height: 100%;
min-width: 1024px;

/* Set up proportionate scaling */
width: 100%;
height: auto;
overflow:hidden;

/* Set up positioning */
position: fixed;
z-index:0;
top: 0;
left: 0;

}

@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}

Option2:
I placed the image in the style sheet and then included a class and id in the tag. Here the images get blown up in all version of IE.

example
Code:

/*option 2 background image*/
#start{ background:url(images2/426.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";}

I would really appreciate some insight. I am pulling my hair out.

Thanks

Is there a fix?

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.

Hi Everyone,

I can't get my background image to display in Firefox the html looks like this:

Code:

<div id="textBack">

<div id="leftSide"></div>
<div id="centerText">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br 
</div>
<div id="rightSide"></div>

</div>

Here is my CSS:
Code:

#textBack
{
	background:url(images/textBack.gif);
	background-repeat:repeat-y;
	width:902px;
	height:inherit;
	position:relative;

}


#leftSide
{
	width:180px;
	position:relative;
	float:right;
}

#rightSide
{
	width:180px;
	position:relative;
	float:right;

}

#centerText
{
	width:540px;
	position:relative;
	float:right;
}

Can anyone tell me what it is I'm doing wrong? I would greatly appreciate it. 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(!)

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, i'm having trouble in my navigation section getting the background color to display behind the links. It works fine in the content section, just not the navigation - why is this?

Here is my code -
Code:

@import url('layout.css');
body {
	background-image: /images/skyBACK.gif;
	background-repeat: repeat-y;
	background-attachment: scroll;
	background: url('images/skyBACK.gif');
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
}
#container {
	width: 1020px;
	margin: 10px auto;
}
#masthead {
	text-align: center;
	width: 698px;
    height: 140px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #fafaff;
}
#navigation {
	position: relative;
	float: left;
	width: 148px;
	margin-top: 10px;
	margin-bottom: 10px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #66cccc;
}
#content {
	float: left;
	width: 518px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding: 10px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #66cccc;
}
#footer {
	text-align: center;
	clear: both;
	width: 698px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-top: 1px solid #dcdcdc;
	border-right: 1px solid #a9a9a9;
	border-bottom: 1px solid #808080;
	border-left: 1px solid #a9a9a9;
	background-color: #fefeff;
}
/* Masthead Styles */
#masthead h1 {
	color: #3d6c87;
}
#masthead h3 {
	color: #5f8ea9;
}
/* Navigation Styles */
#navigation ul {
	list-style-type: none;
	width: 100%;
	display: block;
	margin: 0;
	padding: 0;
}
#navigation li {
	display: block;
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
	background-color: #fff;
}
#navigation a {
	color: #0033ff;
	text-decoration: none;
	display: block;
    border: 1px solid #fff;
	background-color: #fff;
}
#navigation a:hover {
	color: #fff;
	text-decoration: none;
	border: 1px solid #5f8ea9;
	background-color: #5f8ea9;
}
/* Content Styles */
h6 {
	color: #000000;
}
h5 {
	color: #000000;
}
h4 {
	color: #000000;
}
h3 {
	color: #000000;
}
h2 {
	color: #000000;
}
#content h1 {
	color: #000000;
}
#content img {
	padding: 1px;
	border: 1px solid #808080;
}
/* Footer Styles */
#footer p {
	color: #808080;
	margin-top: 5px;
}
#footer a {
	color: #5f8ea9;
	text-decoration: underline;
}
#footer a:hover {
	color: #33627d;
	text-decoration: none;
}
a {
	color: #0033ff;
	text-decoration: underline;
}
a:hover {
	color: #33627d;
	text-decoration: underline;
}
.style_bold {
	font-weight: bold;
}
.style_italic {
	font-style: italic;
}

This is very strange to me any help would be greatly appreciated.

On button on my website store on CSS but when user turn off "load image automatically" then images don't display.

Please show me how to fix it.
Thanks a lot.

Hey,

I have a feeling that this will not be difficult to solve, but I've come to the point where I don't really know what to do any more. They say two heads are better than one; that's why working in a team is so great, because there are people from different walks of life. So, any help you can provide me from your experiences would be great!

I have five buttons that do not show up on firefox, and the images are called into play through CSS using background.

You will find the code below:

This is the CSS:
Code:

.borderBelowNav
{
	position: absolute;
	top: 0;
	left: 80px;
	width: 937px;
	height: 141px;
	z-index: 2;
}
img.borderBelowNav
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.divNav
{
	position: absolute;
	top: 55px;
	left: 175px;
	width: 785px;
	height: 61px;
	z-index: 3;
}

ul#mainNav,
ul#mainNav li
{
	margin: 0; 
	padding: 0; 
}

ul#mainNav li
{
	display: inline;
}

ul#mainNav li a
{
	width: 138px;
	height: 69px;
}

ul#mainNav li#quienesSomos a
{
	width: 138px;
	background:  url(../images/quienesSection.gif)
		      no-repeat 0 0;
	top: 0;
	left: 0;
}

ul#mainNav li#quienesSomos a:hover
{
	background-position: 0 -72.9px;
	top: 0;
	left: 0;
}

ul#mainNav li#campamentos a
{
	width: 138px;
	background: url(../images/campamentosSection.gif) no-repeat 12px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#campamentos a:hover
{
	background-position: 12px -71.2px;
	top: 0;
	left: 0;
}

ul#mainNav li#noticias a
{
	width: 150px;
	background: url(../images/noticiasSection.gif) no-repeat 14px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#noticias a:hover
{
	background-position: 14px -72.5px;
	top: 0;
	left: 0;
}

ul#mainNav li#aplicacion a
{
	width: 150px;
	background: url(../images/aplicacionSection.gif) no-repeat 0px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#aplicacion a:hover
{
	background-position: 0px -76.1px;
	top: 0;
	left: 0;
}

ul#mainNav li#contactos a
{
	width: 150px;
	background: url(../images/contactosSection.gif) no-repeat 0px 0;
	top: 0;
	left: 0;
}

ul#mainNav li#contactos a:hover
{
	background-position: 0px -72.2px;
	top: 0;
	left: 0;
}

This is the HTML:
Code:

<img class="background" src="images/treesInFog.jpg" alt="" />
<img class="innerBackground" src="images/bgroundmain02.jpg" alt="" />

<!--This div is for the black border behind the nav-->
<div class="borderBelowNav">
	<img class="borderBelowNav" src="images/borderBelowNav.jpg" alt="" />
</div>

<div class="divNav">
	<ul id="mainNav">
		<li id="quienesSomos"><a href="quienesSomos.php" title="Quienes Somos"> </a></li>
		<li id="campamentos"><a href="campamentos.php" title="Campamentos"> </a></li>
		<li id="noticias"><a href="#" title="Noticias"> </a></li>
		<li id="aplicacion"><a href="aplicacion.php" title="Aplicacion"> </a></li>
		<li id="contactos"><a href="#" title="Contactos"> </a></li>
	</ul>
</div>