Background image and gradient to the same div in CSS

This article deals with an example to demonstrate how to background-color, background-image and background shorthand property in CSS.

You may read this article How to add box-shadow in CSS?

How to add Background image to the div

 



 
.div1{
        background-image: url(../images/bg.jpg);
      }

How to add Background color to the div

.div2{
        background-color: #0085c2;
      }
 
background color to the div
 

How to add background image and background gradient to the same div?

.div2{
        background:  linear-gradient(
              rgba(253,29,29,0.6), 
              rgba(252,176,69,0.6)
          ),url(../images/slide2.jpg);
      }

Instead of background-image or background-color property we have to use background property which is the shorthand rule. Background-gradient and image are separated by comma.

The resultant output

background-image and gradient to the same div

Also read next article - Is your site mobile friendly?

Comments

Post a Comment

Popular posts from this blog

CSS Flexbox Layout

Image
CSS Flexbox Layout – Complete Guide with Examples Before diving in, make sure to read our guide on CSS Display Property . Traditionally, web layouts like the above were created using CSS floats . However, with CSS Flexbox , you can achieve the same results more efficiently and responsively. Why Use CSS Flexbox? ✅ Flexbox is a modern alternative to CSS floats and table layouts. ✅ It gives control over alignment, direction, order, and size of elements within a container. Let’s explore each concept of Flexbox step by step. Basic Components of CSS Flexbox a) Flex Container b) Flex Items Browser Compatibility CSS Flexbox is supported by all modern browsers including Chrome, Firefox, Safari, iOS Safari, and Opera. Internet Explorer 11 supports an older version of the specification with some limitations. ...
Read more >>

What are some mistakes people make when they start learning HTML, CSS and JavaScript?

Image
Using id instead of class names Many beginners are tending to write CSS using id names instead of CSS class names. We should always aim to reuse the code as much as possible. By using id names we are applying styles only to that particular div rather than sharing the styles which are common to div s having the same class name. Do read this article which gives a practical approach to maintainable CSS . Not using CSS shorthand Using CSS shorthand will come as a second nature by practice. Until then we need to force ourselves to write CSS in the right way. While working on a large project, we will notice that by using shorthand properties the number of code lines in CSS file will be reduced reasonably. CSS Measurements 0px is just a 0. There is no need to mention if it is a px or em. Following a standard measurement throughout the project is important. Be it px or rem, it should be followed by all for the project. Using relative values are encouraged more than absolu...
Read more >>

Datatables.net - Plugin options

Image
DataTables jQuery Plugin Options – Complete Guide In Part I of this series, we introduced the basics of the DataTables.net jQuery plugin . The DataTables jQuery plugin provides a rich set of configuration options for sorting, paging, search, and responsive layouts. Let’s see how you can utilize these options efficiently. CDN Links for DataTables Add the following CSS and JS files to your project using CDN links: Stylesheet References https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Script References https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css Disable All Options $("#example").dataTable({ paging: false, searching: false, info: false }); To display “Show entries” dropdown at the bottom of the data table $('.promo-prici...
Read more >>