jQueryで背景画像を全画面表示する
jQueryで背景画像を全画面表示する 最近ではjavascriptでも表現できることが飛躍的に増え、Flashサイトのようなリッチなサイトも多くなってきましたね。 ということでFlashサイトと聞いて一番最初に思い浮かべそうな背景画像の全画面表示というのをjQueryで作成してみたいと思います。 投稿日2010年11月30日 更新日2011年04月26日 html+cssの準備 背景画像を全面表示するっていうタイトルですが、cssのbackgroundにはサイズを指定するプロパティがないので、気持ち悪いけど画像は普通に配置します。 html <img src="101121_2.jpg" width="100%" height="100%" id="bg" /> <div id="contents"> <h1><a href="#">jQueryで背景画像を全画面表示する。</a></h
CSS｜背景画像の上に背景色を重ねる方法 | コトダマウェブ
スタイルシートで背景色の上に文字を入れたい。でも、そのままだとテキストが見にくくなってしまうから、画像の上に色を重ねたい、そんなときにCSSで解決させる方法についてお話します。 背景画像の上に背景色を重ねる方法 backgroundプロパティは、背景画像か背景色のどちらか１つしか指定できませんので１つのbackgroundプロパティだけだと対応できません。そのため、次のような方法をとります。 本来の要素には背景画像・その疑似要素::beforeもしくは::afterに背景色を入れる ボタンで表示を切り替えてご覧ください。 See the Pen background-img-color by kenichi (@ken81) on CodePen. HTML <div class="bg_img"> <p>あなたの<br>オフィスに<br>革命を</p> </div> CSS .bg_im
背景画像の縦横比率を維持したまま、コンテンツの幅に合わせて表示させる方法
背景画像を表示させる際に、画像の見え方自体は固定しつつ、元の画像サイズ以上にブラウザを広げた時には、画像の縦横比率を固定したままボックスごと拡大して表示させたい、そんな時に使える方法を紹介します。 CSS .sample { -moz-box-sizing: border-box; box-sizing: border-box; background: url(images/tanuki.jpg) center center no-repeat; background-size: cover; width: 100%; height: 500px; padding-top: 62.5%; } 表示サンプル サンプルhtml 背景画像の縦横比率を維持したままコンテンツの幅に合わせて表示のサンプル 各プロパティの説明 サンプルでは、800×500pxの画像を背景画像としています。 プロパティで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
