Load together Image and SWF file using css as Background

[ontljoshi]

I would like to load the image which i have prepared and the Flash swf file at the same time. I am loading image using CSS Stylesheet and as background. But when i tried to do the same thing with SFW file it could not load together.

Any one knows how to load image and SWF file together using CSS. The image currently coming as following

#content{
margin: 0;
padding: 160px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
}

and i have tried to do following :

#content{
margin: 0;
padding: 160px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
backgound-ulr: {content.swf);
load: swf;
}

it doesn't work, i think something wrong.

looking for a solution...

[Eye for Video]

Well I'm not really sure I understand the problem..
Do you want an image or a .swf as your background?
For one thing,

backgound-ulr: {content.swf);

contains a spelling error, backgound.
Second, you can't have two backgrounds...

background: url(content_top.jpg) left top no-repeat;
backgound-ulr: {content.swf);

So... what are you trying to do.
Eye for Video
www.cidigitalmedia.com

[ontljoshi]

Dear Eye for video,

thanks for your attention, sorry i was in balckout for last 4 to 5 days as ISP was down. Well, i have managed to load the flash object as an object in DIV tag using normal way but my drop down menu appears behind the flash file so i can not see and use some of the links under particular tab as they appear behind the flash file.

could you pleaseshow me some way to over come this issue. please find following code which i have used.

<div id="wrapper">
<div id="header">
<h1>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </h1>
<!-- <p class="strapline">xxxxxxxxxxxxxxxxxxxxxxxx</p> !-->
</div>
<div id="outer-image" align="justify">

<div id="inner-image" align="center">
<object id="bannertop" classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="80%" height="138" align="middle">
<param name="movie" value="styles/installedstyles/RedKeys/banner2_top.swf">
<param name="quality" value="high">
<embed src="styles/installedstyles/RedKeys/banner2_top.swf" width="80%" height="138" align="middle" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
</div>
</div>
<div id="navbar">
<ul>
<li id="navli121166"><a href="index.htm">Home
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121167"><a href="ContactUs0.htm">Enquiries</a></li>
<li id="navli121168"><a href="Search.htm">Search</a></li>
<li id="navli121169"><a href="TermsOfBusiness.htm">Terms of Business</a></li>
<li id="navli121170"><a href="PrivacyStatement.htm">Privacy Statement</a></li>
<li id="navli121171"><a href="FirmStatus.htm">Firm Status</a></li>
<li id="navli121172"><a href="MortgageFees.htm">Mortgage Terms</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121174"><a href="AboutUs.htm">About Us
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121175"><a href="Services.htm">Services
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121176"><a href="Pensions.htm">Pensions
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121177"><a href="Pensionsimplification.htm">Pension simplification</a></li>
<li id="navli121178"><a href="PersonalPensions.htm">Personal Pensions</a></li>
<li id="navli121179"><a href="Stakeholder.htm">Stakeholder</a></li>
<li id="navli121180"><a href="CompanySchemes.htm">Company Schemes</a></li>
<li id="navli121181"><a href="Annuities.htm">Annuities</a></li>
<li id="navli121182"><a href="PhasedRetirement.htm">Phased Retirement</a></li>
<li id="navli121183"><a href="Incomedrawdown.htm">Income drawdown</a></li>
<li id="navli121188"><a href="companyfinalsal.htm">Final Salary Schemes</a></li>
<li id="navli121190"><a href="AlternativelySecuredPensions.htm">Alternativ ely Secured Pensions</a></li>
<li id="navli121192"><a href="FinalSalaryCalculator.htm">Final Salary Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121193"><a href="LifeAssurance.htm">Life Assurance
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121194"><a href="Wholeoflife.htm">Whole of life</a></li>
<li id="navli121195"><a href="TermAssurance.htm">Term Assurance</a></li>
<li id="navli121196"><a href="BusinessCover.htm">Business Cover</a></li>
<li id="navli121197"><a href="MortgageProtection.htm">Mortgage Protection</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121199"><a href="Investments.htm">Investments
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121200"><a href="RiskandRewrad.htm">Risk and Reward</a></li>
<li id="navli121201"><a href="UnitTrusts.htm">Unit Trusts</a></li>
<li id="navli121202"><a href="OEICs.htm">OEICs</a></li>
<li id="navli121203"><a href="InvestmentTrusts.htm">Investment Trusts</a></li>
<li id="navli121204"><a href="ISAs.htm">ISAs</a></li>
<li id="navli121205"><a href="SselectISA.htm">Self Select ISA</a></li>
<li id="navli121206"><a href="GovernmentGilts.htm">Government Gilts</a></li>
<li id="navli121207"><a href="CorporateBonds.htm">Corporate Bonds</a></li>
<li id="navli121210"><a href="SavingsCalculator.htm">Savings Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121211"><a href="Mortgages.htm">Mortgages
<!--[if IE 7]><!-->
</a>

