CODEWITHSUNDEEP
jqueryhtmlcssbackground-position
Yoones Mehdian
Yoones Mehdian

Reputation: 522

change position of one background image in a multi backgrounded div

I have a simple HTML : <div id="wrapper"></div> and this style sheet: 

#wrapper{

        position: absolute;

        width: 400px;
        height: 400px;     

        background-image: url(img1.png), url(img2.png);

        background-repeat: no-repeat, no-repeat;

        background-position: top center, center center;

        background-color: green;
        border: 1px solid black;

}

as above style sheet shows #wrapper has two background images in different positions. I want to change second image position on mouse click with applying no change on the first image position. what syntax do i have to use?

my jquery code : 

$("#wrapper").click(function(){
    this.css("background-position": " ? , bottom right " );
});

i think ? should be replaced with something like !important but !important does not works for applying no change on first image.

position of both background images will change in different places, and i dont know what is the first image position now, i can save its position in a variable, but i rather to use native solution, if exists
any suggestion?

Upvotes: 2

Views: 1543

Answers (5)

Marcin Bach
Marcin Bach

Reputation: 61

Pure CSS:

body {

  background-image:
    url(https://...image1),
    url(https://...image2);

  background-position:
    top 10% left 10%,
    top 10% right 10%;
}

Upvotes: 0

dfsq
dfsq

Reputation: 193311

change background position 2

This will replace the second background position (after comma) with bottom right:

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/,(.*)$/, ', bottom right');
    });
});

change background position 1

And this will replace the first background position (before comma) with bottom right:

$('#wrapper').click(function() {
    $(this).css('background-position', function() {
        return this.style.backgroundPosition.replace(/(.*),/, 'bottom right, ');
    });
});

this solution is a good choice if element has only two backgrounds and we want to change position or any other property of each background images

Upvotes: 1

adeneo
adeneo

Reputation: 318342

Using multiple backgrounds, the backgrounds and all other properties involving the backgrounds, are comma seperated lists, so all you have to do is use the same CSS rule as is already applied to "not" make any changes to the first background image's position:

$("#wrapper").on('click', function(){
    $(this).css("background-position", "top center, bottom right");
});

Another option would be to set the background-position in classes, and just swap classes:

.bg1 {background-position: top center, center center;}
.bg2 {background-position: top center, bottom right;}

-

$("#wrapper").on('click', function(){
    $(this).toggleClass('bg1 bg2');
});

Upvotes: 1

Michal Klouda
Michal Klouda

Reputation: 14521

You need to read the original value of first position and then reassign it together with your second value changed..

$("#wrapper").click(function(){
   var first = $(this).css("background-position").split(',')[0];
   $(this).css("background-position", first + ", bottom right " );
});

Upvotes: 1

David Thomas
David Thomas

Reputation: 253486

You'll need to explicitly specify both images' position (even the one that doesn't change, since there's no way, so far as I yet know, to keep track of which image is which):

$('#wrapper').click(
    function(){
        $(this).css({
            'background-position': 'top center, center center'
        });
    });

Also, note that the native DOM this isn't able to use jQuery methods, you have to use the jQuery $(this) object.

Upvotes: 1

Related Questions