How do I get an image to show over the entire page?

[pityocamptes]

I have an image that I have changed the opacity on that I would like to have appear over the site - sort of like a ghosted image. What would be the best way to do this, how do I get the image to always fill the screen no matter resolution or forum index length, etc? Detailed instructions would be greatly appreciated.

Actually, what I would also like to try, and perhaps instructions could be offered for that as well, would be to make the image static, so that the forum/index scrolls, but the image does not move with the rest of the forum... thanks again.

--------------- Added [DATE]1378783397[/DATE] at [TIME]1378783397[/TIME] ---------------

BUMP

Basically I have a custom template that I bought. I like the colors and I want to keep them, but I want to "ghost" an image over it... how? Thanks...

[RickyH]

Do you mean like in the background? if you're talking about foreground, you wouldn't be able to do it since you wouldn't be able to click the links behind it..

[CAG CheechDogg]

To make your background not scroll with your forum index do the following:

Styles and Templates > Style Manager

Choose your theme/style and click on Go

In the input box at the top it will say "search stylevar", in there look for "doc_background"

Once you are in there add the following:

At the very end of your background's url add "fixed" , minus the double quotes.

It should look like this:

url(http://www.yourdomain.com/path-to-your-background-image/image.jpg) fixed

the image type could also be image.png, image.gif, what ever it is that your background image is.

You shouldn't have to change anything except just adding "fixed" to the end of the url.

Then make sure you have

Background Repeat set to "repeat-y"

Units set to "% "

Background Image Horizontal Offset set to "50"

Background Image Vertical Offset set to "0"

[pityocamptes]

Ok, thanks. That worked. Went into additional.css file in Admin. However, I have noticed that it renders correctly in all browsers except for IE. It seems to not be full width of screen. How would I fix this issue? Thanks!

Seems that this might be an IE8 issue... how to fix to cover those users using IE8?

[CAG CheechDogg]

Hmmmm...weird...it works for me on IE...did you clear your cookies and cache?

Try that and let me know what happens...Do you have a link I can check your site out?

[pityocamptes]

Originally Posted by CAG CheechDogg

Hmmmm...weird...it works for me on IE...did you clear your cookies and cache?

Try that and let me know what happens...Do you have a link I can check your site out?

Thanks again! I narrowed it down to this: The image was around 1200 X 800 (rough guess...) it renders fine on my laptop, but when I go to a larger desktop monitor it centers the image (like it should) but the image does not stretch to fill the monitor.

I ended up increasing the image size with gimp and photoshop, but now the png is massive ~10 megs. It now fills the entire screen on both, but I believe that this is way to massive, though it is relatively quick on my high speed internet, just thinking of those that may not have this... I used pngcrush, but it only shrunk the png (transparent background) by 3%. Any ideas? The original image was like 1240x800 (?) but since the larger desktop monitor has a higher resolution the smaller png image was not filling the background, so I had to double the pixel size on the original which took it from around 1 meg to 10 megs... help...

[tbworld]

I stopped supporting IE8 and IE7 this year and now I just degrade new areas of the board graciously.

The way to handle IE8 is to have a different solution then modern browsers. A simple but effective way is just to use IE conditional comments in HTML. Then you can supply a different formatted graphic for IE8 and have different CSS. Just Google the term.

I would just pass you my code, but we use 'LESS' for our highly modified CSS. Would really just confuse you. If you decide to go with 'IE conditional comments in HTML' and have a problem, post your code, and give me a yell.

I remember fooling around with the images and I believe we supported 1900x1200 wallpaper, our image size was 140-190k (depending on the detail). This took quite a bit of work in Photoshop to get the bitrate -- for lack of a better word -- correct. Forget about that 10meg image, your users will end up hating it. Turn off your cache on your browser and you will find out. Hope any of this helps!

PS: You will not find a simple CSS solution to handle full background images effectively for older IE browsers. <-- Trying to save you some time. .

[pityocamptes]

Thanks. I thought about the html ie override to ie only css file, but too much work. So basically pass on ie deprecated browsers and assume users are using ie9 which should render correctly?

--------------- Added [DATE]1379091457[/DATE] at [TIME]1379091457[/TIME] ---------------

Thanks on the wallpaper size... yea, need to figure out a way to get a smaller image size...

--------------- Added [DATE]1379092191[/DATE] at [TIME]1379092191[/TIME] ---------------

Actually, if you could post it here or pm me what you did for ie8 in your html and relevant css file I would appreciate it... was looking online and I still see that ie8 is used by 10% of the global users... opinions, thoughts on setting up forum for ie8 users? Thanks.

[nerbert]

Originally Posted by tbworld

I stopped supporting IE8 and IE7 this year and now I just degrade new areas of the board graciously.

The Coders disdain to conceal their views and aims. They openly declare that their ends can be attained only by the forcible overthrow of Internet Explorer. Let Microsoft tremble at a Coders' revolution. The programmers have nothing to lose but their JS conditionals. They have a World Wide Web to gain.

Coders of the World, Unite!

[fxdigi-cash]

I believe this should do the work:

PHP Code:

http://css-tricks.com/3458-perfect-full-page-background-image/ 


demo