<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li id="navli121212"><a href="CapitalInterest.htm">Capital &amp; Interest</a></li>
<li id="navli121213"><a href="InterestOnly.htm">Interest Only</a></li>
<li id="navli121214"><a href="Flexible.htm">Flexible</a></li>
<li id="navli121216"><a href="LifetimeMortgages.htm">Lifetime Mortgages</a></li>
<li id="navli121217"><a href="ReversionSchemes.htm">Reversion Schemes</a></li>
<li id="navli121225"><a href="MortgageCalculator.htm">Mortgage Calculator</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li id="navli121226"><a href="Corporate.htm">Corporate
<!--[if IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<div id="content">
<div id="contactdetails">
<ul>
<li>ABC</li>
<li>ccd road</li>
<li>xyz Town, pqr</li>
<li>xxx xxx</li>
<li class="tel">Tel: 888 8888 8888</li>
<li class="email">Email: <a href="mailto:[email protected]">[email protected]</a></li>
<li class="fax">Fax: 888 8888 8888</li>
</ul>
</div>
<div id="lists">
<div id="subsection">
<h2>Home </h2>
<ul>
<li> <a href="ContactUs0.htm" id="Subsections_rptSubsections__ctl0_a">Enquiries </a> </li>
<li> <a href="Search.htm" id="Subsections_rptSubsections__ctl1_a">Search</a> </li>
<li> <a href="TermsOfBusiness.htm" id="Subsections_rptSubsections__ctl2_a">Terms of Business</a> </li>
<li> <a href="PrivacyStatement.htm" id="Subsections_rptSubsections__ctl3_a">Privacy Statement</a> </li>
<li> <a href="FirmStatus.htm" id="Subsections_rptSubsections__ctl4_a">Firm Status</a> </li>
<li> <a href="MortgageFees.htm" id="Subsections_rptSubsections__ctl5_a">Mortgage Terms</a> </li>
</ul>
</div>

and now CSS code:

#navbar {
height: 24px;
top: 45px;
width: 900px;
position: absolute;
z-index: 100;
left: 0;
}

* html #navbar {
width: 900px;
w\idth: 900px;
}

#navbar ul {
padding: 0;
margin: 0;
list-style-type: none;
}

#navbar li {
float: left;
width: auto;
position: relative;
padding: 0 0 0 10px;
background: url(nav_li.png) left bottom no-repeat;
}

#navbar a, #navbar a:visited {
display: inline-block;
font-size: 1.2em;
text-decoration: none;
color: #666;
height: 24px;
margin: 0;
padding: 0 10px 0 0;
line-height: 24px;
background: url(nav_li.png) right bottom no-repeat;
}

* html #navbar a, * html #navbar a:visited {
width: auto;
w\idth: auto;
}

#navbar ul ul {
visibility: hidden;
position: absolute;
height: 0;
padding: 0 0 1px 0;
top: 24px;
left: -1px;
width: 149px;
border-bottom: 1px solid #254c8b;
}

* html #navbar ul ul {
top: 24px;
t\op: 24px;
}

#navbar table {
position: absolute;
top: 0;
left: 0;
border-collapse: collapse;
;
}

#navbar ul ul li, #navbar .active ul li{
background: #ececec!important;
padding: 0;
}

#navbar ul li.active{
background: url(nav_active.png) left bottom no-repeat;
}

#navbar ul li.active a{
background: url(nav_active.png) right bottom no-repeat;
color: #fff;
}

#navbar ul ul a, #navbar ul ul a:visited, #navbar li.active ul a, #navbar ul .active ul a{
font-weight: normal!important;
background: #ececec!important;
color: #254c8b;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #ddd;
display: block;
height: auto;
line-height: 20px;
padding: 0 10px 0 10px!important;
margin: 0 0 0 0;
width: 130px;
}

* html #navbar ul ul a, * html #navbar ul ul a:visited {
width: 150px;
width: 128px;
}

