ある部分の文章に背景をつける場合。
文章の長さに合わせて背景画像の大きさが自動的に変わる方法。
吹き出しなどに便利かも?
html
<div class="kakudai block" style="background-image:url(背景画像.png)">
<div class="block" style="padding:10px 20px 10px 20px">
ここに文章を入力<br />
改行したら、1番長い幅に合わせて画像も大きくなります<br />
</div>
</div>
paddingを変更することで、文字の周りの空白を調節できます。
/* 背景画像を縦横比を保たずに拡大する */
.kakudai{
-moz-background-size:100% 100%;
background-size:100% 100%;
}
/* 横幅を文字幅に合わせる */
.block{
display:inline-block;
}
こんな感じになりました。
背景が濃くて文字が見にくかったので、文字に縁取りをしてみました。
↓をcssに付け足しします。
.fuchidori{
font-weight: bold;
text-shadow: 1px 1px 1px #FFFFFF,
-1px 1px 1px #FFFFFF,
1px -1px 1px #FFFFFF,
-1px -1px 1px #FFFFFF;
}
htmlは、クラスだけ書き足しました。(fuchidori)
<div class="kakudai block" style="background-image:url(img/babytuba/niziiro.png)">
<div class="block fuchidori" style="padding:10px 20px 10px 20px">
ここに文章を入力<br />
改行したら、1番長い幅に合わせて画像も大きくなります<br />
</div>
</div>
文字が読みやすくなりました。
10日で作るかっこいいホームページ Jimdo(ジンドゥー)デザインブック
- 作者: 赤間公太郎(JimdoExpert),株式会社KDDIウェブコミュニケーションズ
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2014/10/24
- メディア: 単行本
- この商品を含むブログを見る