Gradient jako tło różne rodzielczości

0

Mam taki problem mam sobie w css takie właściwości dla tła strony.

background-color: rgba(116, 34, 204, 1);
background-image: linear-gradient(180deg, rgba(116, 34, 204, 1) 0%, rgba(204, 76, 188, 1) 7%, rgba(204, 76, 188, 1) 55%, rgba(116, 34, 204, 1) 100%);

    background-repeat:no-repeat;

I teraz background-repeat:no-repeat; oznacza, że gradient ma się nie powtarzać tylko, że w monecie zastosowanie tego tło nie rozciąga się na całą stronę a zaraz przy końcu znika i zostaje dalej białe tło a z kole jak nie zastosuje tej właściwości to gradient się powtarza a ja chcę zrobić żeby tło strony dobrze się wyswietlało na różnych rodzielczościach mniejszych i większych więc co trzeba w css zrobić w body, żeby giedient się wyswietlał poprawnie jako tło na różnych rodzielczościach.
Ostatecznie mogę zrobić różne osobne body dla różnych rozdzielczości za pomocą @media ale czy da się to zrobić wspólne body ?

0

Spróbuję Ci pomóc jeśli wrzucisz jakiś większy przykład tutaj na forum, albo na https://codepen.io/

0

To może na forum.

Plik index.html

<!DOCTYPE html>
<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./styleHi.css">
        <link rel="stylesheet" href="./styleColor.css">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script> 
        <script src="./js.js"></script>
                <link rel="stylesheet"  href='./bootstrap-5.1.3-dist/css/bootstrap.css'  >
<script src="./bootstrap-5.1.3-dist/js/bootstrap.js" ></script>
    </head>
    <body>
        <div id="pageMain">
        </div>

plik css

body {
background-color: rgba(116, 34, 204, 1);
background-image: linear-gradient(180deg, rgba(116, 34, 204, 1) 0%, rgba(204, 76, 188, 1) 7%, rgba(204, 76, 188, 1) 55%, rgba(116, 34, 204, 1) 100%);

    background-repeat:no-repeat; 
   

}

#pageMain {
    width: 100%;
    height: 900px;
    
}
2

Zobacz to: https://codepen.io/overcq/pen/ZErVjjv

1 użytkowników online, w tym zalogowanych: 0, gości: 1