I ran into a problem and can't find the answer.
We have Div1 with a gradient. It invested another DIV2 with the picture. It invested контент3 section.
Setting the opacity of div2 (image), changing the transparency of the content nested within it.
I had a picture to make a transparent png, because this greatly increased the weight of the picture, which is not acceptable. Need to get back to version images to JPG.
How to make using JPG and save this DIV structure, to achieve transparency JPG, but without affecting the content that is embedded in it.
An example of how I don't like here (first section with background) - Mobileindex.ru
Here we use transparent picture
http://codepen.io/anon/pen/NNPLwX
How to do the same thing only using the JPG picture
http://www.mobileindex.ru/images/background-mobileindex.ru.jpg - without transparency
An important point - the content inside the DIV.parallax1 must extend the entire block height
.parallax-1 {
width: 100%;
top: 0px;
background: url(http://www.mobileindex.ru/images/Background-800-transp-mobileindex.ru.png) 50% 0 no-repeat fixed;
background-size: cover;
height: inherit;
padding: 0;
opacity: 1;
z-index: 2;
}
.gradient1 {
height: 100vh auto;
background: #6e72b6;
background: -moz-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
background: -webkit-linear-gradient(top, #6e72b6 0%, #6d9594 100%);
background: linear-gradient(to bottom, #6e72b6 0%, #6d9594 100%);
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6e72b6', endColorstr='#6d9594', GradientType=0);
}
p {
height: 100vh;
}
<div class="gradient1">
<div class="parallax-1">
<p>bootstrap grid and contenr</p>
</div>
</div>
Related
body {
height:100%;
background: linear-gradient(top, #d808a4 50%, black 50%);
background: linear-gradient(top, #d808a4 50%,black 50%);
background: linear-gradient(to bottom, #d808a4 50%,black 50%);
height: 229vh;
}
I want to horizontally split the background into two colors where one is black color. And I want the other one to be a gradient that goes from pink to purple, I have manage to split into purple and black, but i want a purple pink grandient, can someone help me?
#top-half {
position: absolute;
left: 0;
width: 100%;
height: 50%;
background-color: black;
}
#bottom-half {
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 50%;
background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%);
}
<div id="bottom-half"></div>
<div id="top-half"></div>
2 divs for each half
position: absolute and left: 0 and top: 50% sets the position
width: 100% sets it to screen width
height: 50% sets the height for each one to half the screen width
background-color: black obviously sets the background color to black, and background: linear-gradient(90deg, rgba(255,0,209,1) 0%, rgba(151,0,255,1) 100%) sets the background to a gradient (you can generate nice CSS gradients at https://cssgradient.io/ )
You cannot have multiple background, the newer one will overwrite the old ones. What you can do is to have multiple gradients in a single background such as (try scrolling):
body {
height: 200vh;
background:
linear-gradient(to bottom, transparent 50%, black 50%),
linear-gradient(100deg, #8a07ff, #f500d7);
}
You can do this with just one background setting.
This snippet separates out each of the CSS background settings to make it clearer what is going on.
The whole element gets a black background, then a background-image which is a linear-gradient is defined. This will sit on top of the black background-color. It is given a size and a position and is made not to repeat.
Obviously change the colors and the size to what you want.
.bg {
width: 100vw;
height: 100vh;
background-color: black;
background-image: linear-gradient(to right, purple, magenta);
background-size: 80% 50%;
background-position: center top;
background-repeat: no-repeat;
}
<div class="bg"></div>
I've got this working using a static black background on my games splash screen:
[
If too small: http://i.imgur.com/VzLViDB.png
As you can see it works on a black background, but when we are on any other background, we simply see black instead of the actual background.
This makes sense, because I'm using a gradient like:
#waves::before {
left:0;
background: linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
#waves::after {
right:0;
background: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 75%);
}
Soo... technically it's working as intended. I just can't figure out how to do it like I want it to work.
My goal: fade out the div so that the waveform corners appear to fade out.
How i attempted it: waves is a div, so I leveraged before and after psuedo-elements, and gave it a width LARGER than required (so there is some overlap), and then used a gradient to fade.
If anyone knows how to do this, that would be great!
I did search, which is where I got the idea of a gradient from. I couldn't find anything that would suit this use case (multiple backgrounds)
To clarify, this is my goal:
Since your image is mostly black, You can use a mix mode to overlay it over the background.
And keep the way you mask it with black on the sides
.bkg {
width: 100%;
height: 300px;
background-image: url(http://lorempixel.com/400/200);
background-size: cover;
}
.overlay {
width: 100%;
height: 100px;
position: absolute;
top: 200px;
background-image: linear-gradient(to right, black, transparent), linear-gradient(to left, black, transparent), url(https://i.stack.imgur.com/hhk0G.png);
background-size: 20% 100%, 20% 100%, cover;
background-position: left center, right center, center center;
background-repeat: no-repeat;
mix-blend-mode: screen;
}
<div class="bkg"></div>
<div class="overlay"></div>
I want the exact gradient that is used on the big image near the top of this web page: http://www.cohabs.com/
I can get something quite close using this:
background: -webkit-linear-gradient(left, rgba(237,237,237,0) 0%, rgba(246,246,246,0.53) 53%, rgba(255,255,255,1) 100%), url(../images/firstImage.jpg) no-repeat;
But its not quite the same, as my method seems to dim even colour on the far left.
I did try view the source of that website I linked but I couldn't find anything that helped..
I used this website to create my gradient.
http://www.cssmatic.com/gradient-generator
I guess this is what you are looking for Codepen
Along with the above -webkit-linear-gradient you need other properties to make it work.
.container { position: relative; }
.container:before {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
background-image: -webkit-linear-gradient(right,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
background-image: linear-gradient(270deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0) 40%);
content: '';
}
Markup for the above should be
<div class="container">
<img src="http://www.cohabs.com/files/library/assets/homapage/slider/Homepage_web.jpg?thumb=hero">
</div>
I've been trying to make that in CSS to my webpage:
But the only thing I get is a repeated gradient over all page:
This is the code I'm using:
body {
background: #body-color;
background: -webkit-linear-gradient(#999cdb, #f6bdbd);
background: -moz-linear-gradient(#999cdb, #f6bdbd);
background: -o-linear-gradient(#999cdb, #f6bdbd);
background: linear-gradient(#999cdb, #f6bdbd);
}
That might be a simple thing, but I don't know what I am missing.
You need to specify a height. Use vh which simply means viewport height which is the height of the user's visible area of a web page. That way it would cover the entire height of the screen no matter the device.
The background-attachment property sets whether a background is fixed or scrolls with the rest of the page.
body {
background: #body-color;
background: -webkit-linear-gradient(#999cdb, #f6bdbd);
background: -moz-linear-gradient(#999cdb, #f6bdbd);
background: -o-linear-gradient(#999cdb, #f6bdbd);
background: linear-gradient(#999cdb, #f6bdbd);
height: 100vh;
background-attachment: fixed;
}
Something like this :
body {
background: linear-gradient(to bottom,rgba(153,156,219,1) 0%,rgba(246,189,189,1) 60%);
height:100%;
background-repeat: no-repeat;
background-attachment: fixed;
}
So there you are:
body{
background: linear-gradient(to bottom, #F4F4F4 50%, #FFE0DA 50%);
background-repeat: no-repeat;
height: 200px;
}
How it works:
to bottom specifies that the gradient flows from top to bottom.
You should specify the color-stop in percentages - here #F4F4F4 stops at 50% and then at 50% #FFE0DA starts. So you get a two-color div without any gradient effect.
To get the gradient effect, just vary the color-stops:
body{
background: linear-gradient(to bottom, #F4F4F4 10%, #FFE0DA 50%);
background-repeat: no-repeat;
height: 200px;
}
Thanks!
I would like to know if it is possible to create a background like this in CSS3.
The background should span a header div and the gradient should go from white to black independent of the screen width (always white on the left side and black on the right side).
Reason for not using the image is that it takes longer to load and that I can't get it to resize it's width when making the browser smaller than 1920px (the width of the image).
Have tried linear-gradient but I can't get it to work...
Regards,
Jens
If you also want the black bar at the top you should give dimensions to the background, stop the repeating and also position it where you want (treat it like a normal background image)
div {
background-color: black;
background-image: linear-gradient(to right, white, black);
background-repeat:no-repeat;
background-size:100% 20px; /*full width, 20px height*/
background-position:0 100%; /*gradient at bottom*/
/*just to give size to demo*/
min-height:50px;
}
<div></div>
Here's some CSS for you:
#grad {
background: gray; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white , black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, white, black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, white, black); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, white , black); /* Standard syntax */
}
Source: http://www.w3schools.com/css/css3_gradients.asp
I know the OP's question was answered. But I'll comment here anyway to deliver some more information to create a really more "complex" background.
First is you really can create multiple backgrounds stack on each other:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds
Second is you can determine position, size, etc,... of a background-image. And here the concise syntax for it: https://www.w3schools.com/cssref/css3_pr_background.asp.
Why background-image? A basic (and important) theory of background in CSS is: A background of an element can have only 1 background-color, and multiple background-images sit on top of it (even if the background-color is declared after background-image, background-color will be still placed below the background-images), and you can resize, reposition those background-images. And an important thing is linear-gradient is count as a background-image, not background-color. The 2 links above do give all detailed information about it.
Here is a quick demo on a "more complex" background from the OP question using only 1 div HTML:
div {
background:
linear-gradient(to right, white, black) 0 100%/100% 20px no-repeat,
linear-gradient(to left, white, black) 0 0/100% 20px no-repeat,
black;
height: 100px;
}
<div></div>
I'm inspired writing this long comment because from a tutorial
https://levelup.gitconnected.com/how-to-implement-netflix-slider-with-react-and-hooks-bdb9b99d1ce4, there's a section from it there're verbose hacks in HTML and CSS to achieve what I'm able to do within just a single line of CSS background, and I think it's cool to share, isn't it?
/* simpler */
.box {
width: 100%;
height: 100px;
background: linear-gradient(to right,black 0%,black 30%,transparent 75%,transparent 100%), green;
}
/* more complex */
.content {
height: 100px;
position: relative;
}
.background {
display: flex;
height: 100%;
}
.left {
background: black;
width: 30%;
position: relative;
}
.left:before {
content: '';
position: absolute;
background-image: linear-gradient(to right,#000,transparent);
top: 0;
bottom: 0;
left: 100%;
width: 275px;
}
.right {
background: green;
width: 70%;
}
.content-container {
color: white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 30px
}
<!-- simpler -->
<div class="box">
<div class="content-container">content here...</div>
</div>
<hr>
<!-- more complex -->
<div class="content">
<div class="background">
<div class="left">left</div>
<div class="right">right</div>
</div>
<div class="content-container">content here...</div>
</div>