Sorry for misunderstanding. Check please all code which I'm testing.
Icons are not background but it should be placed inside message on the left hand side.
.message {
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)), color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent), to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%, transparent 75%, transparent); -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4); box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
-webkit-animation: animate-bg 5s linear infinite;
-moz-animation: animate-bg 5s linear infinite;
}
.info {
background-color: #4ea5cd;
/* background: #4EA5CD url(images/infoicon1.gif) no-repeat 20px 20px !important ; */
border-color: #3B8EB5;
}
.error {
background: #DE4343 url(images/messages/erroricon1.gif) no-repeat 20px 20px !important ;
border-color: #C43D3D;
}
.warning {
background: #D99A36 url(images/warningicon1.gif) no-repeat 20px 20px !important ;
border-color: #D99A36;
}
.success {
background: #61B832 url(images/successicon1.gif) no-repeat 20px 20px !important ;
border-color: #CC0000c;
}
.message h3 {
margin: 0 0 5px 40px;
}
.message p {
margin: 0 0 0 40px;
}
Inside .message is defined all background-image: -webkit-gradient etc.
Each subject ot type (message) is defined with .info....success. Now check background: #4EA5CD inside .info where should be icons as posted enclosed image. This will prevent showing gradient inside each type of message.
Need help how to solve this.
The attachments of this post were removed during the platform migration in 2018