CSSを使用して背景画像のサイズを変更して浮かせる方法は？

私はこのサイトで働いています：http://www.problemio.comと私は、私が行ったトップバナーに背景画像を追加するための要件があります。CSSを使用して背景画像のサイズを変更して浮かせる方法は？

どのようにすればいいのか分からないのは、右にずらして長さを小さくして画面幅の半分しかかからないようにすることです。

どうすればいいですか？これまでのところ私は、全体的なバナーのdivのために、このCSSがあります

.banner 
{ 
    width:60em; 
    margin: 0 auto; 
    position: relative; 
    padding: 0.3em 0; 
    z-index: 1; 
    background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png'); 
    background-repeat: no-repeat; 
    background-image: right-align 
}

を私は、背景画像を右揃えにし、div要素の幅全体の50％であることを再スケールする方法がわかりません。何か案は？

ありがとうございます！

出典

2011-10-03 Genadinik

CSSにスケーリングを含める必要はありません。画像が特定のサイズである必要がある場合は、そのサイズにします。 – eaj

背景の位置合わせには、left,right,bottom,top、centerを使用できます。またパーセンテージ。

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;

ただし、画像をCSS2ではなくCSS3でサイズ変更することはできません。

background-size: <width> <height>;

より使用：

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;

底および中心整列する：

background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;

出典

2011-10-03 18:22:00 MacMac

[適切なブラウザサポート]を持つ[CSS3の 'background-size'プロパティ]（http://www.css3.info/preview/background-size/）を使用しない限り（http://caniuse.com/background- img-opts）。 – sdleihssirhc

私の投稿を更新しました。CSS2は背景画像のサイズ変更をサポートしていませんが、CSS3では可能です。乾杯！ *今日何か新しいことを学んだ* – MacMac

私はまだ理解していないおかげで、バナーの右端の小さな部分が灰色で、背景の画像がそこに広がらない原因があります。なぜそれが起こっているのか分かりますか？ – Genadinik

使用background-position: right;とbackground-size: [width] [height]を（必要な場合に値を置き換えます）。

出典

2011-10-03 18:23:54

CSSを使用して背景画像のサイズを変更して浮かせる方法は？

答えて

関連する問題