Gif animation background

wolly

Hello,

Any idea how to make some adjustments to the loading gif ?

I am using a custom gif animation. I noticed it is a white box around it, (white css background) , do you know how to modify this so the white box/background covers the whole page instead of a small box around my gif animation?

Cheers

paulus1031

Do you have a link for the link for the site?

Thanks
Paul

wolly

Hi, no i am working locally. But there should be a file that can be modified ?

aman204

wolly Or in order to have closer look, Probably, You can provide screenshot marked with annotations as what you wish to derive

wolly

If you look at the pictures, first image is how it looks like when the gif animation appears .... second image is what i basically want to achive......in short: blue background overlay so it covers the whole page.... and gif animation and text centered in the page.

First image

Second Image

Cheers

Ninja

wolly
Hi
Here is the style code that is used for the loading image.
/modules/mod_jak2filter/assets/css/style.css

#jak2-loading {
    background: url(ajax-loading.gif) center bottom no-repeat #91D0F2;
    border-radius: 3px;
    color: #fff;
    display: block;
    height: 50px;
    font-weight: bold;
    left: 50%;
    margin-left: -200px;
    padding: 10px 0;
    position: fixed;
    top: 50px;
    text-align: center;
    width: 400px;
    z-index: 999;
}

You can customize the code in this file or override it in your template custom.css file.
To put the loading image in center of page, kindly change top:50px to top:50%

Regards

wolly

Thank you, i have already managed to center the animation, what i need help with is the blue bakground to cover the whole page, any ideas ?

Ninja

wolly
Hi
The gif file is already used as backgound you can change the file with a different gif that has overlay.
Or you can play with before after classes on the loading div.
Example:

#jak2-loading:before {
    background: rgba(0,0,0,0.25);
    content: "";
    position: absolute;
       z-index: 2;}

Regards

wolly

Ninja

The gif file is not used as background 100%, you can see in the code that there is #91D0F2 background colour added .. this is the colour i want to expand all over the page.

Can you explain more please, what do i do with the above code to make it look like the second picture ?

Ninja

wolly
Hi
Its not possible as you want, without customization
You need to try different customization in via code i suggested.

Regards

wolly

Ninja

Seriously, if you cant help, pass it over to someone else that can help. Of course its possible, i managed to fix it my self by just adjusting the code a little.

Solution, here you go!

From

#jak2-loading {
    background: url(ajax-loading.gif) center bottom no-repeat #91D0F2;
    border-radius: 3px;
    color: #fff;
    display: block;
    height: 50px;
    font-weight: bold;
    left: 50%;
    margin-left: -200px;
    padding: 10px 0;
    position: fixed;
    top: 50px;
    text-align: center;
    width: 400px;
    z-index: 999;
}

#jak2-loading {
  background: url("ajax-loading.gif") center no-repeat #91D0F2;
  border-radius: 3px;
  color: #fff;
  display: block;
  height: 100%;
  font-weight: bold;
  padding: 360px 0;
  position: fixed;
  top: 0px;
  text-align: center;
  width: 100%;
  z-index: 999;
  opacity: 0.95;
  filter: alpha(opacity=95); /* For IE8 and earlier */
}

paulus1031

Thanks Wolly

Appreciate you took the time to post your solution

Best of luck with the website

Cheers
Paul

paulus1031

I'll mark this thread closed now

Thanks again

Cheers
Paul