'How can I convert a three-column gradient to two columns?
I'm trying to do a 50/50 vertical background. I am attempting to use background-gradient to accomplish this but it is splitting the background into thirds instead of in halves.
If I change the degrees to 90 it will split the screen in half horizontally but when changed to 180, it's either only splitting the top half of the screen or it's splitting the screen into thirds. Could someone explain what is going on and how to fix it?
body {
background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
}
h2 {
text-align: center;
font: 100% Stencil;
color: red;
font-size: 4em;
}
caption {
text-align: center;
font: 100% Ink Free;
color: pink;
font-size: 3.5em;
font-weight: bold;
margin-bottom: .5em;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
text-align: center;
}
th {
font: 100% Old English Text MT;
font-weight: bold;
font-size: 3em;
}
td {
font: 100% Lucida Calligraphy;
font-size: 2em;
border-spacing: 0;
border: 1px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
tr td:nth-child(1),
tr td:nth-child(3) {
background: #33adff;
}
tr td:nth-child(2) {
background: #c0e0f2;<h2>A Table of Animals, Plants, and Cars</h2>
<table>
<caption>Here is My Second Table in HTML</caption>
<thead>
<tr>
<th scope="col">🐱Animals🐶</th>
<th scope="col">🌲Plants🌳</th>
<th scope="col">🚘Cars🚗</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>Pine</td>
<td>Chevrolet</td>
</tr>
<tr>
<td>Dog</td>
<td>Oak</td>
<td>Ford</td>
</tr>
<tr>
<td>Rabbit</td>
<td>Cedar</td>
<td>Dodge</td>
</tr>
<tr>
<td>Wolf</td>
<td>Spruce</td>
<td>Toyota</td>
</tr>
</tbody>
</table>Solution 1:[1]
Just add no-repeat to your background property
background: linear-gradient(180deg, rgba(1,91,187,1) 50%, rgba(254,213,0,1) 50%) no-repeat;
Solution 2:[2]
Perhaps the desired effect you want to accomplish can be done with another aproach, using :before and :after pseudo-selectors. Something like this:
.split-bg {
display: block;
position: relative;
min-height: 100vh;
width: 100%;
}
.split-bg::before,
.split-bg::after {
content: "";
position: absolute;
width: 100%;
height: 50%;
top: 0;
left: 0;
}
.split-bg::before {
background-color: rgba(1,91,187,1);
}
.split-bg::after {
background-color: rgba(254,213,0,1);
transform: translateY(100%);
}
Solution 3:[3]
Add
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%
to your background.
With CSS background-attachement, you tell css to fix the body background.
Also a good practice is to add height:100% as well to make the body full height of the screen.
body {
background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
height: 100%;
background-attachment: fixed;
background-repeat: no-repeat;
}
h2 {
text-align: center;
font: 100% Stencil;
color: red;
font-size: 4em;
}
caption {
text-align: center;
font: 100% Ink Free;
color: pink;
font-size: 3.5em;
font-weight: bold;
margin-bottom: .5em;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
text-align: center;
}
th {
font: 100% Old English Text MT;
font-weight: bold;
font-size: 3em;
}
td {
font: 100% Lucida Calligraphy;
font-size: 2em;
border-spacing: 0;
border: 1px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
tr td:nth-child(1),
tr td:nth-child(3) {
background: #33adff;
}
tr td:nth-child(2) {
background: #c0e0f2;<h2>A Table of Animals, Plants, and Cars</h2>
<table>
<caption>Here is My Second Table in HTML</caption>
<thead>
<tr>
<th scope="col">🐱Animals🐶</th>
<th scope="col">🌲Plants🌳</th>
<th scope="col">🚘Cars🚗</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>Pine</td>
<td>Chevrolet</td>
</tr>
<tr>
<td>Dog</td>
<td>Oak</td>
<td>Ford</td>
</tr>
<tr>
<td>Rabbit</td>
<td>Cedar</td>
<td>Dodge</td>
</tr>
<tr>
<td>Wolf</td>
<td>Spruce</td>
<td>Toyota</td>
</tr>
</tbody>
</table>Edit: make background:linear-garident not fixed, but based on the content, use background-attachement:scroll instead
body {
background: linear-gradient(180deg, rgba(1, 91, 187, 1) 50%, rgba(254, 213, 0, 1) 50%);
height: 100%;
background-attachment: scroll;
background-repeat: no-repeat;
}
h2 {
text-align: center;
font: 100% Stencil;
color: red;
font-size: 4em;
}
caption {
text-align: center;
font: 100% Ink Free;
color: pink;
font-size: 3.5em;
font-weight: bold;
margin-bottom: .5em;
}
table {
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
text-align: center;
}
th {
font: 100% Old English Text MT;
font-weight: bold;
font-size: 3em;
}
td {
font: 100% Lucida Calligraphy;
font-size: 2em;
border-spacing: 0;
border: 1px solid black;
padding-top: .5em;
padding-bottom: .5em;
padding-left: 2.5em;
padding-right: 2.5em;
}
tr td:nth-child(1),
tr td:nth-child(3) {
background: #33adff;
}
tr td:nth-child(2) {
background: #c0e0f2;<h2>A Table of Animals, Plants, and Cars</h2>
<table>
<caption>Here is My Second Table in HTML</caption>
<thead>
<tr>
<th scope="col">🐱Animals🐶</th>
<th scope="col">🌲Plants🌳</th>
<th scope="col">🚘Cars🚗</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cat</td>
<td>Pine</td>
<td>Chevrolet</td>
</tr>
<tr>
<td>Dog</td>
<td>Oak</td>
<td>Ford</td>
</tr>
<tr>
<td>Rabbit</td>
<td>Cedar</td>
<td>Dodge</td>
</tr>
<tr>
<td>Wolf</td>
<td>Spruce</td>
<td>Toyota</td>
</tr>
</tbody>
</table>Also, pay attention to broswer capability, Safari seems not support it as @A Haworth suggested.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | EzioMercer |
| Solution 2 | Toni Bordoy |
| Solution 3 |