Hatena Blog Tags
はてなブログ トップ
background-position
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

background-position

(ウェブ)
【ばっくぐらうんどぽじしょん】

CSSのプロパティの一つ。背景画像の開始位置を制御する。
指定できる値は

[ [<percentage>|<length>]{1,2}| [[top|center|bottom] || [left|center|right]] ] |inherit

top left等は順序が逆でも良い。
<percentage>や<length>を指定した場合は順序が限定される点に注意。

具体例

0% 0%
画像の左上隅がパディング領域の左上隅に合うように配置される
100% 100%
画像の右下隅がパディング領域の右下隅に合うように配置される
10% 80%
画像の左から10%上から80%の点がパディング領域の左から10%上から80%の点に合うように配置される
このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Little Strange Software•3年前

【CSS】透過波紋、中心位置変更【小ネタ】

どうも！LSSです！！ 今回は、 little-strange.hatenablog.com のコードアレンジ、という小ネタです。 透過波紋、中心位置変更 コード 元コードには無かった「at」指定を追加しています 0か50か100じゃないと合わないのでは？って 透過波紋、中心位置変更 @keyframes trwavea{ 0%{background-size:100% 100%,100% 100%;} 95%,100%{background-size:2000% 2000%,100% 100%;} } .trwave{ height:210px; background-image: radi…

#CSS#radial-gradient#background-position

ネットで話題

もっと見る
36ブックマークjQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」twitter facebook hatena google pocket かっちょよくシリーズ第２弾。。。 jQueryを使用してメニューのマウスオーバーを印象的にしてみます。 via：jQuery Background Position sponsors 使用方法 jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。 次にこんな画像を用意します...www.skuare.net
25ブックマークjQuery Background PositionA jQuery plugin that allows the position of a background image to be animated. The current version is 1.1.1 and is available under the MIT licence. For more detail see the documentation reference page. Download now Basics Positions Options In the Wild Quick Ref You can animate the position of a b...keith-wood.name
17ブックマークCSS3のbackground-positionでより柔軟な配置を | Web標準Blog | ミツエーリンクスCSS3の新機能といえば、border-radiusやtransform, border-imageなど、新しいプロパティを想像してしまいがちですが、新しい機能は必ずしも新しいプロパティでのみ実装されるわけではありません。CSS3 Colorで追加されたrgba()など、値を拡張して実現する新機能もいくつか存在しています。 こういった拡張は既存プロパテ...standards.mitsue.co.jp
16ブックマークjQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」jQueryでメニューのマウスオーバーをかっちょよくするJavaScript「jQuery Background Position」 使用方法 jQuery Background Positionからjquery.bgpos.jsをjQueryからjquery.jsをダウロードします。 次にこんな画像を用意します。 次に以下のようにjsを記述します。 <style> ul {list-style:none;margin:0;padding:0;}...www.skuare.net
16ブックマークCSSセレクタ 「background-position」の各携帯キャリアの挙動 携帯サイトを作ろう！　-ちょっと詳しいモバイルサイトの作り方-CSSの「background-positionプロパティ」の値の指定方法で 各社どのように対応するか詳しく挙動を調べてみたのでメモ。 CSSセレクタbackground-position設定方法ドコモauSoftBankキーワード指定 (left center)×○○パーセント指定 (33% 50%)×○○合成形の指定 (33% center)××○キーワード省略形 (bottom)×○○パーセント省略形 ...dspt.blog59.fc2.com
9ブックマーク背景画像の位置の設定(background-position) - 背景プロパティ - スタイルシート入門背景画像はデフォルトでは、対象となる要素の左上(パディングの部分)に表示されますが、要素内のどの位置に表示させるかの設定方法について見ていきます。定義式は下記のようになります。 background-position : h-position v-position background-position : h-position プロパティは"background-position"です。値には...www.webword.jp
9ブックマークcssで背景画像の位置を移動しよう（background-position）www.yuu-diaryblog.com
9ブックマークbackground-positionのパーセント指定 - チープカCSS | 22:40 | 最近記事部をリキッドレイアウトにして、サイドバー部を固定幅にするっていうのが個人的なブームで、下の記事で書いた公開デザイン「muffler」もそういう形で作られているのですが、これが割と変わった方法が必要でかなり苦労したのでメモとして残す事にします。マフラー部の指定方法として、background-p...d.hatena.ne.jp
8ブックマーク【CSS】background-sizeとbackground-positionを使うとドット絵が描けちゃいます！【極端な例】 - Little Strange Softwarelittle-strange.hatenablog.com

関連ブログ

Little Strange Software•3年前

【CSS】３種の背景画像を重ねて個別に動かすアニメーション

どうも！LSSです！！mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。美麗な画像で、潜水するダイバーの動きにとても迫力があります^^ mio20100501.hatenablog.com そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。…ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますｗ コード 使用画像 表示サイズと移動量の話 余談 コード @keyframes divers{ 0%{background-position:0px…

#CSS#background-position#animation#keyframes
Little Strange Software•3年前

【CSS】CSSでチョコレートケーキを描いてみました【backgroundプロパティ】

どうも！LSSです！！ 実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。 チョコレートケーキ コード 3つのgradientを重ねています あとがき チョコレートケーキ ChocoCake コード <div style="box-sizing: content-box; width: 100px; height: 100px; background: conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px, radial-…

#CSS#background#conic-gradient#radial-gradient#linear-gradient#background-position
Little Strange Software•3年前

【つまづき】CSS、animationとradial-gradientの組み合わせ【実験段階】

どうも！LSSです！！ CSSをいじっているうちに、「なんだかよく分からないもの」ができてしまいました。 …なんだか、やろうと思っていた事が期待通りの動きにならず、「なんだこりゃ？？」となっていたところで方向性を変えて、「なにか」らしいものに仕上げた…けれどやはり「なんだかよく分からないもの」になっておりますｗ なんだかよく分からないもの コード 当初やろうとしていた事 あっ！ なんだかよく分からないもの @keyframes cbig{ 0%{background-size:0% 0%;background-position:50% 50%;} 50%{background-size:100…

#CSS#background-position
Little Strange Software•3年前

【CSS】跳ねるボール【多重アニメーションの実験】

どうも！LSSです！！ なんとなく「２つのkeyframesアニメーションで、２つめの動きが１つめの動きの状態に影響されて変化するようなもの」を試してみたい と思いたち、作ってみると こういうものができました。 跳ねるボール コード ２つのアニメーション あとがき 跳ねるボール @keyframes dblanm1{ 0%{width:135px;} 100%{width:100%;} } @keyframes dblanm2{ 0%{background-position:0% 0%;} 100%{background-position:100% 0%;} } .dblanm{ height…

#CSS#keyframes#background-position
Little Strange Software•4年前

【CSS】conic-gradientのアニメーション【実験】

@keyframes cncglda{ 0%,20%{background-position:0px 0px;}/*経過時間0～20%までの位置*/ 80%,100%{background-position:-5700px -3800px;}/*経過時間80～100%までの位置*/ } .cncgld{ width:300px; height:200px; background-image:repeating-conic-gradient(from 0deg at 50% 50%,black,brown,yellow,white,yellow,brown,black 36deg);/*開始角度…

#CSS#conic-gradient#background-position#keyframes
自分方位研究所•4年前

ブログのヘッダに画像挿入。四苦八苦。

chromeの検証モードを見ながら色々やってみました。 とりあえず、タイトル文字のもやもやの解除と、大きすぎるアイコンを小さくしました。 タイトル文字とアイコンの位置を入れ替えたいのですが、 background-position: left center; の命令が 効いていないようで、今後の課題です。 変更前 変更後 画像部分が収まる範囲のサイズが高さ200px となっていましたので、100pxに縮小し、その大きさに自動で合わせるように画像のサイズ指定を background-size: contain; としました。 ブログタイトルとブログの説明文は、color プロパティにて、文字の色…

#CSS#header-image-enable#background-position#text-shadow