Add two -or more- background images with css

The HTML

<div class="cont">
  <input type="text" class="child commentedEntry editedEntry ">
</div>

 

The CSS

.cont{
  
  border: solid; border-width: 1px; border-color:#ccc;
  padding:5px;
}
.child{
  background:white;
  box-sizing: border-box
    
}
.commentedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gUYCiAar2S4JwAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAANklEQVQYlWP8//8/Azpg3zABQ5AJQxUDA8PPgAJGohRiU4xTIbpivAqRFTNi8ww2QNDEQaAQAC+vDzvnfYDpAAAAAElFTkSuQmCC);
  background-position: right top;
    background-repeat: no-repeat;    
}
.commentedEntry.editedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gUYCiAar2S4JwAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAANklEQVQYlWP8//8/Azpg3zABQ5AJQxUDA8PPgAJGohRiU4xTIbpivAqRFTNi8ww2QNDEQaAQAC+vDzvnfYDpAAAAAElFTkSuQmCC), url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKklEQVQYV2M4wMDwHx0DAQM6ZiBGEYZCXIpQFOJTBFdISBFYISEFQ0khAIh4GEKvITaLAAAAAElFTkSuQmCC);
  background-position: right top, left top;
  
    background-repeat: no-repeat;  
}
.editedEntry{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAKklEQVQYV2M4wMDwHx0DAQM6ZiBGEYZCXIpQFOJTBFdISBFYISEFQ0khAIh4GEKvITaLAAAAAElFTkSuQmCC);
  background-position: left top;
    background-repeat: no-repeat;  
}
  /*

The result

You can also use one or the other by just leaving one of the classes class=”child commentedEntry editedEntry “>

 

Published by

Nelson Muskus

Full Stack developer

Leave a Reply

Your email address will not be published.