I can't get this image to repeat horizontally. Note it is not a background image.
https://jsfiddle.net/gcetx8kh/
HTML:
<img id="rd" src="http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg">
CSS:
#rd {
position: absolute;
height: 50px;
width: 50px;
top: 300px;
background-repeat: repeat-x;
}
Unfortunately, background-repeat: repeat-x; will not work with the img tag. Therefore, you will need to add a new div and apply the image as a background image.
Try like this: Demo
<div id="rd"></div>
CSS:
#rd {
position: absolute;
height: 50px;
width: 100%;
top: 300px;
background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;
background-size: auto 100%;
}
Edit: Demo with fade on both sides:
#rd {
height: 50px;
width: 100%;
top: 300px;
background: url(http://us.cdn3.123rf.com/168nwm/eriksvoboda/eriksvoboda1411/eriksvoboda141100036/33498305-asphalt-road-texture-with-white-and-yellow-stripes.jpg) center repeat-x;
background-size: auto 100%;
position: relative;
display: inline-block;
}
#rd:before {
content: "";
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(49%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 49%, rgba(255, 255, 255, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
}
background-repeat: repeat-x; will not work with img tag.
Add a new div and apply the image as background image.
Related
I've been able to fade the top of a div, but I can't get the bottom to fade as well. I figured I could just reverse the css I used to fade the top but it's not working.
HTML:
<div class="container-city">
<div id="gradient-top">
<h2 style="text-align: center; padding-top: 60px;">LOCATIONS</h2>
</div>
<div id="gradient-bottom">
</div>
</div>
CSS
.container-city {
background-image: url("img/1652.png");
width: 100%;
}
#gradient-top {
background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
#gradient-bottom {
background: -moz-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: -webkit-linear-gradient(bottom, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
background: linear-gradient(to top, rgba(1, 255, 255, 255) 0%, rgba(0, 255, 255, 255) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=0);
}
Question:
Is there an easier way to accomplish this by fading the top and bottom?
Current Result:
Seems like the simplest solution would be to add a linear-gradient with multiple stops to the background-image and center the title vertically and horizontally to get the effect you are looking for (you can also add percentage values to the gradient color stops to tweak how it fades). Something like the following:
.container-background {
background-image: linear-gradient(#fff, transparent, #fff), url('http://via.placeholder.com/200x800/f0f000/fff?text=');
width: 100%;
}
.container-title {
text-align: center;
margin: 0 auto;
padding: 60px 0;
}
<div class="container-background">
<h2 class="container-title">TITLE</h2>
</div>
I have a div with some content that I want the text fade effect at the bottom. In order to do that I have to use position: fixed; inside a div with overflow-y:scroll
The div that gives the fade effect does not appear. I have tried different solutions but none have worked inside a div.
Here is a jsFiddle example of the code
I would try using absolute positioning. Something like:
JS Fiddle
.outer {
height: 200px;
border: 2px solid black;
position: relative;
overflow: hidden;
}
.content {
height: 100%;
overflow: scroll;
}
.fadeout {
width: 100%;
height: 40px;
position: absolute;
display: block;
bottom: 0;
left: 0;
z-index: 1;
background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(95%, rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=0);
}
Note that I put overflow: scroll on .content instead of .outer to keep the blur from scrolling.
Using fixed positing will place the blur at the bottom of the user's viewport, rather than the element.
I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?
I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.
Thanks in advance!
HTML:
<div class="profileBox">
...
</div>
CSS:
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
}
Try this solution, no modification of your HTML is required and not JS.
Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.
http://jsfiddle.net/0kj8t1zq/6/
<div class="profileBox"></div>
.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;
You have already answers to fade it to black.
If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
border: solid 2px white;
}
body {
background-color: blue;
}
<div class="profileBox"></div>
Changed body background to blue to see it is really transparent
For the fade effect, you can use rgba in webkit-gradient.
To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).
.profileBox {
width: 300px;
height: 300px;
display: block;
position: relative;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Opera 11.10+ */
background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}
.profileBox::after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg);
}
<div class="profileBox">
</div>
I'd like to know if there is any way to fade a link out instead of truncating if it is too long to fit in container. This is what I mean (the image taken from the user966582's question):
The simplest solution is to insert an absolute-positioned element with a gradient background into the container, but in that case it would cover the link so that it becomes unclickable under the gradient.
Another way I found is to use -webkit-mask:
.wide-faded {
-webkit-mask: -webkit-linear-gradient(right,
rgba(255,255,255,0),
rgba(255,255,255,1) 103px,
rgba(255,255,255,1)
);
}
The result is exactly what I needed (link is clickable!) but it lacks a crossbrowser support.
Is there any way to achieve the same in a crossbrowser manner?
Thanks in advance.
You could apply the gradient to a background of a pseudo element instead
.fade {
position:relative;
display:inline-block;
}
.fade:after {
content:"";
position:absolute;
top:0;
right:0;
width:20px;
height:100%;
background: -webkit-gradient(linear, 0 0, 100% 0,
from(rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 1)));
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
background: linear-gradient(left, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}
You could try this:
HTML
<div>
<a href="#">
This is some clickable Text
</a>
</div>
CSS
div {
position:relative;
width:250px;
overflow:hidden;
}
a {
white-space:nowrap;
display:inline-block;
}
a:after {
content:" ";
display:block;
position:absolute;
z-index:1;
right:0;
height:100%;
width:150px;
top:0;
background: -webkit-gradient(linear, 0 0, 100% 0,
from(rgba(255, 255, 255, 0)),
to(rgba(255, 255, 255, 1)));
}
Check this demo http://jsfiddle.net/6GjHV/10/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
I need to create the following Banner:
http://schuub.net/banner.png
My question is,
how can I create this gardient from white to transparent which overlays the image partially on the left.
My html can be found here:
http://schuub.net/banner.html
<!doctype html>
<html lang="en">
<head>
<style>
body {
margin: 0 auto;
width: 1024px;
}
.my-banner {
background-repeat: no-repeat;
background-position: right -175px;
background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
height: 200px;
width: 100%;
position: relative;
border:solid 1px;
}
.banner-data {
position: absolute;
left: 0;
top: 0;
width: 70%;
height: 100%;
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
border:solid 1px;
}
</style>
</head>
<body>
<div class="my-banner">
<div class="banner-data">
</div>
</div>
</body>
</html>
Cheers,
Stefan
Try this:
FIDDLE
HTML
<div class="my-banner"></div>
CSS
body {
margin: 0 auto;
width: 1024px;
}
.my-banner {
background-repeat: no-repeat;
background-position: right -175px;
background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
height: 200px;
width: 1024px;
background: url('http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg') no-repeat;
}
.my-banner:after {
content:" ";
height: 200px;
width: 1024px;
position: absolute;
z-index: 1;
top: 0;
left: 0;
border: 1px solid black;
background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
/* IE6-9 */
}
Either use graphic design software such as Photoshop and use an image, or use the following resource: http://www.colorzilla.com/gradient-editor/
This will automatically create the CSS required for the gradient.