Need help? Check out our Support site, then


CSS to change header image

  1. I wanted to put up some notices that would run sequentially in the header image for a website that I manage. I know only a little about CSS but by fiddling around and viewing through Firefox I eventually came to something that works. The problem is that viewed through Chrome this looks a bit wobbly and it doesn't display at all in IE. I have the latest versions of all three browsers.

    This is my attempt at a CSS solution:

    .header-image img {visibility: hidden;}

    @keyframes changeHeaderImage
    {
    0% {
    background: url("https://owgra.files.wordpress.com/2017/11/cropped-joinowgra3.png") no-repeat scroll 0 0;
    background-size: contain;
    }
    25% {
    background: url("https://owgra.files.wordpress.com/2016/09/cropped-osterleyhouse2.png") no-repeat scroll 0 0;
    background-size: contain;
    }
    50% {
    background: url("https://owgra.files.wordpress.com/2017/11/cropped-wastemtg.png") no-repeat scroll 0 0;
    background-size: contain;
    }
    75% {
    background: url("https://owgra.files.wordpress.com/2016/09/cropped-osterleyroad11.png") no-repeat scroll 0 0;
    background-size: contain;
    }
    100% {
    background: url("https://owgra.files.wordpress.com/2017/11/cropped-joinowgra3.png") no-repeat scroll 0 0;
    background-size: contain;
    }
    }

    .header-image
    {
    animation-name: changeHeaderImage;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    }

    What do I need to change for this to work smoothly in IE and Chrome. I am okay about adding the CSS required for browsers such as Safari which I will do when I have the thing working for Chrome and IE as well as Firefox.

    The blog I need help with is owgra.org.uk.

  2. Hi there, both Safari and Chome need the webkit declarations, and IE10 and later should recognize and work with animations just fine. IE9 an earlier do not support animations.

    Have a look at this from CSS Tricks on animations and use it as a guide and see if that doesn't straighten things out for you.

    Also, have a look at this one, which covers some IE (MS) specific things.

  3. Thanks. Yes, I am aware that IE9 doesn't support animations but my test was with IE 11. The animations seemed to work with Chrome without webkit declaration. I expect that the wobbling I noted in Chromed could be resolved by making all the images exactly the same size so that there is no problem of the default fading struggling with different sizes.

    I had looked at CSS Tricks and the Stackflow links you give but I will look again and see if I can sort things out. I have been coming to the view that the problem is all the stuff that the template is associating with the header image and that I need a way of cancelling all that.

    Anyway, I am busy with other stuff but will get back to this in a few days.

    Thanks for the reply.

  4. Yeah, definitely make the images the same exact size. That could definitely account for the wobblies. I would start with that. Also, add the -ms declarations and see if that fixes the IE11 issue. I think it probably will. I think the Edge browser now recognizes the standard animation declarations, but I don't think IE11 does, it requires the ms specific declarations.

    Let me know how things go and if you have any problems.

  5. You can also try open the CSS file or paste the code into VS Code. Download one of the many CSS autoprefix extension which will auto populate all requires CSS prefix for all browsers.

  6. @wdn2020, that can only be used on self-hosted WordPress sites, or on sites here that have the WordPress.com Business plan upgrade, and the user does not have the Business upgrade.

You must log in to post.

About this Topic