Background image is hiding from me! :(

martynball

01-26-2012, 11:26 PM

Hey, i'm having a bit of an issue with getting the background image of the "image_container" div to show... Basically this website it to have two images, one in the background of a div, and one an image with a div infront of that so text and content can be added.

Need the two images so that the front one can be faded out, then switched to another one. Then it will fade back in after afew seconds. The background picture of the div will then change.. this loops.

I could also to with a better way to center the entire container instead of using percentages as they do not work very good.

http://i58.photobucket.com/albums/g268/martynball/background_image_no_work.jpg

<!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>Discount Koi</title>
<style type="text/css">
body {
background-color:#2b2b2b;
background-image: url(images/background_gradient.jpg);
background-repeat:no-repeat;
background-size:60%;
}
.main_content_container {
position:absolute;
width:810px;
height:500px;
margin:2% 15%;
}
.main_content {
background-color:#003366;
}
.social_icons { text-align:right; margin-bottom:4px; }
.icon {
background-image:url(images/social_icons.png);
height:27px; width:27px;
display:inline-block;
} .icon img { visibility:hidden; }
.twitter { background-position:0px 0px; } .twitter:hover { background-position:0px -27px; }
.rrs { background-position:27px 0px; } .rrs:hover { background-position:27px -27px; }
.facebook { background-position:54px 0px; } .facebook:hover { background-position:54px -27px; }
.content_container {
background-size:100%;
background-repeat:no-repeat;
position:absolute;
}
.shadow {
position:absolute;
bottom:;
margin-top:110%%;
}
.content_container {
width:100%; height:100%;
position:absolute;
}
.image_container img {
position:absolute;
}
.image_container {
background-image:url(images/backgrounds/hamster.jpg);
}
h1 {
font-family:Trebuchet MS;
font-weight:100;
color:#FFFFFF;
font-size:28px;
margin:20px;
padding-left:20px;
background-repeat:no-repeat;
background-image:url(images/header_side.gif);
}
</style>
<script type="text/javascript">
//This function fades images in and out for the home page. Make sure it is activated again when page is reloaded using AJAX.
function bg_fader() {
//Elements to swap images with
var elm1 = "image1";
var elm2 = "image_container";

//document.getElementById(elm2).style.backgroundImage="";
}
</script>
</head>
<body>
<div class="container">
<div class="main_content_container">
<div class="social_icons">
<a href="#"><div class="icon twitter"><img src="images/icon_buffer.gif"></div></a>
<a href="#"><div class="icon facebook"><img src="images/icon_buffer.gif"></div></a>
<a href="#"><div class="icon rrs"><img src="images/icon_buffer.gif"></div></a>
</div>
<div class="image_container">

<div class="content_container" id="image2">
<h1>Discount Koi & <br />Aquatics</h1>
</div>
</div>
<img src="images/background_shadow.jpg" width="100%" class="shadow" />
</div>
</div>
</body>
</html>

Excavator

01-27-2012, 01:12 AM

Hello martynball,
By absolutely positioning .content_container you remove that element from the natural flow of the document. That means it has no affect on it's containing .image_container like you're expecting it to.

That means you either need to give .image_container absolute sizes or find another way to position .content_container.

Myself, I avoid ap until it's absolutely necessary. Not sure in your case but I think you could do without? A link to a test site so we have the images would sure help.

martynball

01-27-2012, 02:17 AM

I'm afraid I don't have the website hosted live, it's all local. Basically what should be happening is this:

- div with background image
-- image
---div above everything with page content in

The "-" represents the layer from top to bottom. All of 3 of these elements should be the same size, and same position. Could you recommend a way of doing this ?

Excavator

01-27-2012, 02:28 AM

The "-" represents the layer from top to bottom. All of 3 of these elements should be the same size, and same position. Could you recommend a way of doing this ?

Took me a minute to figure that out. I hope I understand what you mean. I think this applies - Pitfalls of absolute positioning (http://www.tyssendesign.com.au/articles/css/absolute-positioning-pitfalls/)

Do you really need to use positioning here? I think it could easily be done without.

I could also to with a better way to center the entire container instead of using percentages as they do not work very goodTo center an element you need three things:

a valid DocType
an element with a width
that elements right/left margins set to auto

I still think a link to your test site would help in this case, we would be able to see your images that way. It's got to go live sometime or other, might as well get some webspace somewhere so you can test it.

martynball

01-27-2012, 02:55 AM

Sorry, I suck at explaining things. What I need is a div with a background image, then an image over the top of that background image (same size). Then on top of that image should be another div so I can add content over the top of the image.

Also just found a host, here is a link to the website.
http://martynleeball.web44.net/

Excavator

01-27-2012, 06:06 PM

This may be a start - body {
background-color:#2b2b2b;
background-image: url(images/background_gradient.jpg);
background-repeat:no-repeat;
background-size:60%;
}
.container {
width: 1024px;
height: 645px;
margin: 0 auto;
background:url(images/backgrounds/hamster.jpg);

}
.main_content_container {
height:500px;
width:810px;
margin: 0 auto;
}
.main_content {
background-color:#003366;
}
.social_icons { text-align:right; margin-bottom:4px; }
.icon {
background-image:url(images/social_icons.png);
height:27px; width:27px;
display:inline-block;
} .icon img { visibility:hidden; }
.twitter { background-position:0px 0px; } .twitter:hover { background-position:0px -27px; }
.rrs { background-position:27px 0px; } .rrs:hover { background-position:27px -27px; }
.facebook { background-position:54px 0px; } .facebook:hover { background-position:54px -27px; }
.content_container {
background-size:100%;
background-repeat:no-repeat;
position:absolute;
}
/*.shadow {
position:absolute;
bottom:;
margin-top:110%%;
}*/
.content_container {
width:100%; height:100%;
position:absolute;
}
.image_container img {
position:absolute;
}
/*.image_container {
background-image:url(images/backgrounds/hamster.jpg);
}*/
h1 {
font-family:Trebuchet MS;
font-weight:100;
color:#FFFFFF;
font-size:28px;
margin:20px;
padding-left:20px;
background-repeat:no-repeat;
background-image:url(images/header_side.gif);
}

You can probably get rid of .image_container. That img.shadow needs moved too.

Is that closer to what you have in mind?

martynball

01-28-2012, 02:00 PM

not really as you used a div which isnt the same size as the image in the div. So the background picture is now huge. Plus i dont really want to define the size of the div as 1024.. not everyones monitor is that size

martynball

01-31-2012, 06:54 PM

bump?

Kevin_M_Schafer

01-31-2012, 07:52 PM

Hi Martynball,

How will you see the bottom image if there is another image on top of it?

I just want to understand what you're building so I can maybe offer up some help.

* You want an image, let's say, 300px X 300px.

* You want another image on top of that one, also 300px X 300px

* On top of these, you want a div 300px X 300px in which you can enter text

Is this correct?

--Kevin

.

martynball

01-31-2012, 09:13 PM

That is correct yes, the image on top of the background image will fade out using JavaScript.

Kevin_M_Schafer

01-31-2012, 10:23 PM

Hi martynball,

Well, there might be other ways to do this -- by a more experienced coder, but this is what I can think of at this time. I used full url addresses so you can copy the code and use it in your editor to see it work right away.

If you want, could you post your results after applying the javascript? I'm interested in what you're building.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Divs stacked up on top of each other</title>

<style type="text/css">

body {
font-size:100%; }

#underlying-image {
width:290px;
height:81px;
background-image:url('http://www.theeagleextra.com/new/images/tee_e-edition.gif');
background-repeat:no-repeat;
position:absolute;
margin-top:100px;
margin-left:300px; }

#top-image-to-fade {
width:290px;
height:81px;
position:absolute;
margin-top:100px;
margin-left:300px; }

#top-div-for-text {
width:280px;
height:71px;
font-family:arial;
font-size:1em;
color:green;
line-height:1.1em;
text-align:justify;
padding:5px;
position:absolute;
margin-top:100px;
margin-left:300px;}

</style>

</head>
<body>

<div id="underlying-image"></div>
<div id="top-image-to-fade"><img src="http://www.theeagleextra.com/testfiles/helpimages/teal-image.gif" width="290" height="81" alt="teal image" /></div>
<div id="top-div-for-text">Here's text in a third, top div! It may not look like it, but there's an underlying image, a colored block, and this text box all stacked up on top of each other.</div>
</body>
</html>

Edit: You wouldn't have to use css to implement the underlying image. I just did that for the heck of it. You can incorporate the underlying image the same way the teal image is incorporated.

--Kevin

.