page 背景画像関連

最終更新：2021/07/12

背景画像関連

100%表示用テンプレートでは「style」でWordPressにアップロードした画像を指定していましたが、
LP用テンプレートでは、cssで背景画像を指定することを前提に説明しています。どちらのテンプレートでもクラスは同じように使えます。

背景画像上に白い背景色テキスト

全体を囲んでいる要素に「bg_box_on」のクラスを付ける

「bg_box_on」の上下にpaddingを入れています。タブレット/スマホで背景画像を切り替えています。

「bg_color_w」は白い背景色をつけるクラスです。
上下左右に5%のpaddingを付けています。

html

<div class="bg_box_on">
	<div class="container">
		<div class="bg_color_w">
			<div class="row">
				<div class="col-12">
				  <h2 class="lp_h2">全体を囲んでいる要素に「bg_box_on」のクラスを付ける</h2>
					<p>「bg_box_on」の上下にpaddingを入れています。タブレット/スマホで背景画像を切り替えています。</p>
				  <p>「bg_color_w」は白い背景色をつけるクラスです。<br>上下左右に5%のpaddingを付けています。</p>
				</div>
			</div>
		</div>
	</div>
</div>

<h2 class="lp_h2">全体を囲んでいる要素に「bg_box_on」のクラスを付ける</h2>

<p>「bg_box_on」の上下にpaddingを入れています。タブレット/スマホで背景画像を切り替えています。</p>

<p>「bg_color_w」は白い背景色をつけるクラスです。<br>上下左右に5%のpaddingを付けています。</p>

</div>

css

.bg_box_on{
	background-image: url("../images/page/bg_box_onsp.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	padding-top: 4rem;
	padding-bottom: 4rem;
}
@media screen and (min-width: 992px){
	.bg_box_on{
		background-image: url("../images/page/bg_box_onpc.jpg");
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
}

.bg_box_on{

background-repeat: no-repeat;

background-size: cover;

background-position: center;

width: 100%;

padding-top: 4rem;

padding-bottom: 4rem;

}

@media screen and (min-width: 992px){

.bg_box_on{

padding-top: 6rem;

padding-bottom: 6rem;

}

背景色関連はこちらでまとめています。

背景色関連

背景画像に被った白い背景色テキスト

以下「bg_wear」は共通のクラスです。
白い背景色部分はbootstrap4のクラスで位置を変更しています。

css

.bg_wear{
	position: relative;
	width: 100%;
	padding-top: 120px;
}
.bg_wear::before{
	content: " ";
	background-image: url("../images/page/bg_box_onsp.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	min-height: 200px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
h2.bg_wear_h2{
	padding-top: 40px;

	padding-bottom: 40px;
	text-align: center;
	margin-bottom: 0;
	font-weight: bold;
	letter-spacing: 0.15rem;
	-webkit-filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
	        filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));
	font-size: 1.6rem;
}
h2.bg_wear_h2_w{
	color: #fff;
	padding-top: 40px;
	padding-bottom: 40px;
	text-align: center;
	margin-bottom: 0;
	font-weight: bold;
	letter-spacing: 0.15rem;
	-webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
	        filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));
	font-size: 1.6rem;
}
@media screen and (min-width: 992px){
	.bg_wear{
		padding-top: 200px;
	}
	.bg_wear::before{
		background-image: url("../images/page/bg_box_onpc.jpg");
		min-height: 300px;
	}
	h2.bg_wear_h2,h2.bg_wear_h2_w{
		padding-top: 80px;
		padding-bottom: 80px;
		font-size: 2rem;
	}
}

.bg_wear{

position: relative;

width: 100%;

padding-top: 120px;

}

.bg_wear::before{

content: " ";

background-repeat: no-repeat;

background-size: cover;

background-position: center;

width: 100%;

min-height: 200px;

display: block;

position: absolute;

top: 0;

left: 0;

}

h2.bg_wear_h2{

padding-top: 40px;

padding-bottom: 40px;

text-align: center;

margin-bottom: 0;

font-weight: bold;

letter-spacing: 0.15rem;

-webkit-filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));

