Page 1 of 2 12 LastLast
Results 1 to 15 of 18

Thread: Using swf as CSS background.

  1. #1
    180
    posts
    Registered User

    Using swf as CSS background.

    Hey All.

    I'm tying to build a site that has a flash background, but html/css as the 'foreground'/content.. I have no problem with the flash part of it - it's done, that's why I'm posting it here.

    In my elated state over this crazy idea (in my head at least!) I simply thought I could add the swf instead of an image in the CSS body tag.

    Code:
    body {
    background-image:url(background.swf);
    }
    (This is just an example)

    Right, well... As you probably know, it didn't work...
    Adding the whole <object id-thing> that flash publishes in the html file, didnt help either..

    And I'm beginning to wonder, if it's even possible. IS there any way to load a Flash swf file as your background in a CSS style sheet?

    If there were, I guess more people would be doing it??

    Thanks guys, I really hope you can help me with this.
    Stig

  2. #2
    definitely not with css.

    You could just set it in a div below everything though

  3. #3
    180
    posts
    Registered User
    Hey darkmotion.

    Thanks - yeah, after researching a bit - and remembering stuff I'd already learned once :-D - I figured it out.

    I was simply too eager. So sorry for posting this obsolete thread.
    Maybe a mod can delete it??

    Thanks!
    Stig

  4. #4
    180
    posts
    Registered User
    Well I mights aswell post the code, so that anyone who has the same problem will be able to use it:

    In the HTML, the published swf is in it's own div tag, called background.

    (Make sure to put the .js script published with the swf there aswell - except for the two lines in the <HEAD> section. They should remain where they are. - This only applies if you're using Flash CS3 - Flash 8 doesn't publish a .js script with the movie, if I remember correctly.)

    And I have some other content in another div tag, named menu. This is supposed to go on top of the flash movie. (Which is full screen btw).

    And the CSS:
    Code:
    #background {
    z-index: 1;
    position:absolute;
    width: 100%;
    height: 100%;
    }
    #menu {
        z-index: 2;
        position:absolute;
        background-color:#111111;
        width: 150px;
        height: 400px;
        float:left;
        top: 100px;
        left: 20px;
    }
    There you have it. Hope someone can use it!

    /* edit:
    Another thing to note is the wmode parameter of the flash swf. For me, it works best with the wmode set to "transparent".
    Last edited by StigC; October 13th, 2007 at 07:41 AM.

  5. #5
    I found that useful!

  6. #6
    180
    posts
    Registered User
    Cool! Thanks!

  7. #7
    Hello,

    Where can I see this working? I'd like to have a full screen swf files for a background with dynamic content over to the top too...

    D

  8. #8
    good idea, that'll come in handy.

  9. #9
    I am facing the same problem and used the above code but it did not work in IE 7.0 or Higher. I have used this script and its working fine. Website Design and Development

  10. #10
    HTML Code:
    <div id="mycontent" style="width:100px;height:100px;position:absolute;left:0px;top:0px;z-index:2;">
    Lorem ipsum dolor sit amet
    </div>
     
    <div id="mybg" style="position:absolute;left:0px;top:0px;z-index:1;">
      <object width="100" height="100">
        <param name="movie" value="some.swf" />
        <embed width="100" height="100" src="some.swf" type="application/x-shockwave-flash" />
      </object>
    </div>
    AS2 / AS3 / JS / JQUERY / (X)HTML / HTML5 / CSS / CSS3 / PHP

  11. #11

    SWF as a background

    Hello -

    I'm also trying to achieve the same thing.. The DIV over DIV idea is great, but I am trying to get the background SWF to stay stationary (like a background Image would work) But when the content of the upper DIV gets too long.. once you scroll the webpage down, the lower DIV moves up and out of sight.

    Is there a way to achieve this so that the lower DIV is always visible an the upper DIV scrolls over it?

    Thanks so much for the help
    B

  12. #12
    I've checked out other forums (I'm not sure if I am allowed to link them all in a post). Unfortunately, the HTML and CSS were build way before Flash appeared. The site may list the .SWF file as an object, but probably not as a background.

    Of course I can be wrong. But I've tried several ways and I can't help you with this.
    Emedara Studio Truly Professional Web Design Services
    █ We are the best guys to hire when you need a website.
    ⌊ Get a free price quote here.

  13. #13
    Quote Originally Posted by hedjunta View Post
    Hello -

    I'm also trying to achieve the same thing.. The DIV over DIV idea is great, but I am trying to get the background SWF to stay stationary (like a background Image would work) But when the content of the upper DIV gets too long.. once you scroll the webpage down, the lower DIV moves up and out of sight.

    Is there a way to achieve this so that the lower DIV is always visible an the upper DIV scrolls over it?

    Thanks so much for the help
    B
    Try changing your background DIV's CSS to position: fixed; instead of position: absolute; and see if that works!
    - redelite -

    Harry: "Yeah, she stopped me in the lobby, and explained what was up. Then they slapped this bulletproof vest on me and gave me a gun!"
    Lloyd: "But what if he'd shot ya in the face...?"

  14. #14
    i just got this working here: www.brokenbeat.ca

  15. #15

Page 1 of 2 12 LastLast

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012