[B! 背景画像] masakaz77のブックマーク

CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld

特にレスポンシブやスマホサイトで見かけることが多い、どんなウィンドウサイズでも縦横比を維持しつつ横幅いっぱいに画像を表示している見栄えですが、imgであれば画像を配置してwidth:100%;とheight:auto;辺りを指定しておけば簡単に表示させることができても、その見栄えを背景画像を利用してとなると先述した方法では実装できません。背景画像でも同じように縦横比を維持しつつ横幅いっぱいに画像（背景画像）を表示させたいときは以下の方法で実装することができます。実装には背景画像を表示したい部分に下記のようなCSSを記述することで縦横比を維持しつつ横幅いっぱいに背景画像を表示させることができ、以下のサンプルは表示させたい画像が「横幅：1000px　高さ：300px」の画像だった場合のものになります。 .background { width: 100%; height: 0; paddin

masakaz77 2016/05/17

[100%]

リンク

[JS]背景画像にスライドやフェードの動きを付与できる「jQuery.BgSwitcher」｜Javascriptスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」

jQuery.BgSwitcher ファイルのダウンロード以下のページより、jQuery.BgSwitcher のファイルを一式ダウンロードします。 <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./jquery.bgswitcher.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".contents").bgswitcher({ images: [ "./images/image_1.jpg", "./images/image_2.jpg", "./images/image_3.jpg", "./images/image_4.j

masakaz77 2016/04/27

リンク

画面いっぱい(フルスクリーン)に背景画像を敷いてウインドウ縮小時も天地中央にする方法

画面いっぱい(フルスクリーン)に背景画像を敷いてウインドウ縮小時も天地中央にする方法 2014/12/20 2016/1/25 JS/jQuery, UI/UX いきなりこう書くと身も蓋もないのですが、この手のプラグインは探せば結構あるので、単に１枚の画像を背景に敷きたい場合はそういったプラグインをお使いください。複数ある背景をイベント時に切り替える、アニメーションさせたい、など複雑なことをしたい場合結構オプションが充実してないものが多い。また、CSS3のbackground-sizeはIEの古いブラウザでつかえない。media queryを使いたくない状況などなど、修正時の事も考えると自分で1から組んだ方が早そうだな…というのが実情です。ということで、そういった場合に直面した場合にご参考ください。スプラッシュページを作成する場合、背景画像を一面(フルスクリーン)に敷きたいことがある

masakaz77 2015/07/27

リンク

HTML5ホームページテンプレート無料配布 [Cool Web Window]

masakaz77 2015/07/24

リンク

フルスクリーンの背景画像を使用することの利点と欠点 / ウェブデザインライブラリー

投稿日：2015年06月12日このチュートリアルでは、フルスクリーンの背景画像を使用することの利点と欠点をご紹介します。 Step1 ：はじめに Step2 ：それはなぜでしょうか？ Step3 ：あなたのサイトの背景にフルスクリーンの画像を使用すべきでしょうか？ Step4 ：欠点はないのでしょうか？ほとんどデザイン要素の無い単純なHTMLのウェブデザインから、画像をたくさん用いたデザインへ、そしてまた必要最小限のウェブデザインに戻りつつある現在のトレンドという、ウェブデザインの進化を目にするのは常に興味深いものです。ウェブデザインには2〜3年毎に好まれるトレンドのサイクルが明らかにあります。オンラインで目にする受賞歴のあるウェブデザインの多くでは、ウェブサイトの背景として、1枚の巨大な画像が使われていて、画面の横幅いっぱいに広がっています。これは何年も前にもウェブデザ

masakaz77 2015/06/13

リンク

ブラウザの背景全体に画像を表示する（ランダム配置とアニメーション）【jQuery連載03】 | HTML5でサイトをつくろう

今回はブラウザ全体に写真を配置したサンプルです。CSSなどでも背景に写真を配置することができますが、様々なウインドウサイズによって表示領域を制御するためにjQueryを使用して作成してみました。一枚画像の表示だけでは簡単なので、背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しています。写真をメインにしたり、グラフィカルなサイトを作成する場合に便利なサンプルになっていると思います。今回作成したサンプル背景に写真を配置したサンプルを見る背景画像をランダムにし一定時間でアニメーションさせるサンプルを見るビジュアル画像をHTMLに読み込ませる今回は背景に表示させる画像はCSSでの背景画像指定ではなく、表示させる領域を制御するためにdiv#background内にimg要素にて配置した画像を画面全体に表示させます。画像が拡大縮小されるからと

masakaz77 2014/09/25

リンク

大きな背景画像を使った魅力的なWebサイトを作ろう

2014年9月9日 CSS, Webデザイン以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、やはり動画を準備するのは少しハードルが高いと感じる人もいますよね。そこで今回は導入しやすく印象に残りやすい、大きな背景画像を用いたWebサイトの作り方を紹介します！ ↑私が10年以上利用している会計ソフト！背景に大きな画像を使うメリット・デメリット大きな背景画像のメリットは、なんといってもその迫力です。言葉を使わずとも、そのWebサイトを通じて伝えたいイメージをストレートに表現できます。その写真が高画質で、クオリティが高いほど印象にも残りやすいので、近年海外を中心に多くのサイトで用いられている手法です。しかし、いくつかの注意点をおさえておかないと、どんなに素敵な写真であっても効果が半減してしまいます。ひとつは画像が大きければ大きいほど、ページの読み込みに時間がかかって

masakaz77 2014/09/11

リンク

背景画像をスライドショーさせるJavaScript「Vegas Background jQuery Plugin」

twitter facebook hatena google pocket 背景画像を動かすことでインパクトのあるサイトが構築できます。 Vegas Background jQuery Pluginはフルスクリーンで背景をスライドさせられます。さらにドットのオーバーレイをかけられるので、カッコイイ感じになります。 sponsors 使用方法 Vegas Background jQuery Pluginからファイル一式をダウンロード。 <link rel="stylesheet" href="jquery.vegas.css" media="all" /> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript" src="jquery.vegas.js

masakaz77 2014/09/01

リンク

はてなブックマーク

タグ

関連タグで絞り込む (9)

背景画像に関するmasakaz77のブックマーク (8)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第4週）

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス