100%表示用背景

最終更新：2021/06/17

cssは「page.css」を使用しています。
背景画像・色はstyleで入れるのを前提にしています。

背景画像基本

背景画像が暗い場合

背景画像基本

背景画像を付けたい要素を「div」で囲んで、そのdivに「class=”page-bgimg” style=”background-image: url()”」を付けてください。
「url()」の()にWordPressにアップロードした画像URLを入れてください。

PCで100%にする場合、画像の幅は1900px程度あるとボケづらいです。

背景画像では「pc_画像名.jpg」「sp_画像名.jpg」の切り替えは効きません。

html

<div class="page-bgimg" style="background-image: url(http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg_w.jpg)">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2>背景画像</h2>
				<p>背景画像を付けたい要素を「div」で囲んで、そのdivに「class="page-bgimg" style="background-image: url()"」を付けてください。<br>「url()」の()にWordPressにアップロードした画像URLを入れてください。</p>
				<p>PCで100%にする場合、画像の幅は1900px程度あるとボケづらいです。</p>
				<p>背景画像では「pc_画像名.jpg」「sp_画像名.jpg」の切り替えは効きません。</p>
			</div>
		</div>
	</div>
</div>

<p>背景画像を付けたい要素を「div」で囲んで、そのdivに「class="page-bgimg" style="background-image: url()"」を付けてください。<br>「url()」の()にWordPressにアップロードした画像URLを入れてください。</p>

<p>PCで100%にする場合、画像の幅は1900px程度あるとボケづらいです。</p>

<p>背景画像では「pc_画像名.jpg」「sp_画像名.jpg」の切り替えは効きません。</p>

</div>

css

.page-bgimg{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 60px 0 50px;
}

.page-bgimg{

background-size: cover;

background-repeat: no-repeat;

background-position: center;

padding: 60px 0 50px;

}

背景画像背景が暗い場合

背景画像を付けたい要素を「div」で囲んで、そのdivに「class=”page-bgimg-w” style=”background-image: url()”」を付けてください。
「url()」の()にWordPressにアップロードした画像URLを入れてください。

「page-bgimg-w」のクラスだと、テキストの色が白くなります。aタグなどではテキストの色が変わらない場合があります。

html

<div class="page-bgimg-w" style="background-image: url(http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg_b.jpg)">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<h2>背景画像 背景が暗い場合</h2>
				<p>背景画像を付けたい要素を「div」で囲んで、そのdivに「class="page-bgimg-w" style="background-image: url()"」を付けてください。<br>「url()」の()にWordPressにアップロードした画像URLを入れてください。</p>
				<p>「page-bgimg-w」のクラスだと、テキストの色が白くなります。aタグなどではテキストの色が変わらない場合があります。</p>
			</div>
		</div>
	</div>
</div>

<h2>背景画像背景が暗い場合</h2>

<p>背景画像を付けたい要素を「div」で囲んで、そのdivに「class="page-bgimg-w" style="background-image: url()"」を付けてください。<br>「url()」の()にWordPressにアップロードした画像URLを入れてください。</p>

<p>「page-bgimg-w」のクラスだと、テキストの色が白くなります。aタグなどではテキストの色が変わらない場合があります。</p>

</div>

css

.page-bgimg-w{
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	padding: 60px 0 50px;
	color: #fff;
}

.page-bgimg-w{

background-size: cover;

background-repeat: no-repeat;

background-position: center;

padding: 60px 0 50px;

color: #fff;

}

PCで画像上に文字、スマホで画像下に文字

全体を「.page-bgimg-pc」クラスで囲み、
画像を「.bg-pc」で、テキストを「.bg-pc-text」で囲んでください。
div.page-bgimg-pc>div.bg-pc+div.bg-pc-text

html

<div class="page-bgimg-pc">
	<div class="bg-pc"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg_w.jpg" alt=""></div>
	<div class="bg-pc-text">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <h2>PCで画像上に文字、スマホで画像下に文字</h2>
            <p>全体を「.page-bgimg-pc」クラスで囲み、<br>画像を「.bg-pc」で、テキストを「.bg-pc-text」で囲んでください。<br>div.page-bgimg-pc>div.bg-pc+div.bg-pc-text</p>
          </div>
        </div>
      </div>
	</div>
</div>

<h2>PCで画像上に文字、スマホで画像下に文字</h2>

<p>全体を「.page-bgimg-pc」クラスで囲み、<br>画像を「.bg-pc」で、テキストを「.bg-pc-text」で囲んでください。<br>div.page-bgimg-pc>div.bg-pc+div.bg-pc-text</p>

</div>

css

.page-bgimg-pc{
	position: relative;
	width: 100%;
}
.bg-pc{
	width: 100%;
	position: absolute;
	height: 100%;
}
.bg-pc img{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
#page-main .bg-pc img{
	height: 100%;
}
.bg-pc-text{
	position: relative;
	padding: 60px 0 50px;
}
@media screen and (max-width: 768px){
	.bg-pc{
		position: relative;
		height: auto;
	}
	#page-main .bg-pc img{
		height: auto;
	}
.bg-pc-text{
	position: relative;
	padding: 30px 0 0px;
}
}

