タグ

2016年10月18日のブックマーク (2件)

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

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

    CSSで縦横比を維持しながら横幅いっぱいに背景画像を表示させる方法 - NxWorld
  • 大きな画像にも使いやすい!背景デザインに使える無料パターン素材98選

    季節が変わるごとに、多くの企業ではホームページやブログ、チラシ、ネットショップのビジュアルを大きく変えているのではないでしょうか。四季のある日だからこそ、デザインにおいても季節感の演出は欠かせません。 しかし、何度もデザイン変更を行うのは予算・作業時間の面を考えると大変なことです。そこで、簡単にイメージチェンジをすることができるパターン素材を利用しましょう。パターン素材とは、好きな柄を自由な範囲にテクスチャできる素材のことです。つなぎ目のないシームレスな素材もあるため、背景や壁紙といった広範囲にも使いやすくなっています。 今回は、背景デザインに使えるフリーパターン素材をまとめて紹介します。どれも無料でダウンロードできますので、気になるデザインがあればダウンロードしてみてください。 マーケ思考のデザイナーは強い! 提案型デザイナーのススメ リード獲得が重視される「広告・LP・サービスサイト

    大きな画像にも使いやすい!背景デザインに使える無料パターン素材98選
    mrkazu
    mrkazu 2016/10/18