Custom post divider

Right, but also remember that I’m using the radial gradient to style it (right before section 5):

.archive .site-content article,
.category .site-content article,
.single .site-content article,
.blog .site-content article,
.search-results .site-content article {
  background: #fff;
  /* Old browsers */

  /* IE10 Consumer Preview */
  background-image: -ms-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Mozilla Firefox */
  background-image: -moz-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Opera */
  background-image: -o-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* Webkit (Safari/Chrome 10) */
  background-image: -webkit-gradient(radial, center bottom, 0, center bottom, 487, color-stop(0, #fbfbfb), color-stop(1, #ffffff));
  /* Webkit (Chrome 11+) */
  background-image: -webkit-radial-gradient(center bottom, circle closest-corner, #fbfbfb 0%, #ffffff 100%);
  /* W3C Markup, IE10 Release Preview */
  background-image: radial-gradient(circle closest-corner at center bottom, #fbfbfb 0%, #ffffff 100%);
}

So you have to remove this one and then you could just do the background:

.site-content article {
	border-bottom: 0;
	background-image: url('images/background.gif');

	margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

So you don’t need div, you can achieve this only via CSS ??

Don’t forget to share the results of your work!

When I remove the radial gradients and place a background image instead, I don’t get a single divider. Instead, the entire background of the post now has the background of the divider I created and it’s repeated. I tried “no-repeat,” but it’s still there. This is what I have in my code:

.archive .site-content article,
.category .site-content article,
.single .site-content article,
.blog .site-content article,
.search-results .site-content article {
  border-bottom: 0;
  background-image: url('https://localhost/followtheflammias/wp-content/uploads/sites/3/2014/01/divider.png');
  background-repeat: no repeat;
  margin-bottom: 72px;
	margin-bottom: 5.142857143rem;
	padding-bottom: 24px;
	padding-bottom: 1.714285714rem;
	word-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

I also tried just putting the code under .site-content article, but then my divider doesn’t show up at all. Any thoughts? It’s probably something simple I’m overlooking.

By the way, I really like the ease of this theme and your tips are incredibly helpful. I’ll share my work when I get it completed. Thanks again.

Sorry, I forgot to add to the rules:

background-repeat: no-repeat;
background-position: center;

you can also try for the position:

background-position: center bottom;

Thanks again.
background-position: center bottom; It worked.