filter: drop-shadow(0 0 2px rgba(255,255,255,0.6));

font-size: 1.6rem;

}

h2.bg_wear_h2_w{

color: #fff;

padding-top: 40px;

padding-bottom: 40px;

text-align: center;

margin-bottom: 0;

font-weight: bold;

letter-spacing: 0.15rem;

-webkit-filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));

filter: drop-shadow(0 0 2px rgba(0,0,0,0.6));

font-size: 1.6rem;

}

@media screen and (min-width: 992px){

.bg_wear{

padding-top: 200px;

}

.bg_wear::before{

min-height: 300px;

}

h2.bg_wear_h2,h2.bg_wear_h2_w{

padding-top: 80px;

padding-bottom: 80px;

font-size: 2rem;

}

全体を囲んでいる要素に「bg_wear」のクラスを付ける

今回は「row」でレイアウトしています。
背景色クラスは「col」の中に入れてください。

背景色を付けている部分にある程度の高さが無いと被っているようには見えないと思います。

スマホでは背景色部分を100%の幅にしています。

html

<div class="bg_wear">
  <div class="container2">
    <div class="row">
      <div class="col-md-6 col-12">
        <div class="bg_color_w">
          <h2 class="lp_h2">全体を囲んでいる要素に「bg_wear」のクラスを付ける</h2>
          <p>今回は「row」でレイアウトしています。<br>背景色クラスは「col」の中に入れてください。</p>
			<p>背景色を付けている部分にある程度の高さが無いと被っているようには見えないと思います。</p>
			<p>スマホでは背景色部分を100%の幅にしています。</p>
        </div>
        </div>
      </div>
  </div>
</div>

<h2 class="lp_h2">全体を囲んでいる要素に「bg_wear」のクラスを付ける</h2>

<p>今回は「row」でレイアウトしています。<br>背景色クラスは「col」の中に入れてください。</p>

<p>背景色を付けている部分にある程度の高さが無いと被っているようには見えないと思います。</p>

<p>スマホでは背景色部分を100%の幅にしています。</p>

</div>

「bg_wear」の背景色部分を中央に

背景色のクラスを入れている「col」の親の「row」に「justify-content-center」を付けてください。

スマホでは背景色部分を100%の幅にしています。

<div class="bg_wear">
  <div class="container2">
    <div class="row justify-content-center">
      <div class="col-md-6 col-12">
        <div class="bg_color_w">
          <h2 class="lp_h2">「bg_wear」の背景色部分を中央に</h2>
          <p>背景色のクラスを入れている「col」の親の「row」に「justify-content-center」を付けてください。</p>
		  <p>スマホでは背景色部分を100%の幅にしています。</p>
        </div>
        </div>
      </div>
  </div>
</div>

<h2 class="lp_h2">「bg_wear」の背景色部分を中央に</h2>

<p>背景色のクラスを入れている「col」の親の「row」に「justify-content-center」を付けてください。</p>

<p>スマホでは背景色部分を100%の幅にしています。</p>

</div>

「bg_wear」の背景色部分を右に

背景色のクラスを入れている「col」の親の「row」に「justify-content-end」を付けてください。

スマホでは背景色部分を100%の幅にしています。

<div class="bg_wear">
  <div class="container2">
    <div class="row justify-content-end">
      <div class="col-md-6 col-12">
        <div class="bg_color_w">
          <h2 class="lp_h2">「bg_wear」の背景色部分を中央に</h2>
          <p>背景色のクラスを入れている「col」の親の「row」に「justify-content-end」を付けてください。</p>
		  <p>スマホでは背景色部分を100%の幅にしています。</p>
        </div>
        </div>
      </div>
  </div>
</div>

<h2 class="lp_h2">「bg_wear」の背景色部分を中央に</h2>

<p>背景色のクラスを入れている「col」の親の「row」に「justify-content-end」を付けてください。</p>

<p>スマホでは背景色部分を100%の幅にしています。</p>

</div>

「bg_wear」の背景色部分上にh2見出し

「bg_wear」に「pt-0」を付けてください。
「pt-0」はbootstrap4に搭載されている「padding-top:0」にするクラスです。

h2見出しを背景色を入れているクラスの外に出し、「bg_wear_h2_w」のクラスを付けてください。
「bg_wear_h2_w」の末尾から「_w」を取ると文字が黒くなります。

<div class="bg_wear pt-0">
  <div class="container2">
    <div class="row justify-content-center">
      <div class="col-md-6 col-12">
          <h2 class="bg_wear_h2_w">「bg_wear」の背景色部分上にh2見出し</h2>
        <div class="bg_color_w">
          <p>「bg_wear」に「pt-0」を付けてください。<br>「pt-0」はbootstrap4に搭載されている「padding-top:0」にするクラスです。</p>
			<p>h2見出しを背景色を入れているクラスの外に出し、「bg_wear_h2_w」のクラスを付けてください。<br>「bg_wear_h2_w」の末尾から「_w」を取ると文字が黒くなります。</p>
        </div>
        </div>
      </div>
  </div>
</div>

<h2 class="bg_wear_h2_w">「bg_wear」の背景色部分上にh2見出し</h2>

<p>「bg_wear」に「pt-0」を付けてください。<br>「pt-0」はbootstrap4に搭載されている「padding-top:0」にするクラスです。</p>

<p>h2見出しを背景色を入れているクラスの外に出し、「bg_wear_h2_w」のクラスを付けてください。<br>「bg_wear_h2_w」の末尾から「_w」を取ると文字が黒くなります。</p>

</div>

画像とテキスト半々

こちらの背景画像を使う版です。

画像とテキスト半々画像

「.scl_box1」「.scl_box2」は今回共通で使っているところがあります。
「.scl_box1」「.scl_box2」に直接プロパティを指定せず、親要素のクラスを指定し、その中の「.scl_box1」「.scl_box2」に装飾してください。

「div.swap_continuous>div.scl_box1+div.scl_box2」で作ってください。

「scl_box1」には背景画像を指定しています。
「scl_box2」はテキスト用です。
スマホでは画像が上になります。

html

<div class="swap_continuous">
	<div class="scl_box1"></div>
	<div class="scl_box2">
		<h2 class="lp_h2">「div.swap_continuous>div.scl_box1+div.scl_box2」で作ってください。</h2>
		<p>「scl_box1」には背景画像を指定しています。<br>「scl_box2」はテキスト用です。<br>スマホでは画像が上になります。</p>
	</div>
</div>

<h2 class="lp_h2">「div.swap_continuous>div.scl_box1+div.scl_box2」で作ってください。</h2>

<p>「scl_box1」には背景画像を指定しています。<br>「scl_box2」はテキスト用です。<br>スマホでは画像が上になります。</p>

</div>

css

.swap_continuous{
	width: 100%;
}
.swap_continuous .scl_box1{
	width: 100%;
	min-height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl01.jpg");
}
.swap_continuous .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous{
		display: flex;
	}
	.swap_continuous .scl_box1{
		width: 50%;
	}
	.swap_continuous .scl_box2{
		width: 50%;
		padding: 5%;
	}
}

