助けて頂きたいです。ポータルを編集中です。

[skk (小野寺恵佑)]

助けてください！
kintoneスタンダード
現在HTML/CSS勉強中です（超初心者です）

kintone portal designerでポータルのデザインをいろいろいじっている所で、サンプルテンプレートを土台にしようと思い、design-1column-photoを取り込んで作業しています。

背景画像がデフォルトで葉っぱの画像なのですが、職場のみんなが見ていていいな！と思うデザイン（うちは水道屋さんなので水道にちなんだ画像を用意しています）に変更したいです。
ホームページを作成するサイトを見たりしましたがよくわかりませんでした。お力添えいただきたいです。

CSSは以下の通り（抜粋）です。
url以降が謎です。

.designportal {
background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("[https://static.cybozu.com/contents/k/image/ocean/cover/freshleaf.jpg"](https://static.cybozu.com/contents/k/image/ocean/cover/freshleaf.jpg));
background-size: cover;
background-position: center;
background-attachment: fixed;
}

[@media](https://kincom.cybozu.co.jp/media) screen and (max-width: 768px) {
.designportal {
background-attachment: scroll;
background-position: center center;
}
}

[wv-sumichan (住田 知基)]

CSSは プロパティ名: 設定値; を書き連ねて要素の見た目を設定していきますが、設定値の書き方はプロパティ毎に多種多様です。
例えば background-image は以下のページにまとまっています。

background-image - CSS: カスケーディングスタイルシート | MDN

上のページ内にもリンクはありますが、設定値として受け付ける画像を表す設定は、以下のページにまとまっています。

- CSS: カスケーディングスタイルシート | MDN

基本的にはネットで調べればそれぞれのプロパティの使い方は出てくると思うので、書き方と意味を調べてみると良いと思います。

---

気になったのは、コードブロックの中でリンクなどがMarkdown記法になっていて、正しいCSSになってないですね。
正しくは以下のような感じじゃないでしょうか (kintone portal designerのCSSは見たことないですが)

.designportal {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://static.cybozu.com/contents/k/image/ocean/cover/freshleaf.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

@media screen and (max-width: 768px) {
  .designportal {
    background-attachment: scroll;
    background-position: center center;
  }
}

[Maple (もみじ)]

kintoneの適当なアプリの添付ファイルフィールドへ、背景にする画像を添付する。
添付した画像を右クリックして「画像アドレスをコピー」を選択する。

コピーした画像アドレスを、下記の"と"の間に貼り付けて「Save」する。

.designportal {
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

ポータルの背景画像が変わる。

[skk (小野寺恵佑)]

ありがとうございます！リンクを参考に勉強してみます！
同じくMarkdown記法についても恥ずかしながら初耳でしたので、理解できるように学びます。
書いていただいたコードも試してみます！

[skk (小野寺恵佑)]

ありがとうございます！なるほど！このやり方が簡単そうで助かります！
kintone内で解決できるのも魅力的です！さっそくやってみます！

[skk (小野寺恵佑)]

できました！ありがとうございました！