Change Post background According to Group

First topic message reminder :

You know how there is a way to change the background IMG of the post according to if your female or male. . . is there a way we can do this but according to group..

Like Group FireDragon - will have a fire picture for their post background
Group IceDragon - will have  a ice picture for their post background
 

etc.. etc..

possible?

They both do the same thing.... but im not sure if I like it or not, I might acualy use this option if they want it full or scrolling like this LOL

but I still would like to the other one   fixed in all browsers...what angi had gave me fixed it on my screen but screwd it up on other browrsers...

{
min-height:100%;
min-width:100%
background-repeat: no-repeat;
}

haha I like this one too but it just makes the big picture follow ...

I added it in css like this just  incase I might have put it in wrong
 .spyro-background{
  background: url(https://i.servimg.com/u/f39/16/87/57/90/lunapi11.gif) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: auto;
    min-height:100%;
min-width:100%;
background-repeat: no-repeat;
}
 


but yea that just makes it follow. which I like...I haven't tried a small picture with it  yet

and its still screwd up on other browsers like chrome.. 
on chrome the picture repeats itself

.spyro-background{
  background: url(https://i.servimg.com/u/f39/16/87/57/90/lunapi11.gif);
  background-size: 100% 100%;
    min-height:100%;
min-width:100%;
background-repeat: no-repeat;
}

Now it looks like this

ok last try then i give up

Code:

.spyro-background {


background:url(http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif);


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(


 ï¿½ � � �src='http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif',


 ï¿½ � � �sizingMethod='scale');


-webkit-background-size: cover;


-moz-background-size: cover;


-o-background-size: cover;


background-size: cover;


background-position: left top;


background-repeat: no-repeat;


}

Please when you post code use tbe code tags.

sorry i don't mean to sometimes i just forget

That one made it look like this


if theres no way to fix it on all browsers .. IE, chrome, firefox... Is there a way to force people to use IE before loading into the site?

yea but you will loose almost all of your members..  no one uses IE anymore its outdated and old news

well can you find a way to fix it on all browsers... u fixed it on IE but it looks messed up on chrome..and when u fix it on chrome its messed up on IE...thers no way to fix it on all browsers?


And maybe everyone that visits ur site uses  chrome but most people who visit mine use IE according to google anyltics




I would still like it to look the same on all browsers...

Bump

well you can edit your overall_ header template and add somthing like this above </head>

Code:

<!--[if IE]>
    <style>
place the css you want to use for IE here
</style>
<![endif]-->

so wut code works with chrome and the rest?

your regular css should work on the others find the css that works on all the other browsers other then IE and use it in your regular css

then for IE use the css that works for it in the code i mentioned above

where did i go wrong?


If theres no way to fix it, tell me how to make it to where a popup will say something like " for best experience use IE  " and have them click on it and the site open  in a new tab in IE

Bump

Bump

Remove the current CSS and scripts, and try using this :

Code:

$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent;
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/)) $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
})

It's the same, however, the bg css will be automatically generated. Since IE has a tiling problem with rows and cells, the IE sheet excludes resizing and position of the background image.

Now its messed up on Chrome..but fixed on IE

Okay, try this :

Code:

$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent, td = 'td';
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.match(/Chrome/)) td = 'td:last-child';
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
});

Chrome is a lot more iffy with this method, so we're only going to make the postbody have the background image for it.

Its still fixed on IE  , but on Chrome it stll Repeats itself..

See if this fixed it :

Code:

$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent, td = 'td', gc = '';
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.match(/Chrome/)) td = 'td:last-child', gc = '.post'+classname+' > td:first-child{background:#000 !important}';
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }'+gc+'.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
});

still jacked on chrome.. Maybe its because im looking at the site on chrome via Mobile?

I forgot a decimal on one of the rules for chrome.  

Try now :

Code:

$(function() {
  customBg('Spyro ▀█▀ Dragon', 'spyro-background', 'http://i39.servimg.com/u/f39/16/87/57/90/lunapi11.gif');
  customBg('ᴛᴡɪʟɪ ▀█▀ ᴅʀᴀɢᴏɴ', 'twili-background', 'image_here');
 
 
  function customBg(name, classname, image) {
    var ua = window.navigator.userAgent, td = 'td', gc = '';
    $('.post:has(.name:contains('+name+'))').addClass(classname);
    if (ua.match(/Chrome/)) td = 'td:last-child', gc = '.post.'+classname+' > td:first-child{background:#000 !important}';
    if (ua.indexOf('MSIE ') > 0 || ua.match(/Trident/) || ua.match(/Chrome/)) $('head').append('<style type="text/css">.post.'+classname+' > '+td+' { background:none }'+gc+'.post.'+classname+' {background: url('+image+') no-repeat transparent }</style>');
    else $('head').append('<style type="text/css">.post.'+classname+' td { background:none }.post.'+classname+' {background: url('+image+') no-repeat center center / 100% 100% transparent }</style>');
  }
});

Now it doesn't even show up on either of them

I checked your forum and it looks like there's a period at the end of your script. Remove that and try again.

Where the heck did that period come from.. and finally solved..

Imma change my signature to
- Is there Anything that Ange Tuteur doesn't know?

Thanks Ange tuteur for saving my life yet again..



Wait I just realized something..  on IE its streached out.. on Chrome its different ..acualy that's fine..but on IE theres this annoying Black line how to remove it?

You're welcome

That line comes from the tables border spacing. Try adding this to your stylesheet :

Code:

.forumline { border-spacing:0 }