As the comments above have mentioned, you will have to use a linear gradient. Since you actually have a top and bottom padding declared (which, when different from your line-height, will interfere with the relative offset of text against the gradient), you will have to set the y position of the background-image:
background-position: 0 14px;
...assuming that your top-padding is 14px (as stated in your example).
Solution 1: Using linear-gradient
linear-gradient
is actually very widely supported among modern browsers today (>93% unprefixed, >94% prefixed). For linear-gradient
, the start and end color stops are assumed to be the same as the closest breakpoint, so all you need to declare is:
- Two breakpoints, color A and color B both at 50% (middle)
- Set your background height to 2× the line-height
i.e.:
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
background-size: 100% 48px;
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
/* Fixed line height */
line-height: 24px;
/* Use linear-gradient for background image */
background-image: linear-gradient(180deg, #eee 50%, #fff 50%);
/* Size background so that the height is 2x line-height */
background-size: 100% 48px;
/* Offset the background along the y-axis by top padding */
background-position: 0 14px;
}
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>
Solution 2: Using repeating-linear-gradient
Using repeating-linear-gradient
is very similar to linear-gradient
, but remember to declare all color stops (the start and end stops are not assumed):
- color A at 0px (start)
- color A at 24px (1× line-height)
- color B at 24px (1× line-height)
- color B at 48px (2× line-height)
i.e.:
background-image: repeating-linear-gradient(
180deg,
#eee 0px,
#eee 24px,
#fff 24px,
#fff 48px);
Here is an example:
pre {
font-size: 20px;
border: 2px solid grey;
width: 450px;
border-left: 12px solid green;
border-radius: 5px;
padding: 14px;
/* Fixed line height */
line-height: 24px;
/* Use repeating-linear-gradient for background image */
background-image: repeating-linear-gradient(
180deg,
#eee 0px,
#eee 24px,
#fff 24px,
#fff 48px);
/* Offset the background along the y-axis by top padding */
background-position: 0 14px;
}
<pre>
.header-inner {
width: 1200px;
margin: 0 auto;
text-align: center;
font-size: 24px;
font-family: 'lato', sans-serif;
}
</pre>