Question

＆＃13;

body{
	background: url(../img/bedge_grunge.png) repeat;
}
a,a:hover{
	text-decoration: none;
}
.background-color{
	background: #fff;
	margin:0 50px 0 50px;
	border-top: 5px solid #00b4bb;
}

/*------------------------------------------------------TOP-BAR---------------------------------------------------------------*/
.before-after-img:before, .before-after-img :after{
	height:8px;
	width: 100%;
	left:0;
	content: '';
	position: absolute;
	background: url(http://i.stack.imgur.com/AnXuL.png) no-repeat;
}
.before-after-img:before{
	top: 0;
}
.before-after-img:after{
	bottom: 0;
}
.before-after-img{
	line-height: normal;
}
.top-bar{
	padding: 30px;
	position: relative;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Hotel Template 6</title>
	<!-- CSS links -->
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="font-awesome-4.5.0/css/font-awesome.css">
	<link rel="stylesheet" type="text/css" href="jquery-ui/jquery-ui.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/responsive.css">
</head>
<body>
	<header class="background-color">
		<section class="top-bar">
			<div class="container">
				<div class="before-after-img">
					<div class="row">
						<div class="col-lg-6">
							<div class="address-mail-id">
								<i class="fa fa-map-marker"></i>ADDRESS
								<i class="fa fa-envelope"></i> <a href="mailto:hello@gmail.com">hello@gmail.com</a>
							</div>
						</div>
						<div class="col-lg-6">
							
						</div>
					</div>
				</div>
			</div>
		</section>
	</header>

	<!-- js links -->
	<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script src="jquery-ui/jquery-ui.js"></script>

</body>
</html>

＆＃13;

I am new to the stack overflow and i am posting my first question. i want to add the background image on the top and bottom of the div i have tried it but it is not inn a proper form i have attached the background image separately. I have my content with my full code. plz check it once.i think that the css links might be creating a problem.

我是堆栈溢出的新手，我发布了我的第一个问题。我想在div的顶部和底部添加背景图像我已经尝试了但是它不是一个正确的形式我已经分别附加了背景图像。我的内容包含我的完整代码。请检查一次。我认为css链接可能会产生问题。

Answer 1

这就是你要找的东西

我从position: relative;移除.before-after-img并将其添加到.top-bar

注意：关于您的问题

您的代码中的问题是您在选择后添加了.before-after-img :after空格，它应该没有空格.before-after-img:after

body {
  background: url(../img/bedge_grunge.png) repeat;
}
a,
a:hover {
  text-decoration: none;
}
.background-color {
  background: #fff;
  margin: 0 50px 0 50px;
  border-top: 5px solid #00b4bb;
}
/*------------------------------------------------------TOP-BAR---------------------------------------------------------------*/

.before-after-img:before,
.before-after-img:after {
  height: 8px;
  width: 100%;
  left:0;
  content: '';
  position: absolute;
  background: url(http://i.stack.imgur.com/AnXuL.png) no-repeat;
}
.before-after-img:before {
  top: 0;
}
.before-after-img:after {
  bottom: 0;
}
.before-after-img {
  line-height: normal;
}
.top-bar {
  padding: 30px;
  position: relative;
}

<header class="background-color">
  <section class="top-bar">
    <div class="container">
      <div class="before-after-img">
        <div class="row">
          <div class="col-lg-6">
            <div class="address-mail-id">
              <i class="fa fa-map-marker"></i>ADDRESS
              <i class="fa fa-envelope"></i>  <a href="mailto:hello@gmail.com">hello@gmail.com</a>
            </div>
          </div>
          <div class="col-lg-6">

          </div>
        </div>
      </div>
    </div>
  </section>
</header>

如何在div的顶部和底部添加背景图像？

1 个答案: