This question already has an answer here:
How to scroll a background image together with text in textarea?
(1 answer)
Closed 8 years ago.
Problem
I have a textarea which uses a linear gradient as its background image. I am trying to emulate a "lined paper" effect. I've set my font-size and line-height to the get the correct spacing between the lines and the text;
however, once I scroll down the textarea, I notice a problem:
Namely, that my background-image does not scroll with the text. I have tried background-attachment: scroll, background-attachment: fixed and background-attachment: local, and none solve my problem.
CSS
textarea {
height: 200px;
font-size: 20px;
line-height: 1;
background-image: repeating-linear-gradient(to bottom,
#fff,
#fff 9.5%,
#000 9.5%,
#000 10%);
}
Fiddle
background-attachment: local actually does work; just not in Firefox, where I was testing.
Related
This question already has answers here:
CSS3 gradient background set on body doesn't stretch but instead repeats?
(13 answers)
Closed 4 years ago.
When using linear-gradient CSS property, the background appears without stripes when using left and right as direction value. But when direction value is given as top or bottom, stripes appears in the background. Is there any way that we can remove the stripes?
Here is the code:
body {
background: linear-gradient(to top, red, yellow);
}
You are facing a complex background propagation that you can read about here. I will try to explain it with simple words.
Your body has a height equal to 0; thus the background won't be visible on it but by default it has 8px of margin which create a height of 8px on the html element.
Why not 16px of height (8px for top + 8px for bottom)?
Since the height of body is 0 we are facing a margin collpasing and both margin will collapse into only one and we have a height of 8px.
Then we have a background propagation from body to html and the linear-gradient will cover the 8px height.
Finally, the background of the html is propagated to the canvas element in order to cover the whole area which explain why the linear gradient is repeating each 8px.
body {
background: linear-gradient(to top, red, yellow);
}
It's also repeated when using left or right direction but you won't see it visually which is logical since it's the same pattern:
body {
background: linear-gradient(to right, red, yellow);
}
You can also remove the repeating and you will see it's covering only 8px
body {
background: linear-gradient(to right, red, yellow) no-repeat;
}
In order to avoid this behavior you can simply set height:100% (or min-height:100%) to the html
html {
height: 100%;
}
body {
background: linear-gradient(to top, red, yellow);
}
It will also work with no-repeat since by default a linear-gradient will cover the whole are:
html {
min-height: 100%;
}
body {
background: linear-gradient(to top, red, yellow) no-repeat;
}
That's because the calculated height of <body> is resulting from the height of its content. When smaller than viewport's height, the background will repeat itself:
body {
background: linear-gradient(to top, red, yellow);
}
To make sure it stretches itself (and the background gradient) across the entire height of the viewport, you need to give <body> a min-height equal with viewport's height (100vw):
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
}
body {
background: linear-gradient(to top, red, yellow);
min-height: 100vh;
margin: 0;
}
As #TemaniAfif pointed out in comments, the technical reason for the above is: there is a difference between the root element, which covers the entire viewport and inherits its background from <body>, and the <body> element, which, as specified, can be smaller than the viewport. As per W3C Recommendation:
The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.
This question already has answers here:
Set opacity of background image without affecting child elements
(15 answers)
Closed 1 year ago.
For example I have this CSS to give a background image to my web site:
body{
height: 100%;
width: 100%;
padding: 0;
margin: 0;
border: 0;
background-image: url(/images/grid.png);
background-repeat: repeat;
}
It is a simple repeating image but I want to make it opaque with an alpha value of .5.
Can I do this in the CSS?
If I apply opacity
opacity: .5;
directly to the body tag, it actually makes everything except the background opaque.
No, but you can apply a color with transparency on top to simulate opacity.
background-image: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,.45)), url('image.png');
I'm stuck on a CSS problem.
I would like to get a CSS stripe as background of my page like i did here, except that i want the stripe to be located on the bottom right corner of the page.
Moreover i want it to be a fixed background attachment.
I tried what is suggested here : How to position background image in bottom right corner? (CSS) but it seems to work only for background images and not for background gradients.
I tried changing offsets in the gradient definition but it's still relative to the top left corner, and the result would differ if the window size changes.
Here's my current code :
body
{
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0 !important;
background-attachment: fixed !important;
/* background-position: 80% 80% !important; */
background-repeat: no-repeat !important;
}
Any advice is welcomed !
I think you are correct, in that the background-position property only works for images and not gradients. At least that's what I'm finding by playing around with it.
So this isn't an answer to "how to make background-position work for gradients", but rather a suggestion to put your gradient on a different element and position IT to the bottom right.
Like:
div {
position: absolute;
right: 0;
bottom: 0;
width: 160px;
height: 160px;
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0;
background-position: center;
}
Granted, you'll probably have to change the gradient to fit better within that element, but I think this might be the only way to achieve what you're trying to do.
Also, you'll want to make sure that body has position: relative (or whatever the containing element is).
first time posting - I hope somebody can help.
I have a gradient background on a page which uses ajax (and becomes quite long after the call).
In IE (version 9) the gradient background stays the same when I scroll down, however in Firefox (version 6) the gradient is correct for one normal page length, but when I scroll down the background gradient repeats itself.
Is there any way I can get firefox to do the same as IE (stay the same no matter how far I scroll?
Here is my css relating to the gradient:
html {
background-color: #8c827a;
height: 100%;
margin: 0 0 1px;
padding: 15px;
/* Mozilla: */
background: -moz-linear-gradient(top, #8c827a, #2B2825);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#8c827a), to(#2B2825));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#8c827a', EndColorStr='#2B2825', GradientType=0);
}
To make other browsers behave the same as Internet Explorer, you can make the background fixed:
html {
background-attachment: fixed
}
Make sure you place background-attachment after the two background declarations.
Add this CSS:
background-attachment: fixed;
This property "pins" the background at the browser viewport.
In CSS declaration for a selector is given as:
background-attachment: scroll;
background-color: transparent;
background-image: url(/images/ucc/green/btn-part2.gif);
background-repeat: no-repeat;
background-position: right top;
I want to optimize the code and change it to:
background: scroll transparent url(/images/ucc/green/btn-part2.gif) no-repeat right top;
My question is, Is this correct way and does it work in IE7/8, Firefox, Safari?
Yes it works. Take a look at point 6 here - http://www.domedia.org/oveklykken/css-shorthands.php
http://www.w3schools.com/css/css_background.asp
When using the shorthand property the
order of the property values are:
* background-color
* background-image
* background-repeat
* background-attachment
* background-position
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll right top;
}
Yes, this is the correct way and it works in all major browsers. You can read more about the CSS background property which can be used to set all background-* properties together.
Update: Yes, the following rule will work:
background
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Except the browser will attempt to apply this rule to an <background> element in the DOM. And since there's no such element in HTML, the rule will never be applied to anything. :-) So you have to change the rule selector to select the container element you want to apply the background property to:
div#myDivIWantToSetBackgroundTo
{
background: transparent url(/images/ucc/green/btn-part2.gif) no-repeat scroll 20px 40px;
}
Btw, you can play with various values for the background property on the W3School site.