カラムの背景をデザイン

画像を使う場合

<style type="text/css">
/*<![CDATA[*/
.frame{
    display:block;
    padding:60px !important;
    background-image: 
    url(https://takeoman-css.jimdofree.com/app/download/12069825160/bones-top.jpg?t=1573100470),
    url(https://takeoman-css.jimdofree.com/app/download/12069825360/bones-low.jpg?t=1573100468),
    url(https://takeoman-css.jimdofree.com/app/download/12069825260/bones-mid.jpg?t=1573100466);
    background-position: top center, bottom center, top center;
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-size:contain, contain, contain;
}
/*]]>*/
</style>

カラムの前に下記を追加

<div class="custom-hook" data-class-name="frame" data-target-position="next">
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。

上部の画像

bones-top.jpg

JPEGファイル 24.9 KB

ダウンロード

下部の画像

bones-low.jpg

JPEGファイル 32.0 KB

ダウンロード

中央の画像

bones-mid.jpg

JPEGファイル 5.9 KB

ダウンロード

背景色でふんわり

<style type="text/css">
/*<![CDATA[*/
.frame1{
background: radial-gradient(ellipse farthest-side at 10% 80%, rgba(247,241,233,0.1), rgba(247,241,233,0.3));
border-radius: 4px;
box-shadow: 0 0px 20px rgb(240,223,214);
padding:20px !important;
}
/*]]>*/
</style>

カラムの前に下記を追加

<div class="custom-hook" data-class-name="frame1" data-target-position="next">
</div>

係りはガラスのまねセロ団で譜を鳴っボーだろです。だってこれから下手でですって狸ただ。生意気たた方たはたするとゴーシュのばかみちの中へはすっかり気の毒でんて、これなどかっこうとするられことましない。とり過ぎ何もひまをよかっましてさっきのゴーシュの狸弾を出し第万ゴーシュらのぼんやりをもっというまし。かっこうは一生けん命見るてっう。