Develop Reference

How to disable linear-gradient when scroll to the bottom

I am using the answer from Fading out text at bottom of a section with transparent div, but height stays under section after overlaying div to achieve fading text at bottom
and a snippet of my code is below
<div className={styles.description}>
{description}
</div>
.description {
position: relative;
overflow: auto;
width: 640px;
height: 495px;
padding-right: 17px;
text-align: justify;
-webkit-mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
mask-image: linear-gradient(to bottom, black 46%, transparent 100%);
}
and the effect is like this
however, the fading effect is fix, so when I scroll to the bottom, it still exist, therefore, some lines in the end of text would eventually unclear.
A simple way to solve this puzzle is add a extra transparent space in the end which large enough to expand the scrollbar, so that the text can get rid of fading out area. However, in my opinion, it seems not very elegant to me, so I wonder if there have methods can disable linear-gradient when scroll to the bottom.
Really appreciate your help, many thanks

Blending 2 elements background colors using CSS

I need to blend the background colors of 2 elements using CSS
I have been fiddling around with the background-blend-mode:multiply but that works only when I have the 2 colors in the same element.
I need to achieve something like this -
I have been searching a lot but haven't been able to figure it out.
Most helpful resource I found was New blending features in CSS which shows how to do it using Canvas.
Is it possible to do the same thing using CSS?
EDIT
The circles above were just an example to show what I needed. As I mentioned, I was looking for blending colors for 2 different elements. I have created a fiddle for my actual shapes that I need to blend.
http://jsfiddle.net/fmgfsr4o/2/

You can combine CSS multiple background with radial-gradients to achieve this effect:
CSS
div {
/* adjust the width of the container to adjust circle's
overlap size and shape */
width: 80px;
height: 50px;
/* for debug purpose only */
border: solid blue 1px;
background:
/* draw the red circle */
radial-gradient(red 0%, red 70%, transparent 70%, transparent 100%) 0 0,
/* draw the green circle */
radial-gradient(green 0%, green 70%, transparent 70%, transparent 100%) 0 0;
/* the red on the left, the green on the right */
background-position: top left, top right;
/* you can make then bigger or smaller */
/* but you have to change width size above too */
background-size: 50px 50px;
/* You want both circles to appears once only */
background-repeat: no-repeat;
/* you can try with other values too */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/background-blend-mode */
background-blend-mode: multiply;
}
HTML
<div></div>
I have done a JSFiddle for you to try: http://jsfiddle.net/pomeh/07nLpwwj/
This is the result I get using Firefox 31:
Even if the browser support seems "correct" (see here http://caniuse.com/#feat=css-backgroundblendmode), please note that the background-blend-mode property has the Candidate Recommendation status for now, so be careful when using it (thanks to #Paulie_D for pointing that out).

Try this pure CSS3, although you will need to figure out how to position the circles.
html {
height: 100%;
background:
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
tomato 1em,
tomato 4.5em
),
repeating-radial-gradient(
circle,
transparent,
transparent 3.5em,
dodgerblue 3.5em,
dodgerblue 4.5em
);
background-blend-mode: multiply;
background-size: 10em 10em;
background-position:
0 0,
5em 5em,
10em 5em;
}
JSFiddle

How to place a background-image that fills the entire screen but stops at a certain position from the bottom?

I have a problem with background image positioning - since we all know, it is quite simple to position a background that repeats itself and STARTS from a certain point from top, what I want to say - let's pretend we want a black background to start 100px from top of page and then repeat-y.
My question is - how is it possible to do the same effect, but the background to repeat-y itself from the bottom, I mean that these 100px of space at the bottom would not be filled with a background.
For now I was lucky enough just to make it so if there is no scrolling, because if there is scrolling, then I see a black background, then 100px at the bottom of window and if I scroll down i see that 100px stripe at the bottom always while scrolling. What I want to make is for background to fill the screen but stop when there is 100px left at the bottom
(at the bottom I want to add a logo which is transparent, so the solution with overflowing one element with another or z-indexing tricks currently is not an option....)
body {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
}
This does not work... I want for a background to repeat vertically but to stop at the bottom when there is 100 px left.

Why don't you just apply the stripe to a div surrounding your content; you could still have a background on the body tag and leave room for a 100px div at the bottom containing your logo:
<body>
<div class="content">
Content goes here.
</div>
<div class="footer">
Logo goes here.
</div>
</body>
And then in your css:
div.content {
background-image: url(UI/img/stripe-stripe.png)!important;
background-repeat: repeat-y !important;
background-position: right -100px;
background-color: #e6e2df !important;
top:0;
bottom:100px;
width:100%;
}
div.footer {
height: 100px;
}

How to dynamically center an image that repeats on the x-axis with javascript?

I have a background image that is 1500px in width and repeats on the x-axis. I would like to dynamically center this image no matter the user's viewport width so that the image's center is always in the middle of the screen?
How can I accomplish this with JavaScript?

You shouldn't need JavaScript for this, CSS will (or should) do just fine:
background-position: center center;
background-repeat: repeat-x;
That line will ensure that the image is always centered in the element, and that it repeats starting from the center of that element. More info on background-position here.

Perhaps I misunderstood the question here, but I believe you can do this with just CSS.
.container {
background: url('path/to/image') repeat-x 50% 0;
}
Is that what you had in mind?

How can i position a background image to the top left and bottom right of a html element?

I got a paragraph and i wish to have a visible "marker" to show the start and end of the paragraph to the user.
I got no problem to show the backgroundimage on the upper left, but i do not know how to position the background-image to the lower right end. Here my css for positioning the image to the upper left:
p[class] {
background-image: url("../../image/my_image.gif");
background-position: left top;
background-repeat: no-repeat;
}
I am not looking for a solution using additional html elements!!! It needs to work using css only! Due to the fact that the paragraph has set pseude-before and pseudo after elements i am not able to use them here. So the question is:
How can i position a background image to the top left and bottom right of a html element without using additional html elements but css only (and no pseudo elements)?

Cyrille is near but wrong. it needs to be background-position: right bottom;
in general - its posible to use numeric values.
So for background-position: right bottom; you can also write background-position: 100% 100%; and background-position: left top; would result in background-position: 0 0;
also take a look at the W3C specs on this: http://www.w3.org/TR/css3-background/#the-background-position
to sree's comment of above: this is completely wrong, left: 0px ; top:0px; does refer on positioning of the HTML element itself when using position:relative or position:absolute
edit:
if you like to use multiple backgrounds you can note it als follows:
p[class] {
background-image: url("../../image/my_image.gif"), url("../../image/my_image.gif");
background-position: left top, right bottom;
background-repeat: no-repeat;
}
look at http://caniuse.com/#feat=multibackgrounds for cross browser support
greets
tom

If browser support is not a problem for you, you could do with CSS3 multiple backgrounds: http://www.css3.info/preview/multiple-backgrounds/

What about trying background-position: bottom right instead of left top ?