CODEWITHSUNDEEP
cssbackground-imagegradient
ssabin
ssabin

Reputation: 111

Cover background image + gradient background

I'm building a website right now and trying to set a section with background image to cover all the section and gradient background that is generated. I tried putting them together but it didn't really work, this is what I tried: https://jsfiddle.net/gmtujnmh/

#fullcover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-position: center;
  max-height: 60%;
  display: inline;
  background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg);
  /* fallback */
  background: rgba(62, 21, 49, 1);
  background: -moz-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(62, 21, 49, 1)), color-stop(100%, rgba(162, 23, 128, 1)));
  background: -webkit-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -o-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: -ms-linear-gradient(-45deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  background: linear-gradient(135deg, rgba(62, 21, 49, 1) 0%, rgba(162, 23, 128, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3e1531', endColorstr='#a21780', GradientType=1);
}
<div id="fullcover"></div>

the gradient code it taken from cssmatic, can someone help me?

Upvotes: 0

Views: 1876

Answers (2)

Vipin Raunchhela
Vipin Raunchhela

Reputation: 193

Try this.

  body{
      background:url("https://upload.wikimedia.org/wikipedia/commons/f/f0/Googlelogo1997.jpg") no-repeat center center, linear-gradient(green, blue);
    height:100%;
    }
    html{height:100%;}
  

    <body>
    here we go
    </body>

Upvotes: 0

Enmanuel Duran
Enmanuel Duran

Reputation: 5118

The code from your fiddle doesn't match the code you posted here, this answer is for the code in the fiddle.

You need to add some opacity to the gradient, it solved it for me, here a fiddle for you:

https://jsfiddle.net/gmtujnmh/2/

#fullcover{
    position: absolute;
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-position: center;
    max-height: 60%;
    display:inline;

    background-image: url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* fallback */

background-image: -webkit-gradient(
  linear, left top, left bottom, from(rgba(62,21,49,.6)),
  to(rgba(162,23,128,.9)), color-stop(.5,#333333)
), url(http://www.materials-world.com/bricks/belden/whites/images/AlaskaWhiteVelourWT.jpg); /* Chrome 10+, Saf5.1+ */

Now you only need to play with the colors and opacity to get what you want, hope it helps.

Upvotes: 1

Related Questions