ブラウザのウィンドウサイズ（HTML、CSS）に基づいて背景イメージのサイズを変更します

Question

私は背景グラデーションをブラウザウィンドウの利用可能な「不動産」に埋もれさせようとしています。 Here is an example of what is currently happening.関連コードをコピーして貼り付けました。必要な情報が不足している場合はお知らせください。

私はhereとhereという方法を試しましたが、どれも私のために働いていませんでした。他の提案は何か、あるいは明白な何かを見逃していますか？ありがとう！

.mainbody { 
 
    background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed; 
 
    border-style: solid; 
 
    border-color: #ffffff; 
 
    font-family: Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 50%; 
 
    min-height: 50%; 
 
    width: 100%; 
 
}

<div class="mainbody"></div>

Answer 1

オプションでは、0134ではなくbodyにこの勾配を適用することができます。

body { 
 
    background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed; 
 
    border-style: solid; 
 
    border-color: #ffffff; 
 
    font-family: Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 50%; 
 
    min-height: 50%; 
 
    width: 100%; 
 
}

<div class="mainbody"></div>

Answer 2

最も簡単に100％に高さを設定したり@SergChernataに従って全高を覆うようにbodyタグを変更:)

.mainbody { 
 
    background: linear-gradient(#42f4d7, #f4425f) no-repeat center center fixed; 
 
    border-style: solid; 
 
    border-color: #ffffff; 
 
    font-family: Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    min-width: 50%; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<div class="mainbody"></div>

Answer 3

私が正しくあなたを理解していれば、あなただけの100％にあなたの要素の高さと幅を設定すると、それは任意のデバイスのすべての画面サイズをカバーする必要があります。もちろん、それが絶対的な要素であれば、既にウィンドウのサイズを持っているものに関連していなければなりません。現在のところ、サイズは最も近い親の100％であり、それに起因する「位置：相対」があります。実際に画面の100％になるようにしたい場合は、その親のどれもが "position：relative"属性を持たないようにしてください。確かめたい場合は、 "position：static"に設定することができます。

.mainbody { 
 
    background-image: linear-gradient(#42f4d7, #f4425f); 
 
    border-style: solid; 
 
    border-color: #ffffff; 
 
    font-family: Helvetica, sans-serif; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<div class="mainbody"></div>