Background image

[shlagish]

1.

How can I apply a filter on a background image?
filter:
<div style="filter:alpha(Opacity=20)">
<img src="landscape.jpg" width="160" height="120" />
</div>


2.

How can I size the picture if it's as a backgroud?


3.

If I want the background to be "img.gif", but there are frames. How can I make thoses frames backgrounds be 'transparent' so I can see "img.gif" as a background for what you see completely.

[Arctic Fox]

1). To apply the Filter attribute, you'll need to assign width in the STYLE tag:

<div style="filter:alpha(Opacity=20); width:160px;">
<img src="landscape.jpg" width="160" height="120" />
</div>


2). I don't understand this question.

3). You'll have to use something like iFrames (IE) and will probably want to adjust the image in each iFrame to match up with the original background.
(see my site, "17 Seconds (http://angelfire.com/alt/arctic/)" or "Quíet Storm's site (http://angelfire.com/mo2/cbch21/) for an example)


:thumbsup:

[shlagish]

1) That doesn't help me, How can I use a filter on an image if that image is set as background-image?

::: Do you think it would work if I apply the filter to the body element and set it's z-index to -1. Or would the text also be "filtered"?:::



2) The original image is about 100*100, I want it to fill up the screen!
normally, I would use: width="x" height="y" but this time, the image is set to background-image. So I can't, do you understand now?

3) I am using i-frames, isn't there a way to set the background color of a dosument to: transparent? I don't know how to do what your doing on your websites

[Arctic Fox]

LOL!

1). Set as background-image in a body style - I don't think it's possible. You could se the image in its own DIV (what I thought you were doing), and, yes, set the z-index to -1.

2). Again, maybe it would be better not to use background-image in the body style, but use the image in its own DIV. Could this help you in some way?: BGstrech.html (http://www.angelfire.com/mo2/cbch21/TEST/BGstrech.html)

3). You can make the iFrames transparent:
<iframe style="width:300px; filter:alpha(opacity=25);"></iframe>

I think I confused myself, again. :D Does that help any? :(

[pardicity3]

1. AFAIK you can apply the alpha filter to the body, but that would in turn filter everything in the body as well (like you said). I don't think there is a way to do it other than the way Arctic fox told you using the <div>'s and all. Just for reference, you can check out the filters over at microsofts msdn site (http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/filters/alpha.asp)

2. This question seems to be getting asked a lot lately. Here are a few threads where it has been discussed:

http://www.codingforums.com/showthread.php?s=&threadid=11549&highlight=Stretching+a+Background+Image
http://www.codingforums.com/showthread.php?s=&threadid=20731

[shlagish]

Thanks guys, I'll try to figure out something from what you gave me :thumbsup:

[shlagish]

It doesn't work :(:(:(:(

I can make the image ajust with the window size (Although it's not cross-browser, woul this be possible?)

Using this (see up) thechnic, I can also filter the image that serves as background :)

So that's good (except for the cross-browser thing..)

But no, I can't make an iframe transparent, either it makes everything transparent or nothing, it can't only render the background as transparent and keep the text (and images)

I've also tried the css attribute : background-color: transparent on the iframe AND on the page that goes INSIDE the iframe AND on both to no result :(:(:(

Help?

[shlagish]

Arctic Fox, I know this is an old thread, but I thought I should tell you.

I am going to use something similar to your bgstrech.html technique.

This is a file called BG.js

imSRC = "../sm_cover2.jpg";
function makeIm() {

imStr = '<div style="position: absolute; top: 0px; right: 0px; z-index: -1; width: 131.481481481481481481481472%; height: 100%;" width="100%" height="100%"><img src="'+imSRC+'" style="width: 100%; height: 100%;" width="100%" height="100%" /></div>';
document.write(imStr);

}

this is a page called main.html

<html>
<head>
<script src="../BG.js">
</script>
</head>
<body>
<script type="text/javascript">
<!--
makeIm();
-->
</script>
</body>
</html>


Isn't your way a little complex and long for nothing :D?
Also, do you mind me using this?
And are there any problems with my scripts that I have overlooked?

Thanks :)

[Arctic Fox]

Wow! That's a lot better looking code than mine! :thumbsup:

The original code that I have was given to me by a friend over 7 years ago, so it's a bit old. I guess she didn't have the math experience that you've created for the new code. Awesome!

I don't mind if you use it! It is your code (even though redesigned). Personally, I would like to see it distributed for free; no copyrights, etc. ;)

Doesn't work for me on NS6.2, like that matters for me, but someone will point that out - just thought I'd get it out of the way. :D

Great improvment, shlagish! Care if I hold a copy of this?

[shlagish]

Hello,
Of course you can have it, use it, destroy it, eat it, whatever
I wasn't planning on making it copyrighted or anything.

If you want, I'll post the website in this post once it's up (a few days I think)

Do you know why it doesn't work on that browser?
What's wrong?
I would indeed enjoy it to be cross browser as much as possible

[Arctic Fox]

Originally posted by shlagish
Hello,
Of course you can have it, use it, destroy it, eat it, whatever
I wasn't planning on making it copyrighted or anything.

If you want, I'll post the website in this post once it's up (a few days I think)

Do you know why it doesn't work on that browser?
What's wrong?
I would indeed enjoy it to be cross browser as much as possible

Yeah, I'd like to see your new site. :)

I've no idea why it doesn't work in NS... sorry. Someone here gould probably recode it cross browser.