Как добавить фоновое изображение сверху и снизу div?

body{ 
 
\t background: url(../img/bedge_grunge.png) repeat; 
 
} 
 
a,a:hover{ 
 
\t text-decoration: none; 
 
} 
 
.background-color{ 
 
\t background: #fff; 
 
\t margin:0 50px 0 50px; 
 
\t border-top: 5px solid #00b4bb; 
 
} 
 

 
/*------------------------------------------------------TOP-BAR---------------------------------------------------------------*/ 
 
.before-after-img:before, .before-after-img :after{ 
 
\t height:8px; 
 
\t width: 100%; 
 
\t left:0; 
 
\t content: ''; 
 
\t position: absolute; 
 
\t background: url(http://i.stack.imgur.com/AnXuL.png) no-repeat; 
 
} 
 
.before-after-img:before{ 
 
\t top: 0; 
 
} 
 
.before-after-img:after{ 
 
\t bottom: 0; 
 
} 
 
.before-after-img{ 
 
\t line-height: normal; 
 
} 
 
.top-bar{ 
 
\t padding: 30px; 
 
\t position: relative; 
 
}

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

 
\t <!-- js links --> 
 
\t <script type="text/javascript" src="js/jquery-1.11.3.js"></script> 
 
\t <script type="text/javascript" src="js/bootstrap.js"></script> 
 
\t <script src="jquery-ui/jquery-ui.js"></script> 
 

 
</body> 
 
</html>

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, которые я попробовал, но это не обычная форма, которую я приложил к фоновому изображению отдельно. У меня есть мой контент с полным кодом. PLZ проверить его один раз. Я думаю, что ссылки css могут создать проблему.

источник

2016-01-27 harsh desai

Это то, что вы ищете

я удалил 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:[email protected]">[email protected]</a> 
 
      </div> 
 
      </div> 
 
      <div class="col-lg-6"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </section> 
 
</header>

источник

2016-01-27 04:52:36

я это он, но когда я пытался в моем коде им получать 3 Б.Г. изображения –

эй плз проверить это я редактировал свой пост –

я отредактировал мой ответ @harshdesai вы добавили пробел после селектор –

Как добавить фоновое изображение сверху и снизу div?

ответ

Смежные вопросы