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/
Related
I have a fixed size image and part of it is transparent, which I currently use as a DIV background. I must place the image precisely in the screen center.
The problem is that I need the all space around the image to be black. If I set it with background: black url(... - image's transparent pixels also become black, which is wrong.
Another problem is that the website content is dynamic, so I can't cheat with 2 DIVs with the same background image and different filters. I need to look through transparent pixels clearly.
My current code:
<html>
<head>
<style>
.image {
height: 100%;
background: black url(image.png) center center no-repeat;
background-size: auto 100%;
}
</style>
</head>
<body>
<div class="image"></div>
</body>
</html>
In short - I need to look at the content through the transparent part of the image, the other part of the screen must be black. How do I achieve this?
I'd suggest an enormous box-shadow;
body {
background: pink;
display: flex;
height: 100vh;
}
.wrap {
height: 200px;
width: 200px;
border: 1px solid green;
margin: auto;
background-image: url(https://www199.lunapic.com/editor/premade/transparent.gif);
background-size: 200px;
background-repeat: no-repeat;
background-position: center;
padding: 20px;
box-shadow: 0 0 0 2000px red;
}
<div class="wrap"></div>
If you know the exact dimension of your image you can use linear-gradient where you can speficy a size so they cover partially the background.
Here is an example where I used a square image:
body {
margin:0;
height:100vh;
background:pink;
}
.image {
height: 100%;
background:
linear-gradient(#000,#000) left/calc((100vw - 100vh)/2) 100% no-repeat,
linear-gradient(#000,#000) right/calc((100vw - 100vh)/2) 100% no-repeat,
url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png) center center/auto 100% no-repeat;
}
<div class="image"></div>
Another example with another setting of the same image:
body {
margin:0;
height:100vh;
background:pink;
}
.image {
height: 100%;
background:
linear-gradient(#000,#000) top/ 100% calc((100vh - 158px)/2) no-repeat,
linear-gradient(#000,#000) bottom/ 100% calc((100vh - 158px)/2) no-repeat,
linear-gradient(#000,#000) left/calc((100vw - 158px)/2) 100% no-repeat,
linear-gradient(#000,#000) right/calc((100vw - 158px)/2) 100% no-repeat,
url(https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png) center center no-repeat;
}
<div class="image"></div>
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>
div {
height: 50px;
width: 100%;
background-image: linear-gradient(to right, white 50%, red 46px);
}
body {
padding: 20px;
}
<div></div>
I'm trying to use linear gradients as a two tone solid color background in a div.
The div can be any width, and I would like one of the colors to have a specified width in px - and the other color to fill up whatever is left of the total width. Is that possible as all?
Like:
div {
background-image: linear-gradient(to right, white auto, red 46px);
}
You Can simply go with:
Use the fixed background colour first then just put 0 in the second colour it will fill the rest of the div.
background: linear-gradient(to right, lightgreen 19px, darkgreen 0);
This will work fine for you.
div {
display: inline-block;
background: linear-gradient(to right, lightgreen 19px, darkgreen 0);
width: 50%;
height: 100px;
color: white;
text-align: center;
}
<div>
Test
</div>
Hope this was helpfull.
You can try this :
Use the value needed for the first color (here 46px) and simply use a small value for the second color (between 0 and 45px). Then change the direction of the gradient depending on your needs.
div.first {
height:100px;
background-image: linear-gradient(to right, red 46px, blue 40px);
}
div.second {
margin-top:10px;
height:100px;
background-image: linear-gradient(to left, red 46px, blue 0px);
}
<div class="first">
</div>
<div class="second">
</div>
I think this is a nice time to use css variables, we can set a variable as a breakpoint and only have to update that one variable when moving the gradient.
div {
--gradient-break: calc(100% - 46px);
height: 50px;
background-image: linear-gradient(to right, darkgreen var(--gradient-break), tomato var(--gradient-break));
}
<div></div>
You can use this method to make a Javascript controlled progress bar.
let progressCounter = 0;
setInterval(function() {
if (progressCounter >= 100) {
progressCounter = 0;
} else {
progressCounter++;
}
document.querySelector('.progress').style.setProperty('--gradient-break', progressCounter + "%")
}, 50)
div.progress {
--gradient-break: 0%;
height: 50px;
background-image: linear-gradient(to right, darkgreen var(--gradient-break), tomato var(--gradient-break));
}
<div class="progress"></div>
I'm setting the progress percentage with document.querySelector('.progress').style.setProperty('--gradient-break',progressCounter+"%") and the css is taking care of the rest.
Hope this is helpful.
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