CODEWITHSUNDEEP
jquerycssbackground
George
George

Reputation: 2110

jquery background change

Consider the following situation. I've 2 types of backgrounds: 1.Photoshop gradients for which I use CSS markup like: 

html{
                background-image: url('imgs/gradient.png');
                background-repeat: repeat-x;
                background-color: #000000;
            }

2.Background patterns for which the markup is as follows

html{
    background-image:url('paper.gif');
}

The following Jquery is responsible for the background change:

$(function() {
            $('a').click(function() {
                var currentLink = $(this);
                var which = $(this).attr('id');
                //Color scheme variables(image,color)
                var image = '';
                var color = '';
      //gradient + color background
                if (which == 'a1')
                    {image = "url(backgrounds/pat2.png)";
                    color = "#3a2c33";}
     //pattern type background
                       else if(which == 'a2')
                    {image = "url(backgrounds/pat4.jpg)";
                    color = " ";}
                if(color != " "){
                    $('html').css("background-image", image);
                    $('html').css("background-color", color);
                }
                else{
                    $('html').css("background", image);
                }
            return false;
            });
        });

If I select pattern type background and then gradient/color type background the background color couldn't be initialised.

Upvotes: 2

Views: 924

Answers (3)

GBa
GBa

Reputation: 18447

Maybe you need to clear the background attribute since it may be leaving both background, background-image, and background-color all at once?

Upvotes: 1

Matěj Polák
Matěj Polák

Reputation: 182

I think that the background style should be on body and not on the html

Upvotes: 1

Marcel
Marcel

Reputation: 28097

Rather than juggle background CSS values in JS, you should use a class on html and toggle that.

html { background-image:url('paper.gif'); }
html.alt { background:#000 url('imgs/gradient.png') repeat-x; }

Upvotes: 2

Related Questions