CODEWITHSUNDEEP
htmlcssvue.js
salvador-soto
salvador-soto

Reputation: 23

Background gradient working but not displaying image

I am having issues getting this to work, for context I am making a simple stat tracking website and .body-bg-image is for my home page.

I want a gradient for my background, not a solid color, so I tried to do that as you can see below. It does show the gradient but does not show the image anymore.

.body-bg-image {
    background: linear-gradient(
        to top,
        rgba(196, 145, 2, 1) 0%,
        rgba(149, 48, 54, 1) 87%
    )
    fixed,
    /* this image doesn't show, 
    it works if I have the background as a color but not as a gradient */
    url("./assets/apexrevanant.png") top center no-repeat;
}

It used to work when it was like this, just a solid primary color and the image:

.body-bg-image {
    background: var(--primary-color) url("./assets/apexrevanant.png") top center no-repeat;
}

Upvotes: 1

Views: 49

Answers (1)

Dan Knights
Dan Knights

Reputation: 8378

With the background shorthand, order matters.

Linear gradient adds an overlay to the image if the image is declared after the gradient. As you have solid colors, it won't be visible.

If you set the colors to a lower opacity you should be able to see it:

body {
  height: 100vh;
  background: linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed, url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat;
  background-size: auto 100%;
}

If you want the image in front of the gradient reverse the order they are declared in:

body {
  height: 100vh;
  background: url('https://mobiledevmemo.com/wp-content/uploads/2014/12/173572251_Chocolate-chip-cookie.jpg') top center no-repeat, linear-gradient(to top, rgba(196, 145, 2, 0.5) 0%, rgba(149, 48, 54, 0.5) 87%) fixed;
  background-size: auto 100%;
}

Upvotes: 1

Related Questions