Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 Various Background Images on CSS
#
So much like a regular refresh banner thing on a Wrapper sheet, what would be the equivalent for a CSS?

I currently got a skin that would be epic to have a new background after each refresh, that way it stays fresh and not repetitive on the same ole background. But sadly, the background image is located in CSS. Any chance we can get a CSS model of the refresh banners?

http://riseofthewitchersrpg.jcink.net/
PM
#
Hopefully THIS helps you. Bear in mind that this also uses js, but it works!
#
Me not being a CSS expert, could you dumb that down a bit so I can get a beter understanding like what parts of the CSS do I need to put into the skin to have multiple backgrounds?
PM
#
HERE is the fiddle for it (: It organizes it in parts, if that helps? If you need more explanation, just lmk.
#
Nay still cant' figure it out.

Here is the background stylesheet code on my skin

body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #222; margin:0px;
padding:0px;
background: url(https://cdnw.nickpic.host/oQsbIm.png) fixed;
background-size: cover;
text-align:center;
}
PM
#
add this to your wrapper preferably in your header and add however many images you want:

CODE
<script>
$(document).ready(function(){
   var classCycle=['imageCycle1','imageCycle2'];

   var randomNumber = Math.floor(Math.random() * classCycle.length);
   var classToAdd = classCycle[randomNumber];
   
   $('body').addClass(classToAdd);

});
</script>


this should be your body:

CODE
body {
font-family: Arial, sans-serif;
font-size: 12px;
color: #222; margin:0px;
padding:0px;
/*** REMOVED YOUR BACKGROUND IMAGE ***/
background-size: cover;
text-align:center;
}


this is where you put your background images:
CODE
.imageCycle1{
   background:url(https://cdnw.nickpic.host/oQsbIm.png);
   background-repeat:no-repeat;
   background-size:cover;
   -webkit-background-size: cover;
   -moz-background-size:cover;
   filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdnw.nickpic.host/oQsbIm.png',sizingMethod='scale');
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://cdnw.nickpic.host/oQsbIm.png',
sizingMethod='scale')";
}
.imageCycle2{
   background:url(BACKGROUND IMAGE 2 URL);
   background-repeat:no-repeat;
   background-size:cover;
   -webkit-background-size: cover;
   -moz-background-size:cover;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='BACKGROUND IMAGE 2 URL',sizingMethod='scale');
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='BACKGROUND IMAGE 2 URL',
sizingMethod='scale')";
}


if you want to add more, just add:

CODE
.imageCycle#{ /*** REPLACE # WITH THE NUMBER OF BACKGROUND YOU HAVE HERE
   background:url(BACKGROUND IMAGE # URL);
   background-repeat:no-repeat;
   background-size:cover;
   -webkit-background-size: cover;
   -moz-background-size:cover;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='BACKGROUND IMAGE # URL',sizingMethod='scale');
   -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='BACKGROUND IMAGE # URL',
sizingMethod='scale')";
}


and in your script, just add the comma, the quotes, and the name.


CODE
<script>
$(document).ready(function(){
   var classCycle=['imageCycle1','imageCycle2','imageCycle3'];

   var randomNumber = Math.floor(Math.random() * classCycle.length);
   var classToAdd = classCycle[randomNumber];
   
   $('body').addClass(classToAdd);

});
</script>


note, you must replace the image url three times per class. what the script is doing is adding one of the listed classes (imageCycle1, etc) onto your body class, which adds the background image to your body.

#
Do I put this code in the CSS?

.imageCycle1{
background:url(https://cdnw.nickpic.host/oQsbIm.png);
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size:cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://cdnw.nickpic.host/oQsbIm.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='https://cdnw.nickpic.host/oQsbIm.png',
sizingMethod='scale')";
}
.imageCycle2{
background:url(BACKGROUND IMAGE 2 URL);
background-repeat:no-repeat;
background-size:cover;
-webkit-background-size: cover;
-moz-background-size:cover;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='BACKGROUND IMAGE 2 URL',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='BACKGROUND IMAGE 2 URL',
sizingMethod='scale')";
}
My brain still can't comprehend this >.>
PM
#
hey! i’d suggest you to use this site. it’s kinda simple: you just have to upload the images there and then get the link and place it into your CSS.

i think it’s the easiest way to do what you’re looking for.
PM
#
Yep, you do. I split it up for you in my previous post, so just copy and paste the codes where I mentioned to paste them above. ^ Or you could do above as mentioned by baby cakes lol it might be easier for you to do.

This post has been edited by PANSY PARKINSON: Nov 13 2017, 03:52 PM
#
Another site you can use is
http://sig.grumpybumpers.com/

This site will let you randomize images that are hosted elsewhere. RandImg will automatically upload to ImgUr and they apparently don't like Jcink.
PM
#
CamilleNicole
i didn’t know randimg would automatically upload to imgur!! thanks for pointing that out, btw.

edit: okay, now i’ve just seen the disclaimer in small letters hahaha

This post has been edited by baby cakes: Yesterday at 07:21 pm
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll