Repeating background

HTML-CSS
1

Hey guys, I am kind of new to html/css. So I am working on a project for my friend and I have this code:

?>

<?php get_header(); ?>


	<?php while(have_posts()) : the_post(); ?> 
		
		<!-- START SECTION -->
  		<div class="section hero text-center background-dark dark-bg">
  			<div class="background-image" style="background: url(images/hero.jpg) no-repeat center center; background-size: cover; opacity: .2;"></div>
  			<div class="container">
  				<div class="row">
  					<div class="col-md-12">
  						<h2>Indigo Template</h2>
  						<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium ullam consequatur repellat debitis maxime.</p>
  						<ul class="list-inline">
  							<li><a href="#" title="Learn More" class="btn btn-md btn-info">Learn More</a></li>
  							<li><a href="#" title="Learn More" class="btn btn-md btn-primary">Download Now</a></li>
  						</ul>
  					</div>
  				</div>
  			</div>
  		</div>
  		<!--/.section -->
  	<?php endwhile; ?>
	<?php 
	get_footer();
?>

My background keeps repeating itself… the “Indigo Template” and the “learn more” and “download” are the items being repeated (3 times if that matters)… and yes this is a css template, I am going to be working more on the backend side of things but I am converting a html file to a wordpress theme. And also my background image also isnt appearing as well.

2

The html and css would not make that repeat so I believe it most likely has to do with the while loop in your PHP code on line 4. If you only want the content of the section once you could just remove the php code.