How to Combine a Background-Image and Css3 Gradient on the Same Element

How do I combine a background-image and CSS3 gradient on the same element?

Multiple backgrounds!

body {  background: #eb01a5;  background-image: url("IMAGE_URL"); /* fallback */  background-image: url("IMAGE_URL"), linear-gradient(#eb01a5, #d13531); /* W3C */}

How to combine Background Image + Linear Gradient in CSS ? Linear Gradient over the Background Image

Make a div inside the section, it will serve as a mask, and set the gradient of this mask as a background in it.

The css of the mask will look like this:

position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;

So it would be all over the parent element (section)

section {

    width: 100vw;
    height: 10rem;
    background: url(https://www.yannickdixon.com/wp-content/uploads/2016/12/161124-golden-seaside-sunset-photography-print.jpg);
}

.overlay {

position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)) );
    background: -webkit-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -o-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: -webkit-gradient( linear, left top, left bottom, from(rgba(0, 0, 0, 1)), color-stop(1%, rgba(0, 0, 0, 1)), color-stop(15%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)) );
    background: -moz-linear-gradient( top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    background: linear-gradient( to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 1%, rgba(0, 0, 0, 0) 15%, rgba(0, 0, 0, 0) 100% );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}

<section>
<div class="overlay"></div>
</section>

how to apply background image to css gradient div?

You can combine a gradient and a background image by putting them into the same (not seperate) background setting, separated by a comma:

div{height: 400px;background: linear-gradient(90deg, rgba(0,170,175,1) 0%, rgba(0,170,175,1) 35%, rgba(0,170,175,0.28) 100%), url('https://cssgradient.io/images/css-gradient-swatches-a67daaf7.svg');}

<div></div>

Multiple background images/gradients for same element, declared in different statement, in CSS3

You can't use multiple background in separate background statements. If you want multiple backgrounds, you have to declare them all in one background statement. This is because in multiple background statements, the rendering engine assumes you mean to replace the previously-set background with the new one, instead of adding to what's there.

One thing I generally do with CSS3, particularly when still needing all of the vendor prefixes, is to put all the CSS3 into its own file. That way, the rest stays readable and it's not mixed into the main CSS.

How to combine CSS Linear gradient with images?

demo from my comment:

body {  margin: auto;  height: 200px;  width: 300px;  background: linear-gradient(125deg, #e20613 25%, transparent 25%), url(http://dummyimage.com/300x200&text=my_image);  border:solid;}html {display:flex;height:100%;background:white;}

How to have background gradient and background image at the same time?

Use pseudo element:

table {
  white-space: nowrap;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #7b9ebd;
}

th {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #f8f8f8 36%, #f2f2f2 100%);
  font-weight: normal;
  border-bottom: 1px solid #d5d5d5;
  border-right: 1px solid #dedfe7;
  text-align: left;
}

th.sorting_asc {
  background: #dde9f6;
  background: linear-gradient(180deg, #f4f8fc 0%, #f4f8fc 36%, #e7eff7 36%, #dde9f6 100%);
  border-left: 1px solid #97d8fa;
  border-right: 1px solid #97d8fa;
  border-bottom: 1px solid #97d8fa;
}

th:hover {
  background: #dde9f6;
  background: linear-gradient(180deg, #e8f4ff 0%, #e8f4ff 36%, #c0e9ff 36%, #bbe4fd 100%);
  border-right: 1px solid #6bb8e6;
  border-bottom: 1px solid #99c6e3;
}

table.datatable thead .sorting_asc {
  position:relative;
  z-index:0;
}
table.datatable thead .sorting_asc:before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background-image: url("https://cdn.datatables.net/1.11.4/images/sort_asc.png") !important;
  background-repeat: no-repeat;
  background-position: center right;
}

<table class="datatable">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sorting_asc">Date modified</th>
      <th>Type</th>
      <th>Size</th>
  </thead>
  <tbody>
    <tr>
      <td>explorer.exe</td>
      <td>1/20/2022 11:50 AM</td>
      <td>Application</td>
      <td>4,855 KB</td>
    </tr>
</table>

Gradient not working when there's a background color

If you define a gradient as a background-image and a background-color for the same element, only one of them will be displayed if they both cover the complete element (which they do as long as no clipping is added, and if it's added, both are clipped).

For an additional background color you need to add an additional parent element that gets that background color:

(note after edit of question snippet: also the * selector applies to the #maintitle element in your snippet, so although there are two CSS rules, the background-image and background-color settings in them apply to the same element, for which the above also applies: the background-color overwrites the background-imge/gradient)

#maintitle {
  background-image: linear-gradient(90deg, red, blue);
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.wrapper {
   background-color: green;
}

<div class="wrapper">
  <div class="title" id="maintitle">
    <h1>
      Welcome!
    </h1>
  </div>
</div>