ボディのイメージをサイズ変更する方法

私はサイト全体のページを占めないように自分のサイトのボディイメージのサイズを変更しようとしています。サイズを変更するにはどうすればよいですか？私はコードがわからないので、画像のURLを表示するだけです。私はそれがその最大高さを宣言する画像の下に白いスペースを表示し、ページにまたがっていないようにしたい。背景リピートで固定ボディのイメージをサイズ変更する方法

body { 
 
    background-image: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
 
    background-repeat: none; 
 
    font-family: "PT Sans", sans-serif; 
 
}

<body> 
 

 
    <div class="container-fluid"> 
 

 
    <ul id="nav"> 
 
     <li id="brand"><a href="#">MINIMAL</a></li> 
 
     <li id="navm"><a href="#">Men</a></li> 
 
     <li id="navm"><a href="#">Women</a></li> 
 
     <li id="navm"><a href="#">Contact</a></li> 
 
    </ul> 
 

 
    </div> 
 

 
    <div> 
 
    <h1>Simplicity is Minimal</h1> 
 
    </div> 
 

 
    <div id="home"> 
 
    <a href="#" id="homeb">Shop Now</a> 
 
    </div> 
 

 
</body>

：なし。

出典

2017-03-21 RogerFedFan

画像でカバーしたいページの割合がわかりません。 https://www.w3schools.com/cssref/css3_pr_background-size.asp – Rowland

は、あなたの体のためにこれらのCSSルールを使用してみてください：

body { 
    background: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
    font-family: "PT Sans", sans-serif; 
    background-size: 69px 54px; // with the first value being the width; second value the height 
    // following rules are optional, don't know if you need them in your case 
    // background-position: center; 
    // background-repeat: no-repeat; 
}

注背景サイズの値は、同様のパーセント値として宣言することができます。そして、あなたがページ上のどこか特定の画像スタートをできるようにしたい場合、あなたはそれが

出典

2017-03-21 14:46:10

これは機能しますが、画面全体をカバーするために常に増やされ、繰り返されます。 – RogerFedFan

@Gabriel Pozoそのため、「background-repeat ：no-repeat; "、これは背景画像が1回だけレンダリングされることを保証します（あなたの言うように、掛け算はしません）。 –

を働いていたかどう

background-position: top right; // default is top left

はあなたにこのコードを追加することができます私に知らせて自由に感じる使用することができますあなたの体のスタイルはCSSで

background-size: 100px 200px; // first value difines width and second value, height

出典

2017-03-21 15:00:08

これを試してみてください、それは確かにあなたを助けます。

body { 
    background-image: url(C:/Users/Gabriel/Downloads/Green-blur.jpg); 
    background-size: 50% 80%; // you can change % value as per your requirement 
    font-family: "PT Sans", sans-serif; 
}

出典

2017-03-21 16:44:37

はい、それは動作しますが、画像は複製され、繰り返されます。これをどうやって解決するのですか？ – RogerFedFan

もう1つのプロパティをこれに追加できます。 'background-repeat：no-repeat;' あなたのためにうまくいきますように。 –

ボディのイメージをサイズ変更する方法

答えて

関連する問題