Webサイト制作

投稿日:2017年4月28日 更新日:

画面の縦幅いっぱいに背景画像を表示する

画面全体に背景画像を表示するには、 background:url('画像を指定'); background-size:cover; でできますが、 いやいや、一画面だけでなくその下にもコンテンツがあってそこには背景画像をつけたくないんだよって時に指定する方法です。
background:url('')center center / cover no-repeat fixed;
height: 100vh;
vhはviewport heightでビューポートの高さに対する割合を指定する単位です。 vwはviewport widthでビューポートの幅に対する割合です。 知らない単位だったけど、やりたいこと出来た!

- Webサイト制作
-

関連記事

簡単な背景画像のパララックス

jquaryをリンクさせる htmlファイルでsection毎に背景画像を設定 cssにて。 width:100%; background:url()center center no-repeat f ...

Product Advertising APIで商品情報を取得してみる

ノンプログラマーがProduct Advertising APIでの商品情報取得にチャレンジしました。 検索しても情報が少なく苦労したので、同じような方の参考になればと思います。 目次1 amazon ...

no image

画像の拡大表示(ポップアップ)

目次1 やりたいこと2 タグを設置3 画像にクラスを付与4 スクリプトを記載5 スタイルを記載6 完成! やりたいこと 画像のポップアップがしたい! タグを設置 html内であればどこでも良いので、ポ ...

"Swiper"を使ったスライドで左右に画像を表示する

JQueryなしで動く"Swiper"という便利なプラグインを使ってのスライドショー。 左右に画像を表示したい時の注意点をメモ。 ダウンロードはこちらから swiper公式サイト 使う中ですごく分かり ...

Atomエディタが便利です

目次1 今まで使っていたのはDreamWeaver2 おすすめのパッケージ2.1 メニューを日本語化[japanese-menu]2.2 タグが簡単に書ける[emmet]2.3 FTP接続するなら[r ...