CODEWITHSUNDEEP
css
umbriel
umbriel

Reputation: 751

Linear gradient and background image on a button

Hey I have one stupid question.

Im trying to create a button which includes both a .svg background and a gradient behind it.

It all works nicely but when I add background-size to control the size of the image inside the button the gradient starts to repeat itself in a pattern. like so:

http://jsfiddle.net/umbriel/g31nprgz/

Is there a way to make the gradient span the whole height without repeating AND being able to control the image size inside the button?

Thank you

Upvotes: 1

Views: 58

Answers (2)

C3roe
C3roe

Reputation: 96241

background-size takes multiple values too – so just set the size for your second background image (the gradient) to 100% again,

background-size:50px, 100%;

http://jsfiddle.net/g31nprgz/2/

Upvotes: 1

Josh Burgess
Josh Burgess

Reputation: 9567

You can add multiple background sizes in comma delimited lists, just like background images.

So, your fix is something like this:

background-size: 50px, contain;

Example Fiddle

Each ordinal corresponds to the same position for the background images, so the first item in the list of background-size applies to the first item in the list of background-image

Upvotes: 1

Related Questions