ピックアップ記事

はじめてのhtml5 CSS3

盆栽

はじめてのhtml5 css3

 

皆さん、おはようございます、残暑いかがお過ごしですか?

お盆は店舗が休みなので、自分が買った盆栽に水をやりに行こうかと思います。

手がかかる子は、「可愛い」とかいいますが、今回はちょっと大変ですかね。

さて、初めてのhtml5 css3では背景画像の表示サイズを設定することができます。

比較的新しいブラウザであれば問題なくみれるでしょう、

ベンダープレフィックスは必要ないようです。

背景画像の表示サイズの変更する

  • background-size

がプロパティになります、

値は

  • 単位つきの実数
  • パーセント
  • auto 元のサイズでになります
  • cover 縦横の比率を守ったまま画像ひとつで表示領域全体を覆うサイズにします
  • contain 上記と同じで背景画像全体が表示できるサイズにします

それではデモってみます

<div style=”width: 300px; height: 300px; background-image:url(http://aliceplanblog.com/wp-content/uploads/2014/08/10557342_556767701112632_8596096265898603894_n.jpg); background-position: center; background-repeat: no-repeat; background-size: contain;”></div>

 

 

できてますか?わかりにくいので、周りにボーダーいれてみます。

追加タグは border: medium solid rgba(200,0,0,0.4);

で見てみますね。

 

 

どうですか?できてます?

300pxで画像サイズはかなり大きいですが、縦横比が揃って、表示されています。

じゃあ、次はcoverでやってみます。

タグは background-size: cover; でやってみます。

 

 

どうですか?

つまり、全体に出したい場合はこういうふうにしてあげると、どんなものにしても、背景をカバーします、

containの場合はどっちかというと、pngでレスポンシブでするのが効果的かもです

coverは全体を覆うので、シャレオツなHPにいいかもですね!!

次回は複数の背景画像を入れる場合です。

お楽しみに!!

コメントおまちしていますね~~~ヽ(*´∀`)ノ

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1.  , ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    脱水症状

  2. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    膝のスポーツ障害

  3. 今までの晩御飯(゚∀゚)①

  4. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    タバコの怖さ

  5. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    測定日

  6. jくえり

    WEBデザイナーのための簡単なJQ2

  7. ありす, ありす, 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    糖質制限ダイエット

  8. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    新人紹介!

  9. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    寒波ーーーーーーー!!

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  4. 高松市 猫背

PV解析

  • 73現在の記事:
  • 107343総閲覧数:
  • 6今日の閲覧数:
  • 97昨日の閲覧数:
  • 1023先週の閲覧数:
  • 1941月別閲覧数:
  • 74592総訪問者数:
  • 6今日の訪問者数:
  • 97昨日の訪問者数:
  • 728先週の訪問者数:
  • 1508月別訪問者数:
  • 103一日あたりの訪問者数:
  • 1現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP