背景画像の指定に「cover」と「contain」と言うキーワードを利用できます。いずれも画像の元々のアクペクト比(縦横比)を維持しながら、要素を満たすように画像を拡大/縮小する方法です。「cover」は要素を隙間なく満たすように拡縮し、はみ出した部分を切り落とします。一方で「contain」は要素からはみ出さない最大のサイズに自動的に拡縮されます。center」との組み合わせです。この指定により、画像をセンタリングしながら、要素の大きさに合わせたサイズ調整を自動的に行うことができます。指定した値が背景に描画されます。説明cover画像のアスペクト比を維持しながら、要素内に隙間が生じない最小のサイズに拡大・縮小します。contain画像のアスペクト比を維持しながら、要素からはみ出さない最大のサイズに拡大・縮小します。auto画像のアスペクト比を維持するように、自動的に計算されます。{長さ}画像の横幅や高さを、指定された値に拡大・縮小します。負の値は指定できません。例)30px例)30rem{パーセント}画像の横幅や高さを、要素の配置領域の大きさに対する相対値で指定します。要素の配置領域について「%」を使った相対値では、要素の配置領域の大きさに対する相対値が計算されます。「要素の配置領域」はbackground-originによって指定されます。3関連CSSプロパティbackgroundbackground-imagebackground-attachmentbackground-clipbackground-colorbackground-originbackground-repeatbackground-size@ルール@keyframesUI関連cursoroutlineoutline-offsetoutline-widthoutline-styleoutline-colorカウンターcounter-incrementcounter-resetテーブル(表)テキスト関連white-spacetext-transformtext-shadowtext-overflowtext-decorationtext-decoration-styletext-decoration-linetext-decoration-colortext-align-lasttext-indenttext-alignフィルター効果filterフォーマットline-heightletter-spacingフォント@font-facefontfont-size-adjustfont-stretchfont-familyfont-sizefont-variantfont-stylefont-weightフレックスボックスフロートclipfloatclearボックスモデルwidthheightmin-widthmin-heightmax-widthmax-heightvisibilitybox-sizingoverflowoverflow-yoverflow-xマージンmarginmargin-topmargin-rightmargin-bottommargin-leftpaddingpadding-toppadding-rightpadding-bottompadding-leftメディアクエリ@mediaリストlist-style-imagelist-style-typelist-style-positionlist-style変形transitiontransition-timing-functiontransition-propertytransition-delaytransition-durationtransformtransform-styletransform-origin段組みcolumnscolumn-rule-stylecolumn-rule-widthcolumn-rule-colorcolumn-rulecolumn-spancolumn-fillcolumn-gapcolumn-widthcolumn-count罫線borderborder-styleborder-colorborder-widthborder-topborder-top-styleborder-top-colorborder-rightborder-top-widthborder-right-styleborder-right-colorborder-right-widthborder-bottomborder-bottom-styleborder-bottom-colorborder-bottom-widthborder-leftborder-left-styleborder-left-colorborder-left-widthborder-imageborder-image-sourceborder-image-widthborder-image-sliceborder-image-outsetborder-image-repeatborder-radiusborder-bottom-left-radiusborder-bottom-right-radiusborder-top-right-radiusborder-top-left-radius背景backgroundbackground-imagebackground-attachmentbackground-clipbackground-colorbackground-originbackground-repeatbackground-size色opacity色と透明度color装飾box-shadow記述法backface-visibilityvertical-alignuser-select配置displayrightlefttopbottompositionz-index「WWWクリエイターズ」は、より多くの人が開発とウェブを楽しむための目指したウェブサイトです。コマンドラインやgitなど、開発ビギナーのつまづきやすい部分を共有しています。})(jQuery);閉じる。