Wordpressを使用しオリジナルテーマを作成しております。
そこで現在背景画像(パターン)を作成し、完成は分かりにくいですが、最下層にパターン画像→各セクションbg-color

という予定なのですが、パターン背景に薄い白のマスクをしたいと試みたのですが上手くいきません。

![]

上記画像が現在で、本来はheaderにあたるロゴ箇所も含めすべてマスクをしたいと思っています。
(画像自体薄くすれば、、、と思うのですが、分からないからとまだ妥協したくなかったのですみません。）

因みに

divを使わずcssで

body {
background: url(http://aconnect.org/wp-content/themes/newcnt/images/back_img.gif);
}

だと、背景画像のパターンは維持してるんですが画像の様にマスクが一部に、、、

解決法としてdiv2つで囲むという手を試してみたところ、

<div class="bg-img">
  <div class="bg-msk">
<img src="http://aconnect.org/wp-content/themes/newcnt/images/logo02.svg" alt="あんかーこねくと" class="logo-img">
  </div>
  </div>


.bg-img { 
  background: url(http://aconnect.org/wp-content/themes/newcnt/images/back_img.gif);
  background-size: 250px;
}
 .bg-msk {
  background: rgba(255,255,255,0.5);
  
}

この様な具合にパターン背景が横だけ続き、縦は一行です。

repeat初期値、y,x全て試したのですが上手くいかず

・bodyだとパターンはきれいだがマスクが綺麗にならない。
・divだとパターンができなくなる

という状況です。

独学で勉強中のど素人の為、お伝えしきれていない点ありましたら申し訳ありません。
お知恵をお貸しいただければ幸いです、よろしくお願いいたします。

行動規範の内容に同意します

回答2件

ベストアンサー

ちょっと状況がよみとれないですが、divに画像を背景にして上になにか被せればいいのでしょうか？

css
1<style>
2#d1{
3  background-image:url('https://placehold.jp/ff0000/00ffff/150x150.png?text=1');
4  background-attachment : fixed;
5  width:100vw;
6  height:100vh;
7}
8#d2{
9  background-Color:rgba(255,255,255,0.5);
10  width:100vw;
11  height:100vh;
12  display: block;
13}
14</style>
15<div id="d1">
16<div id="d2"></div>
17</div>

調整版

CSS
1<style>
2body{
3  margin:0px;
4  background-image:url('https://placehold.jp/ff0000/00ffff/150x150.png?text=1');
5  background-attachment : fixed;
6  width:100vw;
7  height:100vh;
8}
9.dall{
10  width:100vw;
11  height:100vh;
12}
13#d2{
14  position:fixed;
15  background-Color:rgba(255,255,255,0.5);
16  display: block;
17}
18#d3{
19  position:absolute;
20  display: block;
21}
22</style>
23<body>
24<div id="d2" class="dall"></div>
25<div id="d3" class="dall">
261<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
271<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
281<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
291<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
301<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
311<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
321<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
331<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
341<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
351<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
36</div>
37</body>
38

投稿2018/10/18 01:27

編集2018/10/18 08:28

yambejp

総合スコア114839

退会済みユーザー

2018/10/18 08:14 編集

yambejp様早速ご回答ありがとうございます！上手く伝えられず申し訳ありません。パターン画像を背景に並べ、上から薄く白くしたいと思いコードを試しました。 divで画像を指定すると余白がどうしてもできてしまうため、画像指定はbodyで、マスクはdivで行ったところしっかりマスクができました！ありがとうございます。ただ要素検証で見たところ <body> <div class="bg-msk"> になっているのでどうやらマスクが微妙に余白ができるようです。 bodyにマスクを直接つけられれば理想的なのですが、それはできず汗もう少し調べてみます。変動するかもしれませんが現在制作中のWEBサイトです。http://aconnect.org/

yambejp

2018/10/18 08:16

divの余白は単にbodyのmarginのような気がします bodyを元にした調整版をあげておきました。白いマスクの上に文字を置くため別途divを設定してあります

退会済みユーザー

2018/10/18 08:24

ありがとうございます！申し訳ありません、、、こちらを利用するのが初めてでして調整版とはどちらにあるのでしょうか？汗

yambejp

2018/10/18 08:28

すみません、うまくupされてなかったので更新しました

退会済みユーザー

2018/10/18 08:41

こちらこそすみません汗 marginでできましたm(_ _)mこんな初歩にも気づけず、、、早速試し綺麗に理想通りになりました！細かくそして何より初心者だからと叩くことなく最後まで本当にありがとうございます。感謝です。

行動規範の内容に同意します

yambejpさんの回答が一番わかりやすいと思うのですが、
「divを使わずcssで」の場合を考えてみました。

CSSはセクショニングのタグにもかけられますので、

CSS
1body {
2  background: url(http://aconnect.org/wp-content/themes/newcnt/images/back_img.gif);
3  background-attachment : fixed;
4  background-repeat: repeat repeat;
5  width:100vw;
6  height:100vh;}
7header{
8  background-Color:rgba(255,255,255,0.5);
9  display: block;
10}

とやって、「headerの中」にロゴや記事？を入れれば、
背景にheader箇所だけ白い背景かけられると思います。

セクショニング的にロゴと記事は別セクション！という場合は、
headerの代わりにdivにして丸っと囲えばいいんじゃないかと。

投稿2018/10/18 01:52

編集2018/10/18 06:20

Tomowe_kosaka

総合スコア27

退会済みユーザー

2018/10/18 08:14

tomowe_kosaka様ご回答いただきありがとうございます！やはりbody要素でないと目一杯並べられないみたいなので、コード使わせていただきましたm(_ _)m webサイトが元々blog用ではなく、、、、。おっしゃる通りセクション分けをしたいと思っていましたので、マスクはdivで対応することにしました。ただ前にご返信をさせていただいた方のものにも書いたのですが、微妙な余白があります汗もう少し挑戦してみて、やはり難しそうであれば画像自体を調節したいと思います！上手くお伝えできていない中、ありがとうございます。

行動規範の内容に同意します

あなたの回答