Один простой вариант - отключить повторение по вертикали на фоновом изображении и установить цвет фона элемента списка таким же, как цвет нижнего края вашего изображения. Тогда вы можете настроить свой CSS так:
div.list {
background: url("static/div.png") repeat-x left top #fff; /* example color */
margin:25px -25px 5px -25px;
}
Вы также можете сделать свое фоновое изображение выше, чтобы вы могли расширить свой градиент, чтобы избежать большой сплошной полосы внизу элементов списка, когда их высота вынуждена увеличиваться.
РЕДАКТИРОВАТЬ: PNG в вашем комментарии немного проясняется.
Я не совсем уверен, как у вас настроен HTML, но вы могли бы упростить все это, используя упорядоченный список и чистый CSS.
<h3>Latest Submissions</h3> <!-- or whatever your title element is -->
<ul>
<li>Lorem Ipsum</li>
<li class="stripe">Lorem Ipsum</li>
<li>Lorem Ipsum</li>
<li class="stripe">Lorem Ipsum</li>
</ul>
Тогда вы можете использовать стили по следующим направлениям:
li {
display: block;
background: #999;
padding: 3px;
}
.stripe {
background: #ddd;
}
Добавьте класс strip к каждому другому элементу списка, используя ваш PHP-скрипт. Это делает каждый элемент списка блок-элементом и применяет другой фон, если он является одной из stripe строк. Любой дополнительный контент в элементе списка просто заставит его расширяться по вертикали, отталкивая следующий, но цвета фона останутся с правильными элементами.
РЕДАКТИРОВАТЬ 2: Вывод списка в PHP
Предположим, что у вас есть массив значений, через который вы перебираете, который называется $myarray. Мы можем перебрать этот массив и применить класс stripe даже к элементам списка:
for($i = 0; $i < len($myarray); i++) {
$output = "<li";
if($i % 2 == 0) {
$output .= ' class="stripe"'
}
$output .= ">" . $myarray[$i] . "</li>";
}
Убедитесь, что этот вывод содержится в ul, поэтому вам нужно сделать что-то вроде этого:
<ul>
<?php //Put your loop here ?>
</ul>