#navbar a:hover{
color: #333!important;
}

#navbar ul ul a:hover, #navbar ul a.active ul a:hover{
background-color: #ccc!important;
color: #fff!important;
text-decoration: none;
}

#navbar :hover > a, #navbar ul ul :hover > a {
color: #333!important;
}

#navbar ul li:hover ul,
#navbar ul a:hover ul {
visibility: visible;
}


CSS CODE FOR FLASH & IMAGE
#content{
margin: 0;
padding: 10px 0 0 0;
background: url(content_top.jpg) left top no-repeat;
/* background: url(content_org.jpg) left top no-repeat;
/* background-ulr: {banner2_top.swf) center no repeat;
load: swf; */
}

#inner-image {
margin-left:auto;
margin-right:auto;
padding: 0px 0 0 0;
vertical-align: middle;
width:80%;
/* background-ulr: {banner2_top.swf) center no repeat;
load: swf; */
z-index: 110;
}

could you please find me solution to this.

many thanks for your kind attention

om.

[Eye for Video]

For starters, give you Flash object a window mode.
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
If that doesn't cure the problem, then revisit the positioning css.
Best wishes,
EfV

[ontljoshi]

Hi , that thing did helped but after that the left part of the flash is not visible. It gets cut. I have tried changing and playing with all Like height, width, alignment, also tired the same things on <div>tag and tried in CSS too. no luck.

One morething i would like to know have you ever tried calling/loading SWF file using css.

is there any way to load it normally. I look forward to hearing from you. many thanks.

For starters, give you Flash object a window mode.
Window Mode (wmode) - What's It For?
There are three window modes.
Window
Opaque
Transparent
By default, the Flash Player gets its own hWnd in Windows. This means that the Flash movie actually exists in a display instance within Windows that lives above the core browser display window. So though it appears to be in the browser window, technically, it isn't. It is most efficient for Flash to draw this way and this is the fastest, most efficient rendering mode. However, it is drawing independently of the browser's HTML rendering surface. This is why this default mode (which is equivalent to wmode="window") doesn't allow proper compositing with DHTML layers. This is why your JavaScripted drop-down menus will drop behind your Flash movie.
In windowless modes (like opaque), Flash Player doesn't have a hWnd. This means that the browser tells the Flash Player when and where to draw onto the browser's own rendering surface. The Flash movie is no longer being rendered on a higher level if you will. It's right there in the page with the rest of the page elements. The Flash buffer is simply drawn into whatever rectangle the browser says, with any Flash stage space not occupied by objects receiving the movie's background color.
If that doesn't cure the problem, then revisit the positioning css.
Best wishes,
EfV

[Eye for Video]

What do you mean it gets cut off? By what? What are the dimensions of the .swf? What are the dimensions of the <div> that's holding the .swf? What is the 80% width in the Flash params for? Any change in width or height of the .swf will result in a proportionate change in width or height in order to maintain the same aspect ration as the original. So for example, you can make it narrower but it will also become shorter.
No I do not load swfs with CSS, instead I would recommend using swfobject:
http://code.google.com/p/swfobject/
Best of luck to ya!
EfV

[ontljoshi]

hi efv, i have tried but can't find any thing....i tried chaning width parameter but it did not affect anything so i tried after removing width it was the same thing i.e. no change in appearance. I have attached the image with this for better idea.

Also wants to know about effect wmode=opaque in firefox, as it did worked in IE but not in firefox. any other settings required. To get the same output as IE.

Looking forward to hearing from you. many thanks.

[Eye for Video]

From the code posted above, I was not able to reproduce the problem. The Flash displayed just fine. To get the Flash to display the same in IE and FF, you need to add the window mode to both the <object> and the <embed>

<param name="wmode" value="transparent"/>

and

wmode="transparent"

to the <embed>
Looking at the attached screen shot of the page, I can see part seems to be cut off but I also noticed the scroll bar at the bottom of the page. Apparently part of the page is sticking way out to the right of the rest of the content. I would suggest that you work with just a section of the page to fix first the Flash and then the width issue.
Start with a blank page and just put in your wrapper the navigation and an empty <div> the size of the Flash, but without the Flash content. Give it a background color so you can see what it's doing. Get that section working before adding any other content.
For more help, post a link to the page, it seems that the code posted above must have the bottom cut off, because there are several <div> that are not closed.
Best wishes,
EfV