CODEWITHSUNDEEP
cssbackground-imagelinear-gradients
crashbus
crashbus

Reputation: 1714

css3 background gradient full width with scaled image

Is there a way to set the size of the image independent from the general size of the background with css?

With following code I set the size of the of the background, so the gradient and the image have the width of 30px.

background(url("../images/icons/double_arrow_37px.svg"), linear-gradient(to top bottom, rgb(171, 129, 85), rgb(148, 112, 74)));
background-size: 30px 37px;

What I need is to set the width of the image to 30px and the gradient to a width of 100% of the button.

I already know the workaround to create a extra image with the correct dimensions, but maybe there is a smarter way with css?

Full Example:

body {
 background-color: #000; 
}  
.button-custom {
  color: #fff;
  font-family: $font-centennial;
  background-image: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg");
  background-size: 30px 37px;
  background-position: center left;
  background-repeat: no-repeat;
  margin-top: 70px;
  padding: 15px 45px;
  border-radius: 0;
  border: 0;
  text-transform: uppercase;
  overflow: hidden;
}

.button-custom.bronze {
  background-color: #ab8155;
}

.button-custom.bronze:hover {
  background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), linear-gradient(to top bottom, #ab8155, #94704a);
background-position: center left;
  background-size: 30px 37px;
  background-position: center left;
  background-repeat: no-repeat;
  color: #fff;
}
<a href="#" class="button-custom bronze">Contact</a>

Upvotes: 1

Views: 1506

Answers (1)

Patrick Ferreira
Patrick Ferreira

Reputation: 2053

In CSS3, you can use multiple images background. linear-background is interpreted as an image not a color. Known that, you can write something like that : 

body {
    height: 600px; /* not relevant for your problem */
    width: 600px;
}
div {
    height: 500px; /* not relevant for your problem */
    width: 500px; /* not relevant for your problem */
    border: 3px dashed green; /* not relevant for your problem */

    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -moz-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, blue));
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -o-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -ms-linear-gradient(top,  red 0%, blue 100%);
    background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), linear-gradient(to bottom,  red 0%, blue 100%);
    
    background-position: 50% 50%, 50% 50%;
    background-repeat: no-repeat, no-repeat;
    background-size: 150px, 300px;
     
}
<div>Yo!</div>

Upvotes: 2

Related Questions