html - この既存のコードの mainContent div にトップ ボーダー イメージを追加するにはどうすればよいですか?

Question

mainContent div に上下のボーダー画像を追加するために 3 つの div を作成しようとしましたが、整列させることができませんでした。このコードを変更して、メインの白いセクションの上下にこの青い境界線を追加する簡単な方法はありますか?

http://www.charissasantos.la/mezcaleria.html

希望する境界線効果の画像: http://www.charissasantos.la/img/shot.png

Answer 1

.............ライブデモ

こんにちは、あなたのボーダーのこのCSSに慣れましたmainContent

   #mainContent.grid_14 {
border-top:solid 10px;
border-bottom:solid 10px;
border-width:10px;
border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-webkit-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
-moz-border-image:url("http://www.norabrowndesign.com/css-experiments/images/border3.png") 25% repeat ;
    }

ライブデモ

画像枠リンクの詳細

Answer 2

実際に望ましい結果を得るにはpseudo class :before & :after、デモの下に記載されているように使用する必要があります:- http://tinkerbin.com/7MrKH9Zz

HTML

<div id="mainContent">
asfdasdfafafafaf
</div>

CSS

#mainContent {
    background:white;
    margin-top: 15px;
    width:500px;
    height:500px;
    position:relative;
    border:1px solid red;
}

#mainContent:before {
    background:url(http://i.imgur.com/lPj6H.png) no-repeat 0 0;
    position:absolute;
    content:"";
    width:500px;
    height:7px;
    top:-8px;

}

Answer 3

これらの回答に加えて、セレクターとセレクターbackgroundの両方に同じことを適用することもできます。#footer#mainContent

例えば;

#footer {
  background-image: url(img/img-blue-border.png);
  background-color: #C39C5B;
  background-repeat: repeat-x;
  background-position: top;
  text-align: left;
  font-size: 11px;
  padding: 15px 0;
}
#mainContent {
  margin-top: 15px;
  padding-bottom: 20px;
  background-image: url(img/img-blue-border.png);
  background-color: #fff;
  background-position: top;
  background-repeat: repeat-x;
}

ここでの作業例。

Answer 4

次の構造を使用します。

<div class="wrapper">
<div class="border"></div>
<div class="content"></div>
<div class="border"></div>
</div>

// CSS

.wrapper div {
clear:both;
}

.border {
 width:100%;
 margin:0;
 padding:0;
 height: //height of image;
 background-image:url(image.png);
 background-repeat:repeat-x;
}