.swap_continuous{

width: 100%;

}

.swap_continuous .scl_box1{

width: 100%;

min-height: 200px;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.swap_continuous .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous{

display: flex;

}

.swap_continuous .scl_box1{

width: 50%;

}

.swap_continuous .scl_box2{

width: 50%;

padding: 5%;

}

画像とテキスト半々順番変更と背景色

「swap_continuous」末尾に「_order」をつけてください。
「scl_box1」と「scl_box2」の場所が入れ替わります。

「swap_continuous」もしくは「swap_continuous_order」に「sc_bg_color_b」のクラスを付けてください。
「sc_bg_color_b」の中の「scl_box2」に背景色が付きます。

「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。

html

<div class="swap_continuous_order sc_bg_color_b">
	<div class="scl_box1"></div>
	<div class="scl_box2">
		<h2 class="lp_h2">画像とテキスト半々順番変更と背景色</h2>
		<p>「swap_continuous」末尾に「_order」をつけてください。<br>「scl_box1」と「scl_box2」の場所が入れ替わります。</p>
		    <p>「swap_continuous」もしくは「swap_continuous_order」に「sc_bg_color_b」のクラスを付けてください。<br>「sc_bg_color_b」の中の「scl_box2」に背景色が付きます。</p>
		    <p>「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。</p>
	</div>
</div>

<h2 class="lp_h2">画像とテキスト半々順番変更と背景色</h2>

<p>「swap_continuous」末尾に「_order」をつけてください。<br>「scl_box1」と「scl_box2」の場所が入れ替わります。</p>

<p>「swap_continuous」もしくは「swap_continuous_order」に「sc_bg_color_b」のクラスを付けてください。<br>「sc_bg_color_b」の中の「scl_box2」に背景色が付きます。</p>

<p>「sc_bg_color_b」は背景色白色で文字は白くなり、末尾の「_b」を「_g」にすれば背景色灰、「_w」にすれば背景色白になります。</p>

</div>

css

.swap_continuous_order{
	width: 100%;
}
.swap_continuous_order .scl_box1{
	width: 100%;
	min-height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl02.jpg");
}
.swap_continuous_order .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous_order{
		display: flex;
	}
	.swap_continuous_order .scl_box1{
		width: 50%;
		order: 2
	}
	.swap_continuous_order .scl_box2{
		width: 50%;
		padding: 5%;
		order: 1;
	}
}

