The background gradient is functioning correctly, however, the image is not being

I seem to be experiencing some difficulties with this. To provide some background, I am currently working on a basic stat tracking website and the .body-bg-image pertains to my homepage.

Instead of a solid color, I was aiming for a gradient background, so I made an attempt which resulted in the following issue - although the gradient appears, the image no longer shows up.

.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;
}

Previously, it was functioning fine when it was set up like this with a solid primary color and the image:

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

Answer №1

In the case of using the background shorthand, the order in which you declare the properties is crucial.

If a linear gradient is placed before an image declaration, it will act as an overlay and may not be visible with solid colors.

To make the gradient visible, consider reducing the opacity of the colors:

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 wish to have the image appear in front of the gradient, simply reverse the order of their declarations:

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%;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Displaying a Color Sample in a Grid

I'm currently working on a feature that allows users to select colors using the jQuery minicolor widget. I really like how the color swatch appears inside the widget, but I'm having trouble replicating that same look in a data table. When I try t ...

jqueryhtmlcss

Troubleshooting Cufon Compatibility with Internet Explorer - Investigating a CSS Problem

Currently facing an unusual issue. I am creating a Wordpress theme with Cufon and it works flawlessly in Chrome and Firefox, but refuses to render in IE. I decided to put this problem on hold and focus on it later as I am still in the development phase. Y ...

cssinternet-explorercufon

Difficulty encountered when trying to customize a polymer element that has been expanded (paper-slider)

I've been customizing the Polymer paper-slider element to handle an enumerated list and cycle through these values in the slider instead of just showing numeric values. However, I'm struggling with getting the styles to align properly. When you r ...

javascripthtmlcsspolymer

Error in resolving module with Webpack

Attempting to compile a vue file but encountering the error shown https://i.sstatic.net/gVViK.png Unclear on the reason for this issue. The content of my main.js file is as follows: // Vue things import Vue from 'vue' import VueResource from &a ...

webpackvue.js

Choosing items from a list based on the choices made in another list

How can I make the second select bar dependent on the selection made in the first one? For example, if I select publisher with id=1, then only show templates that have publisher id=1. <v-flex> @can('publish') @if (sizeof($publ ...

vue.js

Comparison of XPath operators //* versus //element versus //

My mind is a bit muddled when it comes to finding XPath: I'm not sure when to use //* at the beginning and when just // will suffice. For instance, I recently encountered this issue while trying to understand it on . On their homepage, there is a sea ...

htmlxmlselenium-webdriverxpath

Access Vue.js data attribute in jQuery

Is there a way to extract the data-src attribute value from the following HTML code using Vue.js? <img id="some_id" :data-src = "some_path"> I attempted to assign this value to a variable using jQuery: var imgSrc = $("img:data(src)"); Unfortunat ...

javascriptjqueryvue.js

JSFiddle showcasing the Bootstrap grid system

I'm having trouble implementing bootstrap's grid system on jsfiddle. Check it out on jsfiddle I've tried using the example from the bootstrap documentation: <div class="row"> <div class="col-md-1">.col-md-1</div> ...

csstwitter-bootstrapgrid-layout

Why is it not possible to incorporate a variable in HTML when using Vue.js?

Why am I encountering an error when trying to use location information in HTML? The error message is Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'geoLocationPlace'). What could be causing the variable 'geoLoc ...

javascripthtmlvue.js

Challenge with CSS3 Selectors

I'm struggling to understand why this code works: input[ type = "text" ]:last-of-type:focus{ border:1px solid red; } but this code doesn't work: input[ type = "checkbox" ]:last-of-type:checked{ border:1px solid red; } The example given with t ...

csscheckboxcss-selectorspseudo-class

Textarea is limited to resizing just one specific area

I've been experiencing issues with my textareas. The problem arises when I try to have multiple textareas that need to resize on page load. It seems to work well for the first textarea, but as soon as I insert another one, only the first one responds ...

javascripthtmlcsstextarea

To close the menu, simply tap on anywhere on the screen

Is there a way to modify a script so that it closes the menu when clicking on any part of the screen, not just on an 'li' element? $(function() { $('.drop-down-input').click(function() { $('.drop-down-input.selected').rem ...

javascriptjqueryhtmlcss

"Within the node.js framework, the search/query section of the URL appears

I am currently working on a website (client + server) that both operate from the same machine. Despite not encountering any issues in Chrome's developer tools, I am struggling to identify the source of a problem. My dilemma is with trying to POST a s ...

javascripthtmlnode.jsajax

h1 does not center align properly when there is insufficient text below

It seems that my h1 only aligns to the center of the screen when there is enough text underneath it. Otherwise, it doesn't align correctly or at all. How can I resolve this alignment issue? .content { margin-top: 60px; text-align: center; } bo ...

htmlcssalignmentbootstrap-4

Adding the "input-invalid" class to the input doesn't take effect until I click outside of the input field

When the zipcode field is updated, an ajax call is made. If there are no zipcodes available, I want to mark it as invalid by adding the "input-invalid" class. However, the red border validation only appears when clicking outside of the input field. Is ther ...

javascriptjqueryhtmltwitter-bootstrap

Ensure the computed variable is always up-to-date using Firebase in VueJS

After a successful sign-in through Firebase authentication, I need to update a navigation link. The user login changes are managed within the created hook using .onAuthStateChanged() data () { return { user: null, additionaluserinfo: nul ...

javascriptfirebasevue.js

How feasible is it to customize the "ionic-img-viewer" npm package or replicate its image styling in Ionic 2?

I am wondering if it is possible to edit or add additional styles when my image is viewed using the "ionic-img-viewer" npm package. Alternatively, how can I apply the same styles as those on my original image tag? For example, here is my img tag with some ...

imagecssnpmionic2

Is it possible for an SVG to derive its dimensions from the containing element?

I am currently in the process of transitioning a Vue/Vuetify application from using web fonts for Material Design Icons to utilizing SVG icons instead. With the web font, an example of a heading that includes an icon looks like this: <template> &l ...

csssvgvuetify.js

AngularJS users are experiencing issues with the "See More" feature not functioning as expected

One of my tasks involves dealing with a block of text that needs to be truncated using ellipsis. To achieve this, I am utilizing jquery dotdotdot. For more information on dotdotdot, please refer to the documentation. I have created a straightforward dire ...

javascriptcssangularjsdotdotdot

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

Web development can be frustrating at times. Hopefully, someone out there can shed some light on this issue and offer a solution. You can view the HTML/CSS code below or check out this example on JSFiddle The problem arises when I have a header div and a ...

htmlcss