CODEWITHSUNDEEP
css
Arun Krishnan
Arun Krishnan

Reputation: 1958

change the background-position of the image only without affecting to css3 gradient

.save-btn{
            width: 76px; 
            height: 25px;
            /*background: url(button-icon-sprite.png) no-repeat left top, #b7e7fa; /* Old browsers */
            background-image: url(button-icon-sprite.png), -moz-linear-gradient(top,  #b7e7fa 0%, #83c2dc 100%); /* FF3.6+ */
            background-image: url(button-icon-sprite.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b7e7fa), color-stop(100%,#83c2dc)); /* Chrome,Safari4+ */
            background-image: url(button-icon-sprite.png), -webkit-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%); /* Chrome10+,Safari5.1+ */
            background-image: url(button-icon-sprite.png), -o-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%); /* Opera 11.10+ */
            background-image: url(button-icon-sprite.png), -ms-linear-gradient(top,  #b7e7fa 0%,#83c2dc 100%);/* IE10+ */
            background-image: url(button-icon-sprite.png), linear-gradient(to bottom,  #b7e7fa 0%,#83c2dc 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7e7fa', endColorstr='#83c2dc',GradientType=0 ); /* IE6-9 */
            background-position: left 10px; 
            background-repeat: no-repeat;
        }

I am using css3 gradient and a sprite image. I need to change the image position. But when I am changing the background-position, it is affecting to the css3 gradient also. how to solve this

Upvotes: 4

Views: 1468

Answers (3)

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can also use like this:

    background: url(button-icon-sprite.png) left 10px,
                -moz-linear-gradient(top,  #b7e7fa 0%, #83c2dc 100%);

Upvotes: 0

BoltClock
BoltClock

Reputation: 723688

You have to specify the position for the gradient as well. Resetting it to 0px 0px should do it:

background-position: left 10px, 0px 0px;

Upvotes: 4

Mr. Alien
Mr. Alien

Reputation: 157334

You need to separate the positions using a ,

background-position: left 10px, center center;
                      ^    ^       ^     ^
                      X    Y       X     Y
                        URL        Gradient

Am using center center for gradient, you can set the position for gradient accordingly, as @Bolt told you to use 0

Upvotes: 4

Related Questions