.swap_continuous_order{

width: 100%;

}

.swap_continuous_order .scl_box1{

width: 100%;

min-height: 200px;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.swap_continuous_order .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous_order{

display: flex;

}

.swap_continuous_order .scl_box1{

width: 50%;

order: 2

}

.swap_continuous_order .scl_box2{

width: 50%;

padding: 5%;

order: 1;

}

.swap_continuous テキスト背景色

/****** .swap_continuous テキスト背景色 ******/
.sc_bg_color_b .scl_box2{
	background-color: #000;
	color: #fff;
}
.sc_bg_color_g .scl_box2{
	background-color: #ccc;
}
.sc_bg_color_w .scl_box2{
	background-color: #fff;
}

/****** .swap_continuous テキスト背景色 ******/

.sc_bg_color_b .scl_box2{

background-color: #000;

color: #fff;

}

.sc_bg_color_g .scl_box2{

background-color: #ccc;

}

.sc_bg_color_w .scl_box2{

background-color: #fff;

}

画像とテキストを順番を入れ替えながら連続

左に画像・右にテキストの並びを、左右を入れ替えながら連続で表示します。

「ul.swap_continuous_li>li>div.scl_box1+div.scl_box2」で作ってください。
「scl_box1」には背景画像を指定しています。
「scl_box2」はテキスト用です。
スマホでは画像が上になります。

偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。
画像部分について

テキスト部分の高さに合わせ自動で切り抜かれます。
そのため、表示したい部分がちょっと切れるなどの弊害がありますが、高さを合わせるのが楽なので背景画像で作っています。
絶対に表示させたい部分は画像の中心に持ってきたら何とかなるかとは思います。
スマホでは幅100%・高さ200pxです。

「scl_box1」に背景画像を指定せずに画像を入れても大丈夫ではありますが、
テキスト部分の高さが画像の高さより高くなる場合、左右の高さは合わなくなると思います。
テキスト部分について

上下左右に5%のpadding、スマホだとpaddingが上左右は5%・下は8%になります。

html

<ul class="swap_continuous_li">
	<li>
		<div class="scl_box1"></div>
		<div class="scl_box2">
		  <div>
		    <h2 class="lp_h2">画像とテキストを順番を入れ替えながら連続</h2>
		    <p>左に画像・右にテキストの並びを、左右を入れ替えながら連続で表示します。</p>
			  <p>「ul.swap_continuous_li&gt;li&gt;div.scl_box1+div.scl_box2」で作ってください。<br>「scl_box1」には背景画像を指定しています。<br>「scl_box2」はテキスト用です。<br>スマホでは画像が上になります。</p>
			  <p>偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。</p>
	      </div>
		</div>
	</li>
	<li>
		<div class="scl_box1"></div>
		<div class="scl_box2">
		  <div>
		    <h2 class="lp_h2">画像部分について</h2>
			  <p>テキスト部分の高さに合わせ自動で切り抜かれます。<br>そのため、表示したい部分がちょっと切れるなどの弊害がありますが、高さを合わせるのが楽なので背景画像で作っています。<br>絶対に表示させたい部分は画像の中心に持ってきたら何とかなるかとは思います。<br>スマホでは幅100%・高さ200pxです。</p>
			  <p>「scl_box1」に背景画像を指定せずに画像を入れても大丈夫ではありますが、<br>テキスト部分の高さが画像の高さより高くなる場合、左右の高さは合わなくなると思います。</p>
	      </div>

	  </div>
	</li>
	<li>
		<div class="scl_box1"></div>
		<div class="scl_box2">
		  <div>
		    <h2 class="lp_h2">テキスト部分について</h2>
		    <p>上下左右に5%のpadding、スマホだとpaddingが上左右は5%・下は8%になります。</p>
	      </div>
		</div>
	</li>
</ul>

<li>

<div>

<h2 class="lp_h2">画像とテキストを順番を入れ替えながら連続</h2>

<p>左に画像・右にテキストの並びを、左右を入れ替えながら連続で表示します。</p>

<p>「ul.swap_continuous_li>li>div.scl_box1+div.scl_box2」で作ってください。<br>「scl_box1」には背景画像を指定しています。<br>「scl_box2」はテキスト用です。<br>スマホでは画像が上になります。</p>

<p>偶数番目のliの「scl_box1」「scl_box2」は順番が逆になります。</p>

</div>

</li>

<li>

<div>

<h2 class="lp_h2">画像部分について</h2>

<p>テキスト部分の高さに合わせ自動で切り抜かれます。<br>そのため、表示したい部分がちょっと切れるなどの弊害がありますが、高さを合わせるのが楽なので背景画像で作っています。<br>絶対に表示させたい部分は画像の中心に持ってきたら何とかなるかとは思います。<br>スマホでは幅100%・高さ200pxです。</p>

<p>「scl_box1」に背景画像を指定せずに画像を入れても大丈夫ではありますが、<br>テキスト部分の高さが画像の高さより高くなる場合、左右の高さは合わなくなると思います。</p>

</div>

</li>

<li>

<div>

<h2 class="lp_h2">テキスト部分について</h2>

<p>上下左右に5%のpadding、スマホだとpaddingが上左右は5%・下は8%になります。</p>

</div>

</li>

</ul>

css

.swap_continuous_li_img{
	width: 100%;
}
.swap_continuous_li_img{
	list-style: none;
}
.swap_continuous_li_img .scl_box1{
	width: 100%;
}
.swap_continuous_li_img .scl_box1 img{
	max-width: 100%;
	height: auto;
}
.swap_continuous_li_img .scl_box2{
	padding: 5% 5% 8%;
}
@media screen and (min-width: 768px){
	.swap_continuous_li_img li{
		display: flex;
	}
	.swap_continuous_li_img .scl_box1{
		width: 50%;
	}
	.swap_continuous_li_img .scl_box2{
		width: 50%;
		padding: 5%;
		display: flex;
		align-items: center;
	}
	.swap_continuous_li_img.scl_box2>div{
		width: 100%;
	}
	.swap_continuous_li_img li:nth-child(even) .scl_box1{
		order: 2;
	}
	.swap_continuous_li_img li:nth-child(even) .scl_box2{
		order: 1;
	}
}

.swap_continuous_li_img{

width: 100%;

}

.swap_continuous_li_img{

list-style: none;

}

.swap_continuous_li_img .scl_box1{

width: 100%;

}

.swap_continuous_li_img .scl_box1 img{

max-width: 100%;

height: auto;

}

.swap_continuous_li_img .scl_box2{

padding: 5% 5% 8%;

}

@media screen and (min-width: 768px){

.swap_continuous_li_img li{

display: flex;

}

.swap_continuous_li_img .scl_box1{

width: 50%;

}

.swap_continuous_li_img .scl_box2{

width: 50%;

padding: 5%;

display: flex;

align-items: center;

}

.swap_continuous_li_img.scl_box2>div{

width: 100%;

}

.swap_continuous_li_img li:nth-child(even) .scl_box1{

order: 2;

}

.swap_continuous_li_img li:nth-child(even) .scl_box2{

order: 1;

}

画像にテキストが被る

状況に合わせて調整してください。

画像は背景画像をposition:absoluteで動かしています。
画像の幅やテキストの量によっては画像と被らないかもしれません。
画像の幅やテキスト量は適宜調整をお願いします。
rowで括ることを想定して作成しています。
「toi_bg」はrowの子要素ではなく兄弟要素にしてください。

html

		  <div class="txt_on_img">
			<div class="toi_bg"></div>
				<div class="row">
				  <div class="col-9 col-md-12">
				    <h2>状況に合わせて調整してください。</h2>
				    <p>画像は背景画像をposition:absoluteで動かしています。<br>画像の幅やテキストの量によっては画像と被らないかもしれません。<br>画像の幅やテキスト量は適宜調整をお願いします。<br>rowで括ることを想定して作成しています。<br>「toi_bg」はrowの子要素ではなく兄弟要素にしてください。</p>
			      </div>
			</div>
			</div>

<h2>状況に合わせて調整してください。</h2>

<p>画像は背景画像をposition:absoluteで動かしています。<br>画像の幅やテキストの量によっては画像と被らないかもしれません。<br>画像の幅やテキスト量は適宜調整をお願いします。<br>rowで括ることを想定して作成しています。<br>「toi_bg」はrowの子要素ではなく兄弟要素にしてください。</p>

</div>

css

.txt_on_img{
	position: relative;
	width: 100%;
	padding-top: 3rem;
	padding-bottom: 2rem;
	z-index: 1;
}
.toi_bg{
	position: absolute;
	top: 0;
	right: 0;
	width: 65%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl01.jpg");
	z-index: -1;
}
.txt_on_img h2{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}
.txt_on_img p{
	line-height: 2;
}
@media screen and (min-width: 1200px){
	.txt_on_img{
		padding-left: 3%;
		padding-top: 4rem;
		padding-bottom: 3rem;
	}
	.toi_bg{
		width: 68%;
	}
	.txt_on_img h2{
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
}

.txt_on_img{

position: relative;

width: 100%;

padding-top: 3rem;

padding-bottom: 2rem;

z-index: 1;

}

.toi_bg{

position: absolute;

top: 0;

right: 0;

width: 65%;

height: 100%;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

z-index: -1;

}

.txt_on_img h2{

font-size: 1.6rem;

font-weight: bold;

line-height: 1.4;

margin-bottom: 1.5rem;

}

.txt_on_img p{

line-height: 2;

}

@media screen and (min-width: 1200px){

.txt_on_img{

padding-left: 3%;

padding-top: 4rem;

padding-bottom: 3rem;

}

.toi_bg{

width: 68%;

}

.txt_on_img h2{

font-size: 2rem;

letter-spacing: 0.15rem;

}

順番入れ替え

「txt_on_img」「toi_bg」の末尾に「_right」を付けてください。
今回のテキスト部分はoffsetで順番が変わったように見せています。
「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。

html

		  <div class="txt_on_img_right">
			<div class="toi_bg_right"></div>
				<div class="row">
				  <div class="col-9 offset-3 col-md-6 offset-md-6 col-lg-5 offset-lg-7">
				    <h2>順番入れ替え</h2>
				    <p>「txt_on_img」「toi_bg」の末尾に「_right」を付けてください。<br>今回のテキスト部分はoffsetで順番が変わったように見せています。<br>「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。</p>
			      </div>
			</div>
			</div>

<h2>順番入れ替え</h2>

<p>「txt_on_img」「toi_bg」の末尾に「_right」を付けてください。<br>今回のテキスト部分はoffsetで順番が変わったように見せています。<br>「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。</p>

</div>

css

.txt_on_img_right{
	position: relative;
	width: 100%;
	padding-top: 3rem;
	padding-bottom: 2rem;
	z-index: 1;
}
.toi_bg_right{
	position: absolute;
	top: 0;
	left: 0;
	width: 65%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl01.jpg");
	z-index: -1;
}
.txt_on_img_right h2{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}
.txt_on_img_right p{
	line-height: 2;
}
@media screen and (min-width: 1200px){
	.txt_on_img_right{
		padding-top: 4rem;
		padding-bottom: 3rem;
	}
	.toi_bg_right{
		width: 68%;
	}
	.txt_on_img_right h2{
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
}

.txt_on_img_right{

position: relative;

width: 100%;

padding-top: 3rem;

padding-bottom: 2rem;

z-index: 1;

}

.toi_bg_right{

position: absolute;

top: 0;

left: 0;

width: 65%;

height: 100%;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

z-index: -1;

}

.txt_on_img_right h2{

font-size: 1.6rem;

font-weight: bold;

line-height: 1.4;

margin-bottom: 1.5rem;

}

.txt_on_img_right p{

line-height: 2;

}

@media screen and (min-width: 1200px){

.txt_on_img_right{

padding-top: 4rem;

padding-bottom: 3rem;

}

.toi_bg_right{

width: 68%;

}

.txt_on_img_right h2{

font-size: 2rem;

letter-spacing: 0.15rem;

}

画像にテキストが被るスマホでは被らない

状況に合わせて調整してください。

「txt_on_img」「toi_bg」の末尾に「_pc」と付けてください。
PCではテキストと画像が被っていますが、スマホでは被らないです。
スマホでの画像は幅100%高さ200px程度にしています。

html

		  <div class="txt_on_img_pc">
			<div class="toi_bg_pc"></div>
				<div class="row">
				  <div class="col-12">
				    <h2>状況に合わせて調整してください。</h2>
				    <p>「txt_on_img」「toi_bg」の末尾に「_pc」と付けてください。<br>PCではテキストと画像が被っていますが、スマホでは被らないです。<br>スマホでの画像は幅100%高さ200px程度にしています。</p>
			      </div>
			</div>
			</div>

<h2>状況に合わせて調整してください。</h2>

<p>「txt_on_img」「toi_bg」の末尾に「_pc」と付けてください。<br>PCではテキストと画像が被っていますが、スマホでは被らないです。<br>スマホでの画像は幅100%高さ200px程度にしています。</p>

</div>

css

.txt_on_img_pc{
	position: relative;
	width: 100%;
	padding-top: 220px;
}
.toi_bg_pc{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	min-height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl01.jpg");
}
.txt_on_img_pc h2{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px){
.txt_on_img_pc{
	padding-top: 3rem;
	padding-bottom: 2rem;
	z-index: 1;
}
.toi_bg_pc{
	width: 65%;
	height: 100%;
	z-index: -1;
}
.txt_on_img_pc p{
	line-height: 2;
}
}
@media screen and (min-width: 1200px){
	.txt_on_img_pc{
		padding-left: 3%;
		padding-top: 4rem;
		padding-bottom: 3rem;
	}
	.toi_bg_pc{
		width: 68%;
		min-height: 1px;
	}
	.txt_on_img_pc h2{
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
}

.txt_on_img_pc{

position: relative;

width: 100%;

padding-top: 220px;

}

.toi_bg_pc{

position: absolute;

top: 0;

right: 0;

width: 100%;

min-height: 200px;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.txt_on_img_pc h2{

font-size: 1.6rem;

font-weight: bold;

line-height: 1.4;

margin-bottom: 1.5rem;

}

@media screen and (min-width: 768px){

.txt_on_img_pc{

padding-top: 3rem;

padding-bottom: 2rem;

z-index: 1;

}

.toi_bg_pc{

width: 65%;

height: 100%;

z-index: -1;

}

.txt_on_img_pc p{

line-height: 2;

}

@media screen and (min-width: 1200px){

.txt_on_img_pc{

padding-left: 3%;

padding-top: 4rem;

padding-bottom: 3rem;

}

.toi_bg_pc{

width: 68%;

min-height: 1px;

}

.txt_on_img_pc h2{

font-size: 2rem;

letter-spacing: 0.15rem;

}

順番入れ替え

「txt_on_img_pc」「toi_bg_pc」の末尾に「_right」を付けてください。
今回のテキスト部分はoffsetで順番が変わったように見せています。
「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。

html

		  <div class="txt_on_img_right_pc">
			<div class="toi_bg_right_pc"></div>
				<div class="row">
				  <div class="col-12 col-md-6 offset-md-6 col-lg-5 offset-lg-7">
				    <h2>順番入れ替え</h2>
				    <p>「txt_on_img_pc」「toi_bg_pc」の末尾に「_right」を付けてください。<br>今回のテキスト部分はoffsetで順番が変わったように見せています。<br>「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。</p>
			      </div>
			</div>
			</div>

<h2>順番入れ替え</h2>

<p>「txt_on_img_pc」「toi_bg_pc」の末尾に「_right」を付けてください。<br>今回のテキスト部分はoffsetで順番が変わったように見せています。<br>「bg_wear」の項目でやった方法でも順番が変わったように見せられると思うのでやりやすい方で対応してください。</p>

</div>

css

.txt_on_img_right_pc{
	position: relative;
	width: 100%;
	padding-top: 220px;
}
.toi_bg_right_pc{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 200px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url("../images/page/bg_scl01.jpg");
}
.txt_on_img_right_pc h2{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 1.5rem;
}
@media screen and (min-width: 768px){
.txt_on_img_right_pc{
	padding-top: 3rem;
	padding-bottom: 2rem;
	z-index: 1;
}
.toi_bg_right_pc{
	width: 65%;
	height: 100%;
	z-index: -1;
}
.txt_on_img_right_pc p{
	line-height: 2;
}
}
@media screen and (min-width: 1200px){
	.txt_on_img_right_pc{
		padding-top: 4rem;
		padding-bottom: 3rem;
	}
	.toi_bg_right_pc{
		width: 68%;
		min-height: 1px;
	z-index: -1;
		height: 100%;
	}
	.txt_on_img_right_pc h2{
		font-size: 2rem;
		letter-spacing: 0.15rem;
	}
}

.txt_on_img_right_pc{

position: relative;

width: 100%;

padding-top: 220px;

}

.toi_bg_right_pc{

position: absolute;

top: 0;

left: 0;

width: 100%;

min-height: 200px;

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

.txt_on_img_right_pc h2{

font-size: 1.6rem;

font-weight: bold;

line-height: 1.4;

margin-bottom: 1.5rem;

}

@media screen and (min-width: 768px){

.txt_on_img_right_pc{

padding-top: 3rem;

padding-bottom: 2rem;

z-index: 1;

}

.toi_bg_right_pc{

width: 65%;

height: 100%;

z-index: -1;

}

.txt_on_img_right_pc p{

line-height: 2;

}

@media screen and (min-width: 1200px){

.txt_on_img_right_pc{

padding-top: 4rem;

padding-bottom: 3rem;

}

.toi_bg_right_pc{

width: 68%;

min-height: 1px;

z-index: -1;

height: 100%;

}

.txt_on_img_right_pc h2{

font-size: 2rem;

letter-spacing: 0.15rem;

}

振り分けページへ戻る

トップへ戻る

page 背景画像関連

背景画像関連

背景画像上に白い背景色テキスト

全体を囲んでいる要素に「bg_box_on」のクラスを付ける

背景画像に被った白い背景色テキスト

全体を囲んでいる要素に「bg_wear」のクラスを付ける

「bg_wear」の背景色部分を中央に

「bg_wear」の背景色部分を右に

「bg_wear」の背景色部分上にh2見出し

画像とテキスト半々

「div.swap_continuous>div.scl_box1+div.scl_box2」で作ってください。

画像とテキスト半々順番変更と背景色

画像とテキストを順番を入れ替えながら連続

画像部分について

テキスト部分について

画像にテキストが被る

状況に合わせて調整してください。

順番入れ替え

画像にテキストが被る スマホでは被らない

状況に合わせて調整してください。

順番入れ替え

画像にテキストが被るスマホでは被らない