クリエイター：コーディング備忘録ブログ

RSS

コーディング

backgroundに複数の画像・背景色を入れる

2018.05.28

背景に複数の画像・背景色を入れたいと以下の場面で思うことがあります。

①画像を二つ入れる
例：2カラムのサイトを作成するとき左のサブカテゴリー内で[画像・文字・矢印]としたい

②画像と背景色を入れる
例：背景に色をつけつつ、画像も入れたい

今日はこの２場面に対してのスタイルの付け方をまとめます。

<!--　①画像を二つ入れる  -->
<html>
    <h1> タイトル </h1>
</html>

<style>
    h1{
    background: url(), url();
}
</style>

<!--　②画像と背景色を入れる  -->
<html>
    <h1> タイトル </h1>
</html>

<style>
    h1{
    background: #ccc url();
}
</style>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<html>

<h1> タイトル </h1>

</html>

<style>

h1{

background: url(), url();

}

</style>

<html>

<h1> タイトル </h1>

</html>

<style>

h1{

background: #ccc url();

}

</style>

【特徴】
・①はカンマが必要。
　②はカンマが不要です。
・わざわざ、背景用のdivを入れる必要がなくなる。

シンプルなコードを目指します。

SMACSS

前の記事

WPをスマートフォンで編集

次の記事

コメント

0 コメント
0 トラックバック

この記事へのコメントはありません。

最近の投稿

アーカイブ

RELATED

コーディング

CSSでトリミング　object-fit

2018.07.25

コーディング

CSSの%継承

2017.07.26

コーディング

Fireworksの拡張

2017.11.17

コーディング

WordPressのヘッダーロゴサイズ合わせる

2021.07.07

コーディング

Thunderbird アカウントを追加

2021.08.19

コーディング

border の幅分ボックスからはみ出たときの対処

2017.08.14