I have a background image that has a URL referencing my image and a linear gradient. On desktop it is perfect, but obviously, when I change the screen size, the image itself does not change size. How can I make this responsive?
.image.filtered:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../../images/logo_color.png),
linear-gradient(
to right,
rgba(164, 128, 255, 0.25),
rgba(255, 143, 131, 0.25)
);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center left, left, right;
}
<div class="image filtered" data-position="center"></div>
Desktop view: https://i.stack.imgur.com/OPeSV.jpg
Mobile Size: https://i.stack.imgur.com/wnlh6.png
Maybe set the background-size to cover. Only if your .image.filtered has a defined width and height.
.image.filtered:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(../../images/logo_color.png),
linear-gradient(
to right,
rgba(164, 128, 255, 0.25),
rgba(255, 143, 131, 0.25)
);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: center left, left, right;
background-size: cover;
}```
Related
#artist-image-container{
background-image:
radial-gradient(rgba(245, 246, 252, 0.52), #181c44),url('./yo\ yo\ honey\ singh.jpg');
width: 34%;
min-width: 34%;
min-height: 300px;
background-size: cover;
color: white;
background-repeat: no-repeat;
padding: 20px;
}
I have written this code but I want to add radial gradient as shown in image at the bottom.
Maybe you mean like that
#img{
background-image:
linear-gradient(to bottom, rgba(245, 246, 252, 0.1), rgba(0, 0, 153, 0.8)),
url('https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&ixlib=rb-1.2.1&w=1000&q=80');
width: 200px;
height: 200px;
background-size: cover;
color: white;
padding: 20px;
}
<div id="img"></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'm relatively new to html and css in general, but am trying to get the header and paragraph text above the gradient background, so it's more legible. I'm sure there is something simple i'm missing, and any help is appreciated :)
Codepen: https://codepen.io/minacosentino/pen/YxLLQw
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
You just need to give your .container element a non-static positioning, and it will naturally come to the front.
Right now, your .jumbotron::before is set to position: absolute, and because the .container (its sibling) has no non-static positioning defined, it's showing up behind it.
I've added this to the end of your CSS:
.container {
position: relative;
}
Working demo:
.jumbotron {
display: flex;
align-items: center;
background: url('https://static1.squarespace.com/static/56fc981de707eb954cdcfca3/t/572a8a8d37013b0bab651c88/1462405784417/business+working+unsplash.com.jpg?format=1500w');
height: 40rem;
background-size: cover;
background-repeat: no-repeat;
background-position: center bottom;
position: relative;
}
.container {}
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right, rgba(203, 67, 152, .7) 0%, rgba(100, 190, 235, .7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.jumbotron h2 {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 500;
text-align: center;
}
.jumbotron p {
font-family: 'Montserrat', sans-serif;
color: #ffffff;
font-size: 8rem;
font-weight: 200;
text-align: center;
}
.container {
position: relative;
}
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,500" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<section class="jumbotron">
<div class="container">
<h2>hello!</h2>
<p>welcome to inside sales</p>
</div>
</section>
you can give z-index value to before pesudo element
.jumbotron::before {
background: rgba(0, 0, 0, 0) -webkit-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -moz-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) -o-linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
background: rgba(0, 0, 0, 0) linear-gradient(to top right,
rgba(203,67,152,.7) 0%, rgba(100,190,235,.7) 100%) repeat scroll 0 0;
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index:-1;
}
I used transform: translate3d(0px, 0px, 0px);
I have an structure like this:
.blog-header {
position: relative;
...
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
&__breadcrumb {
transform: translate3d(0px, 0px, 0px);
...
}
}
Or
.blog-header {
position: relative;
...
}
.blog-header::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: url("../static/shape.svg");
background-size: cover;
opacity: 0.6;
}
.blog-header__breadcrumb {
...
transform: translate3d(0px, 0px, 0px);
}
Use can use z-index property in css to change the layer an element is displayed on.
z-index
.jumbotron container {
z-index: 2000;
}
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/
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>