Dynamically change background size

  • Author
  • #634573


    I don’t have the custom CSS yet, but I am trying some things as a test. The main issue I’m having is that I want the background to dynamically resize as the person’s screen is bigger/smaller. I have the code that I know will work.
    html {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    However, when I insert it, it just messes up the background. making it all black. Where should I insert it in the Mystique theme? Should I still have the background set in the html tag, or should I move it somewhere else? If you want a demo of how it should work, go to http://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

    Thanks! :-)

    The blog I need help with is webosaursgang.net.


    It may be that background-size (which is CSS3) is not yet supported here and if you had the CSS upgrade and tried to save it, it would be stripped out. Browser support is not very deep and on IE, only those using IE9 would see it.

    From W3C:

    The background-size property is supported in IE9+, Firefox 4+, Opera, Chrome, and Safari 5+.



    Thanks for the reply. I actually should I add I did managed to get it working, but I had to make the stylesheet ONLY that code. Obviously, that won’t quite do.

The topic ‘Dynamically change background size’ is closed to new replies.