# embed flash as background in external style sheet?



## ksmith316 (Nov 3, 2005)

I have been looking for a way to embed a flash object as a background for the header of my site directly into the external css style sheet.

i currently use an animated gif image "header.gif" and need to replace it with "header.swf".

Here is the css header section:

#header { 
margin: 0px; 
padding: 0px 0 0 0px; 
background-color: inherit;
background-image: url(header.gif);
background-repeat: no-repeat; 
height: 310px; 
color: #ffffff;
font-weight: bold;
font-size: 0px;
}


Any ideas of a way to do this using valid markup?


----------



## namenotfound (Apr 30, 2005)

Well Flash is an "object" and there isn't currently a "background-object" in CSS, so I'm going to take a guess and say it's not possible.

However, I could be wrong


----------



## ksmith316 (Nov 3, 2005)

how about just objects? rather than background objects, is that possible?

cheers for the reply!


----------



## namenotfound (Apr 30, 2005)

You mean in the foreground, as opposed to the background?


----------



## Eriksrocks (Aug 7, 2005)

Is the point here to have it referenced in one central location (the stylesheet) so that if you want to change it to new.swf you wouldn't have to change every page?

If so, it would be best to just convert your pages to PHP and use PHP includes to just include the header. Otherwise, technically it is possible with CSS, although I'm not sure how many browsers support this:

http://www.westciv.com/style_master/academy/css_tutorial/advanced/generated_content.html


----------



## ksmith316 (Nov 3, 2005)

the idea of php headers is a good one, but the main aim of this is to have linkable style sheets that change the whole look and feel of the site with one click(when i eventually get round to creating new designs!).

so presuming the link you have provided me will work in the top 2(FF and IE), is this how i would go about inputing the code into the css:

#header {
before: {content: "

"}
margin: 0px;
padding: 0px 0 0 0px;
height: 310px;
color: #ffffff;
font-weight: bold;
font-size: 0px;
}

Am I far off the mark? lol

EDIT: Looks like I'm WELL OFF the mark!


----------



## Eriksrocks (Aug 7, 2005)

> the main aim of this is to have linkable style sheets that change the whole look and feel of the site with one click


Yeah I know, when you design it right it's pretty sweet. You can change the whole style just by swapping stylesheets. 

Well anyway the code wouldn't work because you've got a quote within the quotes (" within the " " ). And the before: element isn't in the right place.

Try this:


```
#header:before {
content: "";
margin: 0px;
padding: 0px 0 0 0px;
height: 310px;
color: #ffffff;
font-weight: bold;
font-size: 0px;
}
```
I think that's correctly formatted but I'm not sure if it will work because I'm not sure if FF supports it. (And unfortunately I'm guessing that IE doesn't.)

If it doesn't work or there isn't that much support for it, your best bet would still be to use headers. You could do something like:


```
include( "header.html" );
```
And then in header.html you could have something like:


```
[IMG]image.jpg[/IMG]
```
OR 

```

```
So you would only have to change two files instead of one.  (The headers and the stylesheet.)


----------



## ferrija1 (Apr 11, 2006)

...Or you could save the fla (if you have it) as a GIF and put it in the background.


----------



## ferrija1 (Apr 11, 2006)

Eriksrocks said:


> Yeah I know, when you design it right it's pretty sweet. You can change the whole style just by swapping stylesheets.
> 
> Well anyway the code wouldn't work because you've got a quote within the quotes (" within the " " ). And the before: element isn't in the right place.
> 
> ...


I don't think either of those will work.


----------



## Eriksrocks (Aug 7, 2005)

Well the first one maybe not p) but the second one would definitely work.


----------



## Eriksrocks (Aug 7, 2005)

ferrija1 said:


> ...Or you could save the fla (if you have it) as a GIF and put it in the background.


True but it wouldn't have the same quality or interactivity. (e.g if it was a navigation menu that wouldn't work. )


----------



## ferrija1 (Apr 11, 2006)

Eriksrocks said:


> True but it wouldn't have the same quality or interactivity. (e.g if it was a navigation menu that wouldn't work. )


If it was a menu, why would it be in the background?


----------



## Eriksrocks (Aug 7, 2005)

???

 

Yeah I would convert it to a GIF but you will lose quality.


----------



## ferrija1 (Apr 11, 2006)

Not that much, and it is the background, not the content.


----------

