I'm trying to use this code in a CSS stylesheet:
.layered-image {
background: linear-gradient( to right, transparent, white 40% ),
url("http://www.azlro.org/chad/images/IMG_3699-1920x1080.JPG");
}
...to fade the background image from the image itself to white from left to right. However, I want some of image (500 pixels) to not fade at all and then start fading from there. Is that possible?
This can be achieved by using the ::before selector.
The ::before selector inserts something before the content of each selected element(s), in your case, the linear-gradient 'layer'.
I'm not totally sure this is what you are after, but hopefully this will guide you to a solution for your project. You will have to play around with the opacity, width and possibly other factors to get it exactly how you want.
As the above commenter suggested, you can add values to each color inside your linear gradient to determine the amount that you want to persist, such as:
linear-gradient(to right, transparent 500px, white);
html, body {
width: 100%;
height: 100%;
}
.layered-image {
width: 100%;
height: 100%;
background: url('https://upload.wikimedia.org/wikipedia/commons/6/62/Starsinthesky.jpg') center center no-repeat;
background-size: cover;
}
.layered-image:before {
content: '';
position: absolute;
background-image: linear-gradient(to right, transparent, white);
opacity: 2.5;
height:100%;
width:100%;
}
<div class="layered-image">
</div>
Use opacity:
.layered-image {
opacity:0.8;
}
Simply adjust the gradient:
.layered-image {
height: 200px;
background: linear-gradient( to right, transparent 0,transparent 200px /*edit this value*/ ,white 60%),
url("https://lorempixel.com/1000/800/") center/cover;
}
<div class="layered-image">
</div>
Related
I am trying to make a linear-gradient with percentage breakpoints while using "background-attachment: fixed". It is not working as I expected.
I've made a very simple fiddle about my question.
https://jsfiddle.net/f8v1h0ac/
HTML
<body>
<header>
Header
</header>
<main>
Main
</main>
</body>
CSS
body {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 300px;
background-attachment: fixed;
/* background-image: linear-gradient(to bottom, black 0px, white 300px); */
/* The code above is working but the code below is not. Note that the color at the bottom line of header is supposed to be white. */
background-image: linear-gradient(to bottom, black 0%, white 100%);
}
main {
height: 2000px;
}
PS: I guess this happens because the gradient's height is respective to the window height. But I don't have a clue how to solve this problem.
Would this work for you? I put the header content inside a div.
header {
height: 300px;
background-attachment: fixed;
}
div {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, black 0%, white 100%);
}
https://jsfiddle.net/wazz/xkgkam74/
I am currently using an image tag within a div to display a site header. A new feature request has come up that would require us to keep several different versions of this same image with different lighting, and then show one image on the left of the header with a soft transition to the other image on the right. Even better if we can use 3 or more images.
An example is below using an old 3D render of mine. Imagine we have one sunset image, one daytime image, and want to create the image below using nothing but them and CSS. The original images can be found at the below addresses if you'd like to use them in a fiddle:
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore.jpg
http://nightscapecreations.com/Image_Folder/800x600_Paradise_Shore_Sunset.jpg
For those who cannot see the example and need further clarification: The images are all 800 pixels wide. The final result should be an 800 pixel wide image. The left of the resultant image should be image-1, the right should be image-2, and in the center they should fade. I would expect this to be possible with CSS background-image and linear-gradient somehow, but my searches have turned up oddly empty. Is this possible with CSS?
A solution using mask image (with a very low support)
.base {
width: 600px;
height: 400px;
position: relative;
background-image: url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: cover;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-image: url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: cover;
-webkit-mask-image: linear-gradient(to left, transparent, white);
}
<div class="base"><div class="overlay"></div></div>
And another solution using blend mode. This one, as it is, is supported in most modern browser. (With the usual exception of Edge). I have added an animation on hover.
I believe there is a slight issue involving probably the gamma calculation, there are locations where the result is darker than it should be. I have tried to fix it make the gradient lighter.
.container {
width: 600px;
height: 400px;
position: relative;
}
.container div {
width: 100%;
height: 100%;
position: absolute;
}
.container:hover div {
animation: slide 6s infinite;
}
.image1 {
background-image: linear-gradient(to right, black 33%, #444 40%,#ddd 60%, white 66%), url(https://i.stack.imgur.com/0bIJu.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
}
.image2 {
background-image: linear-gradient(to left, black 33%, #444 40%,#ddd 60%,white 66%), url(https://i.stack.imgur.com/ohVd6.jpg);
background-size: 300% 100%, cover;
background-position: center center, center center;
background-blend-mode: multiply;
mix-blend-mode: screen;
}
#keyframes slide {
from { background-position: left center, center center;
}
to {background-position: right center, center center;}
}
<div class="container">
<div class="image1">
</div>
<div class="image2">
</div>
</div>
mask-image is solution to your problem, however it is currently only supported by webkit
if you want to have cross-browser solution I suggest you use SVG instead
I have a striped background with a gradient which I want repeated in x and stretched in y. I thought this would work:
background: url(bg.jpg) repeat-x;
background-size: auto 100%;
But it either stretches in y or repeats in x, never both at same time:
http://codepen.io/anon/pen/JCjEb
Edit: Note that I cannot simply repeat in y since the striped background also have a gradient (dark in bottom, lighter at top).
Instead of giving it width auto, give it the width of the image (36px).
http://codepen.io/thgaskell/pen/Bjsix
CSS
.c {
background-size: 36px 100%;
}
You can just use background: url(bg.jpg) repeat; without background-size. Here is the example.
The problem is that when you set the background-size to auto 100%, it's going to stretch the whole image proportionally, thus making the stripes too wide and distorted. Set the x part of the background-size to the width of the original image, and it won't stretch anymore.
.b {
background: url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif) repeat;
background-size: 35px 100%;
}
http://jsfiddle.net/BsAcY/
Try background: url(bg.png) center repeat-x;
Not sure about IE8 and below though, if that's a problem.
.a { background:
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif)
repeat; display:block; width:500px; }
Is that what you need?
Try this
** HTML **
<div class="b"></div>
** CSS for bg image & gradient **
.b { /* unprefixed gradient for example only*/
background:
linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%),
url(http://img.photobucket.com/albums/v63/promisedyouheaven/stripe2.gif);
background-repeat:repeat;
}
div {
height: 300px;
width: 200px;
margin-right: 50px;
border:1px solid grey;
}
Codepen Example
I am trying to get a div to have a blue background image which is 500px wide. I then am trying to get the gradient to be white at the very left of the div and as it goes right the background image is slowly visible
This css code will be useful to make it gradient
.gradient {
width: 200px;
height: 200px;
background: #999; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ccc, #000); /* for firefox 3.6+ */
}
Use the above css in html using class
<div class="gradient">
gradient box
</div>
I actually just posted something similar on another question, but it applies in this case as well. Here it is in action:
http://sassmeister.com/gist/3528cb23d3e831231949
And the CSS to achieve this effect:
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
Of course be sure to add the correct vendor-prefixes so that it is cross-browser compatible. And if you wanted to change gradient directions you would change the gradient values.
The html:
<div class="hero">
You could put content here if you want
</div>
More on gradients:
http://www.w3schools.com/css/css3_gradients.asp
If I want to have a blue bar in the background at the top of my webpage (so the body element's background), but I want it to be 100px in height and span the entire horizontal background... is there any way to do this without making a background image that is 100px with the color I want (and maybe 1px in width) and making it repeat-x?
Basically, rather than doing:
background: url("images/pagestripe.png") repeat-x;
I want to do this:
background: #FFCCFF 100px top left repeat-x;
Which would give me a 100px background of the color #FFCCFF that starts in the top left of the page and repeats horizontally.
Similarly, if I wanted it to repeat-y, it would make the 100px the width instead of the height.
The positioning markers can represent offsets...
Is this possible? Is there actual CSS code for what I am looking for? Perhaps I'm not far off...
You can do it using linear gradients:
body {
background-image: -moz-linear-gradient(top, blue 100px, transparent 0);
background-image: -o-linear-gradient(top, blue 100px, transparent 0);
background-image: -webkit-linear-gradient(top, blue 100px, transparent 0);
background-image: linear-gradient(top, blue 100px, transparent 0);
}
Edit: This is CSS3 only. For CSS2 you may try
body:before {
content: ' ';
display: block;
top: 0;
position: absolute;
height: 100px;
width: 100%;
background: blue;
}
You could make the bar a separate div and set a negative margin on it. Something like this:
<div id="bluebar"></div>
Content goes here...
And then in CSS:
div#bluebar {
background: #fcf; /* that's actually pink, but whatever... */
height: 100px;
margin-bottom: -100px;
}
I'd give a jsFiddle link, but they're apparently down for maintenance right now, so here's a simple static HTML demo instead.
Yes it can be done.
You can create a single full width element with the height and background color you desire.
Use CSS to position the element.
div#bluebar {
background: #acf;
display: block;
height:100px;
width:100%;
position: absolute;
top: 0px; /* however far from the top you would like it*/
left: 0px;
z-index: 10; /* or some other number that will place it below the appropriate elements */
}
Just be sure that the parent of #blubar does not have position:relative; set or it will position relative to the parent not the document.