0

I would like to display image to the left (border same as left border of white section to the left of blue box). Now Image will be visible only when remove background-image: linear-gradient(#a4c2e8,#e2eaf2);

But I want to preserve the gradient effect. How to do that ?

.quate_sidebar {
  list-style: outside none none;
  margin: -6px;
  margin-top: 5px;
  padding: 30px;
  padding-right: 126px;
  padding-bottom: 5px;
}

.quate_sidebar li {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  padding-bottom: 0px;
  margin-bottom: 10px;
  margin-left: 14px;
  background-image: linear-gradient(#a4c2e8, #e2eaf2);
  /* text styles */
  text-decoration: none;
  color: #4174c5;
  font-size: 13px;
  font-family: initial;
  font-weight: 100;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  display: block;
  margin: 5.5px 0;
  padding: 10px 10px 10px 50px;
}

.quate_icon_1 {
  background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center;
}
<ul class="quate_sidebar">
  <li class="quate_icon_1"><a href="#">Csab</a> </li>
  <li class="quate_icon_1"><a href="">Maryy</a></li>
</ul>

Please refer the code here: https://jsfiddle.net/edp5o27u/

Abhishek Pandey
  • 13,302
  • 8
  • 38
  • 68
Dayz
  • 269
  • 2
  • 12

2 Answers2

3

Use the following in .quate_sidebar li:

background-image: url('http:/placehold.it/30'), linear-gradient(#a4c2e8, #e2eaf2); background-repeat: no-repeat, repeat;

See also this fiddle

Gerard
  • 15,418
  • 5
  • 30
  • 52
0

If you add the icon background image to the <a> element, then you can keep the gradient background image on the <li> element.

.quate_sidebar li {
  position: relative;
  display: inline-block;
  padding: 15px 25px;
  padding-bottom: 0px;
  margin-bottom: 10px;
  margin-left: 14px;
  background-image: linear-gradient(#a4c2e8, #e2eaf2);
  /* text styles */
  text-decoration: none;
  color: #4174c5;
  font-size: 13px;
  font-family: initial;
  font-weight: 100;
  border-radius: 3px;
  box-shadow: 0px 1px 4px -2px #333;
  display: block;
  margin: 5.5px 0;
  padding: 10px 10px 10px 50px;
}

a.quate_icon_1 {
  background: url(img/get_quate/get_quate_icon_1.png)no-repeat scroll 15px center;
}
Yvonne Aburrow
  • 2,602
  • 1
  • 17
  • 47
  • i tried ..but this not solved problem – Dayz May 30 '17 at 10:22
  • could you explain a bit more, as I may have misunderstood the nature of the problem – Yvonne Aburrow May 30 '17 at 10:23
  • https://jsfiddle.net/beekvang/edp5o27u/1/ I need to display pictures on left side. But in this example how to display elements if different pictures are there for each section? – Dayz May 30 '17 at 10:27