.page-bgimg-pc{

position: relative;

width: 100%;

}

.bg-pc{

width: 100%;

position: absolute;

height: 100%;

}

.bg-pc img{

width: 100%;

height: 100%;

-o-object-fit: cover;

object-fit: cover;

}

#page-main .bg-pc img{

height: 100%;

}

.bg-pc-text{

position: relative;

padding: 60px 0 50px;

}

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

.bg-pc{

position: relative;

height: auto;

}

#page-main .bg-pc img{

height: auto;

}

.bg-pc-text{

position: relative;

padding: 30px 0 0px;

}

PCで画像上に文字、スマホで画像下に文字2

全体を「.page-bgimg-pc」クラスで囲み、
画像を「.bg-pc」で、
文字を白くする場合はテキストを「.bg-pc-text-w」で囲んでください。
スマホでは文字は黒くなります。

html

<div class="page-bgimg-pc">
	<div class="bg-pc"><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg_b.jpg" alt=""></div>
	<div class="bg-pc-text-w">
      <div class="container">
        <div class="row">
          <div class="col-sm-12">
            <h2>PCで画像上に文字、スマホで画像下に文字2</h2>
            <p>全体を「.page-bgimg-pc」クラスで囲み、<br>画像を「.bg-pc」で、<br>文字を白くする場合はテキストを「.bg-pc-text-w」で囲んでください。<br>スマホでは文字は黒くなります。</p>
          </div>
        </div>
      </div>
	</div>
</div>

<h2>PCで画像上に文字、スマホで画像下に文字2</h2>

<p>全体を「.page-bgimg-pc」クラスで囲み、<br>画像を「.bg-pc」で、<br>文字を白くする場合はテキストを「.bg-pc-text-w」で囲んでください。<br>スマホでは文字は黒くなります。</p>

</div>

css

.page-bgimg-pc{
	position: relative;
	width: 100%;
}
.bg-pc{
	width: 100%;
	position: absolute;
	height: 100%;
}
.bg-pc img{
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
}
#page-main .bg-pc img{
	height: 100%;
}
.bg-pc-text-w{
	position: relative;
	padding: 60px 0 50px;
	color: #fff;
}
@media screen and (max-width: 768px){
	.bg-pc{
		position: relative;
		height: auto;
	}
	#page-main .bg-pc img{
		height: auto;
	}
	.bg-pc-text-w{
		color: #000;
		padding: 30px 0 0px;
	}
}

.page-bgimg-pc{

position: relative;

width: 100%;

}

.bg-pc{

width: 100%;

position: absolute;

height: 100%;

}

.bg-pc img{

width: 100%;

height: 100%;

-o-object-fit: cover;

object-fit: cover;

}

#page-main .bg-pc img{

height: 100%;

}

.bg-pc-text-w{

position: relative;

padding: 60px 0 50px;

color: #fff;

}

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

.bg-pc{

position: relative;

height: auto;

}

#page-main .bg-pc img{

height: auto;

}

.bg-pc-text-w{

color: #000;

padding: 30px 0 0px;

}

100%で画像を入れたい場合

そのまま普段の感じで画像を入れたら大丈夫です。（画面幅以上のサイズで画像を作成してください。）
画像が画面幅以上のサイズで作られていない場合、100%表示にはならず、画像本来のサイズまでしか幅が埋まらないと思います。

html

<p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg.jpg" alt=""></p>

1	<p><img src="http://mgm.moo.jp/cms010/wp-content/uploads/2021/06/bgimg.jpg" alt=""></p>

背景色

背景色を付けたい要素を「div」で囲んで「style=”background-color: ;”」で囲んでください。
style=”background-color: ;”」の「: ;」の間に色の指定をしてください。
フォトショップのカラーピッカーで色を選ぶと、RGBの下に「#ffffff」と出るところがあるので、それをコピペするといいと思います。

html

<div style="background-color: #EEEEEE;padding-top: 40px;padding-bottom: 30px;">
  <div class="container">
  <div class="row">
    <div class="col-12">
      <h2>背景色</h2>
      <p>背景色を付けたい要素を「div」で囲んで「style="background-color: ;"」で囲んでください。<br>style="background-color: ;"」の「: ;」の間に色の指定をしてください。<br>フォトショップのカラーピッカーで色を選ぶと、RGBの下に「#ffffff」と出るところがあるので、それをコピペするといいと思います。</p>
      </div>
  </div>
  </div>
</div>

<p>背景色を付けたい要素を「div」で囲んで「style="background-color: ;"」で囲んでください。<br>style="background-color: ;"」の「: ;」の間に色の指定をしてください。<br>フォトショップのカラーピッカーで色を選ぶと、RGBの下に「#ffffff」と出るところがあるので、それをコピペするといいと思います。</p>

</div>

振り分けページへ戻る

トップへ戻る

100%表示用 背景

背景画像 基本

背景画像 背景が暗い場合

PCで画像上に文字、スマホで画像下に文字

PCで画像上に文字、スマホで画像下に文字2

100%で画像を入れたい場合

背景色

100%表示用背景

背景画像基本

背景画像背景が暗い場合