I want background like this. How can I get this with pure CSS.
I have searched for this but I didn't find any answer.
I want to ignore usages of large background images.
UPDATE
I have tried like this (only with color)
background : linear-gradient(125deg, #3081ff 31%, #3081FF 78%, #307aff 33%, #307aff 25%)
But, I want to add image with color.
Here is Fiddle which I have tried Fiddle-Demo
And it have problem with responsive, you can check by resizing window.
Multiple background images:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%), url(http://lorempixel.com/image_output/city-q-c-400-200-1.jpg);
}
<div></div>
Or a pseudo-element:
div {
height: 200px;
width: 400px;
margin: auto;
border: 1px solid grey;
background-image: url(http://lorempixel.com/image_output/city-q-c-800-400-1.jpg);
background-size: 100%;
background-position: center right;
background-repeat: no-repeat;
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: linear-gradient(135deg, rgba(255, 0, 0, 1) 0, rgba(255, 0, 0, 1) 50%, rgba(255, 0, 0, .5) 50%);
}
<div></div>
Related
My goal is to create a faded blue circle on black background.
However, there is a white square surrounding the circle, and it doesn't look good.
What can I do to get rid of this white background?
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background-color: blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}
<div class="circle"> </div>
You seems to overcomplicate a simple task:
body {
background-color: black;
}
.circle {
border-radius: 50%;
width: 200px;
height: 200px;
background: radial-gradient(farthest-side,blue,#0000);
}
<div class="circle"> </div>
One way is to fade away with black instead of white.
body{
background-color:black;
}
.circle {
border-radius: 50%;
width:200px;
height:200px;
background-color:blue;
}
.circle:after {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: radial-gradient(ellipse at center center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 70%, rgba(0, 0, 0, 1) 100%);
}
<div class="circle"> </div>
I'm attempting to create a button that contains a gradient covering the whole button, then with an image on just a portion of the button.
(note: for ease of the question I've changed my code to a div, but the outcome remains the same)
Initially this was successful doing such:
<div class="myBtn_1">test button one</div>
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
the jfiddle representing this can be found: here
HOWEVER I want some border around my image within the button/div, so I added background-position 5px 5px to the css, as well as explicitly setting the background-size (auto 40px). This does add padding to the image, but it also adds padding to the gradient.
again, see the 2nd class in the same jfiddle
Question: how can I create a button/div in css that has a gradient covering the full background, then add an image that has padding around it?
You can comma delineate the individual background properties too.
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px, auto auto;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px, 0 0;
}
<div class="myBtn_3">
test button two
</div>
Why don't you use
position: absolute;
on the image and just put it inside the div
.myBtn_1
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'),
linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
}
.myBtn_2
{
border: solid 1px #ff00ff;
background-image: url('https://picsum.photos/21?image=1080'), linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 40px;
width: 200px;
height: 50px;
padding-left: 65px;
background-position: 5px 5px;
}
.myBtn_3
{
border: solid 1px #ff00ff;
background-image: linear-gradient(to right, rgba(141, 245, 146, 1), rgba(255, 255, 255, 1));
background-repeat: no-repeat;
background-size: auto 100%;
width: 200px;
height: 50px;
padding-left: 65px;
position: relative;
}
.myBtn_3 img {
position: absolute;
left: 5px;
top: 5px;
height: calc(100% - 10px)
}
<div class="myBtn_1">test button one</div>
<br />
<div class="myBtn_2">
test button two
</div>
<br />
<div class="myBtn_3">
test button three
<img src="https://picsum.photos/21?image=1080">
</div>
I have a div wrapper and a div row and both have position properties set to relative. The wrapper div has a higher z-index than the inner div and both have background's set, however, the higher z-index background is still below the lower div's background. JS Fiddle Example
.wrapper {
position: relative;
z-index: 1000;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
If you want the grid lines over the red bar, remove the z-index from the wrapper div:
.wrapper {
position: relative;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
Remove z-index from wrapper div, and you should be good to go.
.wrapper {
position: relative;
border: 1px solid black;
width: 131px;
height: 25px;
background: repeating-linear-gradient( to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 0) 10px, black 11px, black 1px);
}
.row {
position: relative;
z-index: -1;
margin-top: 2px;
margin-bottom: 1px;
width: 100%;
height: 20px;
background: linear-gradient( to right, rgba(255, 0, 0, 0) 50%, red 50%);
}
<div class="wrapper">
<div class="row"></div>
</div>
I need help with a webpage I'm webmastering. Here's some code:
<body>
<div class="left">
</div>
And here's the css for it:
.left {
position: fixed;
width:50%;
height: 100vh;
top:0;
background-image: url('../img/plakatm.jpg');
background-size: 1164px,1000px;
background-position: center;
background-repeat: no-repeat;
}
The problem is, that i need to make a gradient at the right edge of it. I can't add the gradient to the image, beacause the .left element changes size on smaller monitors and the gradient would not show up.
Here you can see the full site (It's in polish but you don't need to understand it) Click here to see it.
Thanks.
Adam
Use CSS linear-gradient, something like below will work for you, better separate it to a separate into a different class, not call it .left, I call it .gradient in this example:
.left {
position: fixed;
width: 50%;
height: 100vh;
top: 0;
background-image: url('http://weknownyourdreamz.com/images/jungle/jungle-04.jpg');
background-size: 1164px, 1000px;
background-position: center;
background-repeat: no-repeat;
}
.left:after {
position: absolute;
content: '';
top: 0;
height: 100%;
width: 100%;
display: block;
background: white;
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -o-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: -moz-linear-gradient(right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
}
<body>
<div class="left">
</div>
</body>
There is a css-property for gradients. That should help.
Here is how you can have background gradient.
.left {
background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
height: 100px;
width: 100px;
}
<div class="left">
</div>
And this is the link where you can find good gradients: https://webgradients.com/
What I'm going to explain is a little complicated, so I made an image hoping it could help us.
Here is the large image.
In the top part of the page there is an header. It must have some characteristics:
it have to be full width but...
its content (the logo and the menu) is wrapped in a centered div, 960px of width
these two points are simple: I create an header with a fixed height and a 100% width, then a div with 960px of width and margin 0 auto so that it's always centered.
Now it comes the difficulties:
the background color, as you can see, is transparent, in fact we see the photo under the header. And this transparency is not the same for all the header: the side in which I should locate the logo has a certain value of opacity, and the side of menu has another value. And, moreover, the two sides are separated by a diagonal line.
It seems to be easy, but I don't find a solution to set the background in the way it appears in the image without having problems.
Here is a pure CSS solution.
Update Version:
To implement full-width multiple colored header, I changed my mind and decided to use CSS3 Gradient, Nowadays all modern web browsers support linear-gradient, but can use a transparent image or SVG as fallback for old browsers.
HTML:
<div class="header">
<div class="wrapper">
<div class="left">Left</div>
<div class="right">right side</div>
</div>
</div>
CSS:
.header {
background: -webkit-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -moz-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -ms-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: -o-linear-gradient(-20deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
background: linear-gradient(110deg, rgba(230, 0, 200, 0.5), rgba(230, 0, 200, 0.5) 40%, rgba(200, 0, 200, 0.3) 40%, rgba(200, 0, 200, 0.3));
min-width: 960px;
width: 100%;
}
.wrapper {
width: 960px;
margin: 0 auto;
outline: 2px dashed green; /* Just for demo */
}
.left, .right {
height: 35px;
line-height: 35px;
}
.left {
float: left;
width: 350px;
}
.right {
text-align: right;
margin-left: 350px;
}
Here is the JSBin Demo.
Previous Answer:
I've used :before and :after pseudo-elements to implement the bevel corners. You can simply transparent image instead, if you want to support old IE versions.
CSS:
.left, .right {
position: relative;
height: 35px;
line-height: 35px;
}
.left {
float: left;
width: 200px;
background-color: rgba(255, 200, 0, .5);
}
.right {
background-color: rgba(255, 150, 0, .5);
margin-left: 225px;
}
.left:after {
content: ' ';
display: block;
border-style: solid;
border-color: rgba(255, 200, 0, .5) transparent transparent transparent;
border-width: 35px 25px 0 0;
width: 0;
height: 0;
position: absolute;
top: 0;
right: -25px;
}
.right:before {
content: ' ';
display: block;
border-style: solid;
border-color: transparent transparent rgba(255, 150, 0, .5) transparent;
border-width: 0 0 35px 25px;
width: 0;
height: 0;
position: absolute;
top: 0;
left: -25px;
}
JSBin Demo
The CSS color property can be used by rgba method.
background:rgba(RED,GREEN,BLUE,OPACITY);
For example if you want to make background red with an opacity of of 50% then you have to use the following code.
background:rgba(255,0,0,0.5);
Things you must know
the maximum value for color (red green or blue) is 255 while lowest value is 0.
The highest value for opacity is 1 while lowest is 0.