PDA

Click to See Complete Forum and Search --> : Why is my background image starting below my content?

wienerdog
11-10-2006, 01:42 PM
I am trying my hand at styling this flash movie page with CSS and am trying to add a background image. However, the background image is starting below the flash and HTML content in IE. Why would this be happening?

Here's the CSS from my external style sheet related to this page:
#flashcontent {
width: 700px;
margin: 10px 0px 0px 0px;
text-align: center;
}

#movie_contact_info {
background-color: #EFEFEF;
width: 650px;
margin: 10px 0px 15px 0px;
}

And here is the page I'm trying to get to work:

<!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=iso-8859-1" />
<title>Flash movie</title>
<script type="text/javascript" src="swfobject.js"></script>
</head>

<link rel="styleSheet" href="css/style.css" type="text/css" />
<style type="text/css">
html {background-image: url(images/soup_bg.jpg);
}
</style>

<body>
<div id="flashcontent" align="center">
<table width="695" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="695" height="195">
<param name="movie" value="flash/intro.swf" />
<param name="quality" value="high" />
<embed src="flash/intro.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="695" height="195"></embed>
</object></td>
</tr>
</table>
</div>
<div align="center">
<script type="text/javascript">
var so = new SWFObject("flash/intro.swf", "CEM_Movie", "695", "195", "8", "#BDBAA5");
so.addParam("align", "");
so.write("flashcontent");
</script>
</div>

<div id="movie_contact_info">
<p class="text-1">For more information, contact:<br />
Person &bull; Director of Business Development &bull; Ph: # &bull; email: email@company.com</p>
</div>
</body>
</html>
resdog
11-10-2006, 02:26 PM
Instead of assigning the background image to the html element, try assigning it to the body element:

[code]
<style type="text/css">
body {background-image: url(images/soup_bg.jpg);
}
</style>
wienerdog
11-10-2006, 02:37 PM
Oh, duh, got it.

I guess background images don't work for the HTML element?
EC
11-10-2006, 03:08 PM
You've not done anything to center your content horizontally that I can see?
wienerdog
11-10-2006, 04:30 PM
Ok, I fixed the mess that I created. I totally forgot how to position an element on a page. My only problem is that my positioning doesn't seem to display as I'd expect. I'm trying to center the content vertically and horizontally in the browser. I created a div as a container to hold both the movie and div with contact info (movie_page_container) and put my position values:

#movie_page_containter {
position:absolute; left:50% ; top:50%;
}

#flashcontent {
width: 700px;
}

#movie_contact_info {
background-color: #EFEFEF;
width: 650px;
margin: 10px 0px 15px 0px;
padding: 10px 10px 10px 10px;
}

This is what I'm seeing:
EDIT: Problem solved! Whooo hoo!
EC
11-10-2006, 04:53 PM
you have to account for the width of your container. If you look at the upper left corner, I believe that's dead center. Now you have to use margins to adjust for the width of that whole thing.

So, margin-left: -X (half the width of the container)

I theenk.
resdog
11-10-2006, 05:13 PM
The way I would fix it is wrap the content in another div:


body, html {height:100%}

#movie_page_containter {
position:relative;
height:100%;
width:700px;
margin: 0 auto;
}

#flashcontent {
position:absolute;
top:50%;
width: 700px;
}

#flashmain {
width:700px;
margin:auto 0;
}

#movie_contact_info {
background-color: #EFEFEF;
width: 650px;
margin: 10px auto 15px auto;
padding: 10px 10px 10px 10px;
}


then my markup would look like so:

<body>
<div id="test">
<div id="flashcontent">
<div id="flashmain">
This is some text here
</div>
<div id="movie_contact_info">Blah Blah Blah</div>
</div>
</div>
</body>

Hope that helps!
resdog
11-10-2006, 05:14 PM
Or you could use EC's way...
EC
11-10-2006, 08:23 PM
more than one way to skin a cat. ;) *edit: nevermind* oh man CSS is really on my last nerve today I tell ya, my brain is goo.
wienerdog
11-10-2006, 09:37 PM
more than one way to skin a cat. ;) *edit: nevermind* oh man CSS is really on my last nerve today I tell ya, my brain is goo.

I went with the negative margin and it looks like I'm in business. I don't know why it works, but I guess I need to get a better grasp on the idiosyncrasies of CSS positioning.
wienerdog
11-12-2006, 05:58 AM
Oh, I think I get the negative margin thing now. When I tell it:
#movie_page_containter {
position: absolute;
left:50%;
top:50%;
margin: -170px 0px 0px -350px;
}

It's placing the top-left corner of my container div at 50% of the browser width, making it appear to be further to the bottom right of the page. So the negative margin centers the div so it's centered at the 50% mark? I think I finally get it now... Thanks so much for the help, guys!
EC
11-12-2006, 07:56 AM
you're welcome, glad that did the trick. :)
wienerdog
11-13-2006, 01:30 AM
you're welcome, glad that did the trick. :)

I'm just glad I finally understand why it worked. I'm started to wrap my head around CSS positioning a bit. Thanks so much for the help.
wienerdog
12-13-2006, 01:39 PM
So I'm coming back to this project that I completed, and realize I put the CSS-styled background image in as an embedded style sheet, even though I'm using it on several pages with just different contact info for each. Why doesn't this command work in an external style sheet?

body {
background-image: url(images/soup_bg.jpg);
background-repeat: no-repeat;
background-position:top;
}