I am trying to make a nice background with an image but I want the image repeated to fill the screen, with opacity set to 0.5 and it rotated 45 degrees. I have tried a number of things to accomplish this but have had no luck. Anyone have any ideas?
In this Codepen, I have the image rotated and opaque but cannot get background-repeat to work.
.background {
height: 500px;
width: 500px;
position: relative;
display: inline-block;
padding: 100px;
border: black 3px solid;
}
.background::before {
content: "";
position: absolute;
overflow: hidden;
width: 100px;
height: 100px;
left: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: contain;
transform: rotate(45deg);
background-repeat: repeat;
opacity: 0.5;
}
<span class='background'>HElloWorld</span>
You can do it like below:
.background {
height: 500px;
width: 500px;
position: relative;
z-index:0;
display: inline-block;
overflow:hidden; /* hide the overflow here not on the pseudo element */
padding: 100px;
border: black 3px solid;
}
.background::before {
content: "";
position: absolute;
z-index: -1;
/* 141% ~ sqrt(2)x100% to make sure to cover all the area after the rotation */
width: 141%;
height:141%;
/**/
/* to center*/
left: 50%;
top: 50%;
/* */
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: 100px 100px; /* size of the image*/
transform:translate(-50%,-50%) rotate(45deg); /* center the element then rotate */
opacity: 0.5;
}
<span class='background'>
HElloWorld
</span>
Try increasing the size of the ::before pseudo-element, and then decreasing the background size like this:
.background::before {
content: "";
position: absolute;
overflow: hidden;
width: 100%; /* made width 100% */
height: 100%; /* made height 100% */
left: 0;
top: 0;
z-index: -1;
opacity: 0.5;
background: url(https://cambridgewords.files.wordpress.com/2019/11/funny.jpg);
background-size: 100px; /* made background size smaller */
transform: rotate(45deg);
background-repeat: repeat;
opacity: 0.5;
}
This just makes the background pseudo-element the full size of the element, and then makes the background small and repeating. I hope this helps.
Related
I have a card with image, text and overlay gradient.
The image is much bigger than its parent div. The image is made responsive to the size of parent div. I need to position the image inside div a certain way, so I use object-position for it.
However, when I try to position it, I get white space between the image and parent container, even though the image is bigger than the div..
I used position values from Figma which are :
position: absolute;
width: 386px;
height: 458px;
left: -33px;
top: -94px;
On the screenshot you can see how it should look like (on the left) and how it's done with the code below (on the right):
DEMO
https://github.com/meri-maki/stackoverflow-demo-ingrad
https://meri-maki.github.io/stackoverflow-demo-ingrad
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
/* ----------IMAGE POSITIONING---------- */
object-position: top -94px left -33px;
}
/* ----------gradient---------- */
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
/* ----------caption---------- */
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I tried using transform: translate but got same result. What could be wrong?
You're shifting the image with negative position values. I'm not sure why, but you'd need to compensate by adding the reciprocal value to increase the size of the image accordingly.
Alternatively, set position to zero or center and eliminate those negative values.
.card {
border-radius: 24px;
width: 100%;
height: auto;
min-height: 328px;
max-height: 534px;
position: relative;
display: inline-block;
overflow: hidden;
}
.card img {
display: block;
vertical-align: bottom;
position: absolute;
object-fit: cover;
object-position: top -94px left -33px;
width: calc(100% + 33px); /* <------------- HERE */
height: calc(100% + 94px); /* <-------- AND HERE */
}
.card:after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
min-width: 100%;
height: 66%;
background: linear-gradient(0deg, #181818 0%, rgba(25, 23, 29, 0.447294) 48.44%, rgba(24, 24, 24, 0) 100%);
opacity: 0.9;
}
.caption {
z-index: 10;
position: absolute;
left: 4.27%;
right: 8.54%;
top: 63.41%;
bottom: 7.32%;
color: #fff;
}
<div class="card">
<img src="https://picsum.photos/1200" alt="">
<div class="caption">
<h4>Caption</h4>
</div>
</div>
I'm trying to replicate the styling of this animation but I don't know how to "fill in" the background color of the intersection of these two shapes. In the animation, the intersection is conveniently stepwise and stops where the edge of the square intersections with the origin of the circle; I can imagine using a clipping-mask to fill in that quadrant of the circle. However, is it possible to do the same more dynamically? Can you fill in the background of two intersecting shapes (while still having a transparent background otherwhere)?
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
}
.shape-interconnected > .square, .shape-interconnected > .circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%);
}
.shape-interconnected > .square {
border-radius: 4px;
top: 45%;
left: 55%;
}
.shape-interconnected > .circle {
border-radius: 50%;
top: 55%;
left: 45%;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You can recreate the dribble using html with a little css pseudo and animation magic.
This example below works at any set css variable set size border defined in the root css vars.
:root {
--size: 250px;
--border: 5px;
}
The trick in my example is by using positioning as percentages, meaning the parent .shape-interconnected controlled by the css var size, dictates all the child and child pseudo element position.
There is a lot of css to explain here, I've added comments in css, see if this inspires you to get you where you need to go...
Here is a fiddle... https://jsfiddle.net/joshmoto/378Lcgp0/
/* our root css vars */
:root {
--size: 250px;
--border: 5px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
Here is another example using the same code above but with these css root var settings...
:root {
--size: 500px;
--border: 2px;
}
Live example below...
/* our root css vars */
:root {
--size: 500px;
--border: 2px;
}
BODY {
background: black;
min-height: 100%;
}
/* reset our box sizing on psuedo elems */
*, ::after, ::before {
box-sizing: border-box;
}
/* our shape intersect container positioned center of window */
/* this can be positioned where ever you want */
.shape-interconnected {
background: black;
width: var(--size);
height: var(--size);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
animation: shape-interconnected 2s infinite;
}
/* animate height and width equally */
#keyframes shape-interconnected {
0% {
width: var(--size);
height: var(--size);
}
50% {
width: calc(var(--size) * 0.6);
height: calc(var(--size) * 0.6);
}
100% {
width: var(--size);
height: var(--size);
}
}
/* our square calculated at 40% of parent */
/* position and overflow hidden are key, hiding pseudo child elems */
.shape-interconnected > .square {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
background: transparent;
position: absolute;
overflow: hidden;
right: 0;
top: 0;
}
/* our square before pseudo elem emulating inner white filled circle */
/* position absolute with animation keyframes */
.shape-interconnected > .square::before {
content: "";
display: block;
width: 100%;
height: 100%;
background: #fff;
border-radius: 50%;
position: absolute;
animation: circle-interconnected 2s infinite;
}
/* start top/right 150% away, overflowing out of view */
/* 50% keyframe top/right 50% away, in view */
#keyframes circle-interconnected {
0% {
top: 150%;
right: 150%;
}
50% {
top: 50%;
right: 50%;
}
100% {
top: 150%;
right: 150%;
}
}
/* our square after pseudo elem emulating white border */
.shape-interconnected > .square::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
position: relative;
}
/* our circle calculated at 40% of parent */
.shape-interconnected > .circle {
width: calc(var(--size) * 0.4);
height: calc(var(--size) * 0.4);
position: absolute;
bottom: 0;
left: 0;
}
/* our circle after pseudo elem emulating white border */
.shape-interconnected > .circle::after {
content: "";
display: block;
width: 100%;
height: 100%;
background: transparent;
border: var(--border) solid white;
border-radius: 50%;
position: relative;
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
You might add a white circle inside the square and position it to the same coords the transparent one has.
Set overflow: hidden to the square to hide the outside part of the white circle:
.shape-interconnected {
width: 400px;
height: 300px;
position: relative;
background-color: black;
color: white;
margin: 1rem;
border-radius: 4px;
--animation-props: 1s alternate linear infinite;
}
.shape-interconnected>.square,
.shape-interconnected>.square:before,
.shape-interconnected>.circle {
width: 50px;
height: 50px;
position: absolute;
border: 5px solid white;
transform: translate(-50%, -50%)
}
.shape-interconnected>.square {
top: 35%;
left: 65%;
border-radius: 4px;
overflow: hidden;
animation: for_square var(--animation-props);
}
.shape-interconnected>.circle {
top: 65%;
left: 35%;
border-radius: 50%;
animation: for_transparent_circle var(--animation-props);
}
.shape-interconnected>.square:before {
content: '';
border-radius: 50%;
background: #fff;
top: 230%;
left: -190%;
animation: for_white_circle var(--animation-props);
}
#keyframes for_square {
to {
top: 50%;
left: 55%;
}
}
#keyframes for_transparent_circle {
to {
top: 55%;
left: 50%;
}
}
#keyframes for_white_circle {
to {
top: 80%;
left: 10%;
}
}
<div class="shape-interconnected">
<div class="square"></div>
<div class="circle"></div>
</div>
I've got a background which needs to have a dark background like it's got a low brightness.
When I add my brightness to 80% it's perfect but then I also lose the brightness of my text which is overlayed and that decreases in brightness as well. Is there a way I can increase the brightness on the text?
background-image: url("https...);
background-position: 50% 50%;
background-size: cover;
padding: 100px;
filter: brightness(80%);
in this case ::before or ::after is solution
div {
width: 100%;
height: 200px;
font-size: 40px;
font-weight: bold;
color: #fff;
position: relative;
}
span {
position: relative;
z-index: 1;
}
div::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
filter: brightness(80%);
background-image: url("https://images-na.ssl-images-amazon.com/images/I/41-SYJSrDgL.jpg");
background-position: 50% 50%;
background-size: cover;
z-index: 0;
}
<div><span>test<span></div>
How to create a partial width opacity ?
I have a div that has a background image with transparency, I used after to do get the effect like this
.indicators-menu {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
z-index: 1;
}
.indicators-menu::after {
background-image: url('bg_platform_repeat.jpg');
content: "";
opacity: 0.9;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
This works great, but what I need to do is to split the opacity by width
instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
I thought to use the CSS mask property but I see that its not well supported
what i need to do is to split the opacity by width instead of 100% to 80% with opacity 0.9 and 20% with opacity 1
Use two pseudo-elements with the same background image but position them differently.
div {
width: 460px;
height: 300px;
margin: 1em auto;
border: 1px solid red;
position: relative;
}
div:before,
div:after {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
background-image: url(http://www.fillmurray.com/460/300);
background-repeat: no-repeat;
background-size: cover;
}
div:before {
width: 80%;
opacity: 0.5;
/* for example */
}
div:after {
width: 20%;
left: 80%;
background-position: 100% 0;
}
<div>
</div>
One idea is to use an overlay above the image to simulate this effect. The color used need to be the same as the below background:
.box {
background:
linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.3)) left/80% 100%,
url('https://picsum.photos/200/200?image=1069') center/cover;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
<div class="box">
</div>
Use :before with background: white; and opacity:0.1(I set 0.4 only you to see the difference) and width:80%
.indicators-menu::after,.indicators-menu::before{
background-image: url('https://i.imgur.com/BK7wL0d.jpg');
content: "";
opacity:1;
top: 0;
position: absolute;
z-index: -1;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
background-position: unset;
}
.indicators-menu::before{
background: white;
opacity: 0.4;
z-index: 2;
width: 80%;
}
<div class="indicators-menu">
</div>
I am trying to apply a simple css3 animation, and apply opacity to the background image when the text jumps but it effect the whole div's.
Here is the jsfiddle link
And this is the main wrapper div:
.movie_thumb_wrapper {
float: left;
line-height: 31px;
background-color: #424755;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
height: 140px;
width: 220px;
background-size: 220px 140px;
background-repeat: no-repeat;
background-color:#1a1c26;
}
A slightly different approach from Vitorino Fernandes' answer would be to 'nest' a pseudo element between the text and background:
div {
position: relative;
height: 300px;
width: 300px;
display: inline-block;
color:white;
}
div:before,
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
}
div:before {
background: rgba(0, 0, 0, 0); /*this changes on hover - you might just want to change it here to get rid of the hover altogether*/
z-index: -1;
}
div:after {
z-index: -2;
background: url(http://placekitten.com/g/300/300);
}
div:hover:before{
background: rgba(0, 0, 0, 0.6);
}
<div>Hover to see effect</div>
So, in terms of your fiddle, add:
.movie_thumb_wrapper{
position:relative;
}
.movie_thumb_wrapper:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
transition:all 0.8s;
background:rgba(0,0,0,0.6);
z-index:-2;
}
jsfiddle example
Short answer, you can't. you need to create layers, using CSS position absolute, and z-index, so the text sits "on top of" the semi transparent layer. (instead of "inside" it as a a child element)
You can use pseudo element :after
div {
width: 200px;
position: relative;
border-radius: 5px;
text-align: center;
}
div:after {
content: '';
position: absolute;
top: 0;
left: 0;
opacity: .7;
right: 0;
bottom: 0;
z-index: -1; /* so that it goes in the backward */
background: url('http://placeimg.com/200/480/any')
}
<div>
<h1>Check my background image</h1>
</div>
instead of hex color code specify rgba and adjust a as required
background-color:rgba(255,0,0,0.5);
reference
Uhm,
background: rgba(0, 0, 0, 0.75);
does the job!