CODEWITHSUNDEEP
htmlcssbackground-image
Paul
Paul

Reputation: 594

How to set background image position and gradient position independently?

I have a big image that contains 4 little images. I want to set position for image only like 4px 4px to show first little image, but it is also used for the gradient background. How to set background image position and gradient position independently?

background-image: url('../big_image.png'), -moz-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -ms-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -o-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -webkit-linear-gradient(#FFFFFF, #ECECEC);
background-position: 4px 4px;

I tried to use this variant:

background-image: url('../big_image.png'), 4px 4px, -moz-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -ms-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -o-linear-gradient(#FFFFFF, #ECECEC);
background-image: url('../big_image.png'), 4px 4px, -webkit-linear-gradient(#FFFFFF, #ECECEC);

or this:

background-image: url('../big_image.png'), -moz-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -ms-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -o-linear-gradient(4px 4px, #FFFFFF, #ECECEC);
background-image: url('../big_image.png'), -webkit-linear-gradient(4px 4px, #FFFFFF, #ECECEC);

Upvotes: 1

Views: 910

Answers (2)

Guilherme Ramos
Guilherme Ramos

Reputation: 5

I think you gotta use Z-index in CSS.
1st, you make a div wich contains the bg images and their position.
2nd you make another div with gradients and their position too.
then you set each z-index as you desire, if gradients stay behind the images, z-index for gradients is less than the images one

Upvotes: 0

Fahad Hasan
Fahad Hasan

Reputation: 10506

You can specify different background-position for both your background-image and the background-gradient by separating them using a comma.

Also, specify your background-image and the background-gradient using the background property instead of background-image.

This should work perfecly:

background: url('../big_image.png'), -moz-linear-gradient(#FFFFFF, #ECECEC);
background: url('../big_image.png'), -ms-linear-gradient(#FFFFFF, #ECECEC);
background: url('../big_image.png'), -o-linear-gradient(#FFFFFF, #ECECEC);
background: url('../big_image.png'), -webkit-linear-gradient(#FFFFFF, #ECECEC);
background-position: 4px 4px, 0px 0px;

Upvotes: 2

Related Questions