vb.org Archive

vb.org Archive (https://vborg.vbsupport.ru/index.php)
-   vB4 Design and Graphics Discussions (https://vborg.vbsupport.ru/forumdisplay.php?f=253)
-   -   How do I get an image to show over the entire page? (https://vborg.vbsupport.ru/showthread.php?t=302045)

pityocamptes 09-09-2013 02:42 AM
How do I get an image to show over the entire page?
 
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 09-10-2013 10:06 AM
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 09-10-2013 10:38 AM
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:

Code:
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 09-11-2013 04:58 PM
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 09-12-2013 04:14 AM
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 09-12-2013 03:05 PM
Quote:
Originally Posted by CAG CheechDogg (Post 2445038)
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 09-12-2013 10:41 PM
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 09-13-2013 03:56 PM
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 09-13-2013 04:37 PM
Quote:
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 09-14-2013 01:14 AM
I believe this should do the work:

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

tbworld 09-14-2013 02:40 AM
Quote:
Originally Posted by pityocamptes (Post 2445372)
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.
As soon as I get a chance I will send it your way, or post it. My daughter is leaving for college in a few days, so I am extra busy.

pityocamptes 09-14-2013 03:23 AM
Quote:
Originally Posted by fxdigi-cash (Post 2445469)
I believe this should do the work:

PHP Code:
http://css-tricks.com/3458-perfect-full-page-background-image/ 
demo
I tried the ms filter code from that site and it started showing double pics...

fxdigi-cash 09-14-2013 03:51 AM
Quote:
Originally Posted by pityocamptes (Post 2445496)
I tried the ms filter code from that site and it started showing double pics...
ok, never mind. here is a better example and I myself tested it on all ie browsers, ie7,8,9,10

tut:

PHP Code:
http://paulmason.name/item/full-screen-background-image-pure-css-code 
demo:
http://paulmason.name/media/demos/fu...kground-image/

pityocamptes 09-14-2013 04:41 AM
Thanks I will try that. Any idea how to shrink a png file smaller? I tried a different image and I was able to compress it to 2 megs which I think is still too big... I need the transparency...

fxdigi-cash 09-14-2013 08:28 AM
Quote:
Originally Posted by pityocamptes (Post 2445505)
Thanks I will try that. Any idea how to shrink a png file smaller? I tried a different image and I was able to compress it to 2 megs which I think is still too big... I need the transparency...
here you are: http://compresspng.com/

if you have original source .psd, then you can reduce the size foor sure, but for now if you don't then use the link above to make the size as small as possible.

Good luck

John Lester 09-14-2013 05:07 PM
Quote:
Originally Posted by pityocamptes (Post 2445505)
Thanks I will try that. Any idea how to shrink a png file smaller? I tried a different image and I was able to compress it to 2 megs which I think is still too big... I need the transparency...
I use this alot http://pnggauntlet.com/

pityocamptes 09-15-2013 02:17 AM
Thanks. I have been using that. The smallest I can get the image down in a png is 1.6m is that going to be an issue? Thanks for the input...

John Lester 09-15-2013 04:29 PM
Quote:
Originally Posted by pityocamptes (Post 2445693)
Thanks. I have been using that. The smallest I can get the image down in a png is 1.6m is that going to be an issue? Thanks for the input...
Naw I don't think 1.6M is going to a big issue.

pityocamptes 09-16-2013 03:33 AM
Quote:
Originally Posted by John Lester (Post 2445807)
Naw I don't think 1.6M is going to a big issue.
Thanks. At what point or size do you feel it does become an issue? Thinking of a few other images, but they are larger... as in around 10 megs...

pityocamptes 09-18-2013 05:31 PM
I see that someone developed a JS for multiple backgrounds, including crappy IE (deprecated versions)... I have a custom template, but I assume the same as the vanilla version that came with VB. Anyways, can I add the JS through the admincp? If not, which files would be the most appropriate? Thanks again!

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

I see that someone developed a JS for multiple backgrounds, including crappy IE (deprecated versions)... I have a custom template, but I assume the same as the vanilla version that came with VB. Anyways, can I add the JS through the admincp? If not, which files would be the most appropriate? Thanks again!

EDIT: found this to supercede the JS, thoughts on how to implement it, and which files? Thanks!

https://github.com/louisremi/background-size-polyfill

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

Not sure how to change the htc file to show my background image... help...

John Lester 09-21-2013 04:32 PM
Quote:
Originally Posted by pityocamptes (Post 2445897)
Thanks. At what point or size do you feel it does become an issue? Thinking of a few other images, but they are larger... as in around 10 megs...
Hmmm good question, none of my images are larger than 1.5M and that's the size I aim for when I have to resize a large image. 2M might be alright for the majority of users, but there are still lots of people using dial up and IE 6-8 :(

Have no answer for your latest question as I pretty much ignore issues that IE 6-8 has with my site :D

pityocamptes 09-23-2013 01:19 AM
Well I have come to the conclusion to F@ck IE 7 and IE 8!!!!! ...and trying to wrap my forum around these users... What a waste of my time...

Should have listened to the advice given here...

CAG CheechDogg 09-23-2013 04:20 AM
Ok, so what exactly is the problem ... I might be able to help

pityocamptes 09-24-2013 12:52 AM
Quote:
Originally Posted by CAG CheechDogg (Post 2447397)
Ok, so what exactly is the problem ... I might be able to help
Ok, will give it a shot. I got a custom template, but would like to add an additional image to the background. Works perfect in all other browsers, and IE9 and greater. I was trying to configure it to work with IE7 and IE8 but it seems multiple background images are not supported, and to get anything to work requires hacking the hell out of it.

CAG CheechDogg 09-25-2013 11:38 AM
Ok My Man, I think I have the perfect solution for you to add the 2nd background to your site using a png image.

This script here I use it for a vote pop up on my site, but I just changed it a bit and it actually adds a background to the whole page using a 1x1 png image but you can use a full size image as well if its a png one.

You are going to want to add this to your "header" template at the very top before anything else.

Replace the transa.png file with what ever your image's file name is. Remember, this image has to be a png file which is what you want, so you should have no problems here.

Replace the url of the trans.png's with where your file is located at and you should be good to go My Man !

Remember, this is a pop up I use for a vote feature on mysite, so you might have to play with it a little but it should work just like I posted it for you.

GOOD LUCK !

Code:
<!-- Vote Popup -->
<div id="bgbtm">
<script type="text/javascript">// <![CDATA[
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating te use of another browser).
{
  var rv = -1; // Return value assumes failure.
  if (navigator.appName == 'Microsoft Internet Explorer')
  {
    var ua = navigator.userAgent;
    var re  = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
    if (re.exec(ua) != null)
      rv = parseFloat( RegExp.$1 );
  }
  return rv;
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function createCookie(name,value,min) {
    if (min) {
        var date = new Date();
        date.setTime(date.getTime()+(min*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}


window.onload = function vote_popup() {

    var ver = getInternetExplorerVersion();
    if(navigator.appName == 'Microsoft Internet Explorer' && ver < 7.0)
    {
    return;
    }

    sgvote6 = readCookie('sgvote6');

    if (sgvote6 == null) {
        document.getElementById('vote_popup').style.display = "block";
    }

}

function hide_vote_popup() {
    createCookie('sgvote6','yes','1440');
    document.getElementById('vote_popup').style.display = "none";
    document.getElementById('vote_popup').innerHTML = "";
        alert("NO NEED FOR THIS LINE");
};
function hide_voted_popup() {
    createCookie('sgvote6','yes','1440');
    document.getElementById('vote_popup').style.display = "none";
    document.getElementById('vote_popup').innerHTML = "";
        alert("NO NEED FOR THIS LINE");
};
// ]]></script>
<div id="vote_popup" style="background: transparent url(http://www.YOURDOMAIN.com/transa.png) repeat scroll 0% 0%; width: 100%; height: 100%; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; color: #f0f0f0; font-size: 9px; text-align: center; z-index: -1; display: none;">
<div style="margin-top: 300px; width: 798px; margin-left: auto; margin-right: auto; display: block;"><span style="color: white; font-size: medium;"> </span> <span style="color: white; font-size: large;"><strong>NO NEED FOR THIS LINE</strong> </span> <br /> <br />
<p><a href="http://www.ADD-A-DOMAIN-TO-MAKE-THIS-CLICKABLE.com/PAT/TO/LINK" target="_new" onclick="hide_voted_popup();"> <img src="http://www.DOMAIN-OF-CLICKABLE-IMAGE-IF-YOU-WANT=INE.com/PATH/TO-IMAGE/IMAGE-FILE-NAME.PNG-OR-JPG" border="0" title="TITLE IF YOU WANT ONE" width="728" height="90" style="border-color:" /> </a><br /> <br /><span onclick="hide_vote_popup();"> <span style="cursor: pointer; font-family: Tahoma; font-size: medium;"> <span style="font-size: medium;">IF YOU USE THIS TO SEND YOUR GUEST TO A ANOTHER PAGE YOU CAN GIVE THEM A SMALL THANK YOU OR FURTHER INSTRUCTIONS HERE</span> </span> </span></p>
</div>
</div>
</div>

pityocamptes 09-26-2013 06:53 PM
Hey, thanks! Will give it a try!

CAG CheechDogg 09-28-2013 01:46 AM
No problem, hope it works out for you buddy...let me know if it works and if it doesn't let me know anyways and I will help you out with making it work....


All times are GMT. The time now is 11:07 PM.

Powered by vBulletin® Version 3.8.12 by vBS
Copyright ©2000 - 2025, vBulletin Solutions Inc.

X vBulletin 3.8.12 by vBS Debug Information
  • Page Generation 0.01208 seconds
  • Memory Usage 1,840KB
  • Queries Executed 10 (?)
More Information
Template Usage:
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_header_end
  • (1)ad_header_logo
  • (1)ad_navbar_below
  • (2)bbcode_code_printable
  • (3)bbcode_php_printable
  • (11)bbcode_quote_printable
  • (1)footer
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (6)option
  • (1)post_thanks_navbar_search
  • (1)printthread
  • (27)printthreadbit
  • (1)spacer_close
  • (1)spacer_open 
Phrase Groups Available:
  • global
  • postbit
  • showthread
Included Files:
  • ./printthread.php
  • ./global.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/class_hook.php
  • ./includes/modsystem_functions.php
  • ./includes/class_bbcode_alt.php
  • ./includes/class_bbcode.php
  • ./includes/functions_bigthree.php 
Hooks Called:
  • init_startup
  • init_startup_session_setup_start
  • init_startup_session_setup_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • style_fetch
  • cache_templates
  • global_start
  • parse_templates
  • global_setup_complete
  • printthread_start
  • bbcode_fetch_tags
  • bbcode_create
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • printthread_post
  • printthread_complete