I'm trying to put an image on the right and left edges of the container's with the :before and :after.
But for some reason the containers totally .... up when I add a position absolute to the before and afters...
It has probably something to do with the standard bootstrap before and afters on the containers
Any idea how I can go around this?
.header,
.spotlight,
.main,
.footer {
>.container {
position: relative;
&:before {
content: " ";
position: absolute;
background: url("../img/right.png");
height: 100%;
display: block;
width: 6px;
right: -6px;
z-index: 999999;
top: 0;
}
&:after {
content: " ";
position: absolute;
background: url("../img/left.png");
height: 100%;
display: block;
width: 6px;
left: -6px;
z-index: 999999;
top: 0;
}
}
}
Example how the shadow(image) should look
Related
Consider:
<div class="auth-form-frame">
Some very long text
</div>
If I give a background color to .auth-form-frame::before, the text becomes invisible:
.auth-form-frame {
position: relative;
width: 50rem;
height: 25rem;
color: #000;
font-size: 10rem;
&:before {
content: "";
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: green; // This creates the problem
}
> * {
z-index: 100;
}
}
The full example appears in jsbin.
Why does this happen? How can I make the content visible despite the background color of the pseudo-element of <div>?
You need to set the z-index of the before pseudo-element:
&:before {
content: "";
background-size: cover;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
background-color: green; // This creates the problem
z-index: -1; /* ADD THIS */
}
> * {
z-index: 100;
}
}
While the pseudo element is sort of content of its 'owning' element you can position the owner and before and after pseudo elements relative to each other z-indexwise.
Is it possible to keep text center and middle aligned within the content provided in the pseudo element before and after? I am trying to keep a paragraph centered in the middle of the brackets.
http://jsfiddle.net/c6dofq3z/
p:before {
display: inline-block;
height: 150px;
float: left;
content: "{";
color: #F1722E;
font-size: 90px;
}
p:after {
display: inline-block;
height: 50px;
float: right;
content: "}";
color: #F1722E;
font-size: 90px;
}
Sure, position them absolutely and use translations to ensure vertical-alignment:
p {
position: relative;
}
p::before {
content: "{";
left: 0;
}
p::after {
content: "}";
right: 0;
}
p::before, p::after {
top: 50%;
color: #F1722E;
font-size: 90px;
position: absolute;
transform: translateY(-50%);
}
Fiddle: http://jsfiddle.net/jonathansampson/c6dofq3z/3/
In this situation you would want to use some relative and absolute positioning, you will also have to set a width for the paragraph.
p {
position: relative;
top: 0;
left: 0;
width: 250px;
}
http://jsfiddle.net/c6dofq3z/1/
I'm trying to z index an element behind it's parent but it isn't working.
Here's my pen:
http://codepen.io/Tiger0915/pen/OPXway
and my SCSS:
div {
width: 400px;
height: 250px;
position: relative;
background: grey;
margin: 100px auto;
z-index: 5;
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: 4;
}
}
how do I get my :after to appear behind my parent div?
I think I figured it out. Like ajp15243 said, I can't position a child element behind a parent element.
So I ended up creating 2 different pseudoelements, a :before and an :after, both of which appear behind the other children of my div (using negative z indexes), and I can put the after at a lower z index than the before to get the effect I wanted.
div {
width: 400px;
height: 250px;
position: relative;
margin: 100px auto;
z-index: 5;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
background: grey;
z-index: -1;
}
&:after {
content: ":after";
position: absolute;
width: 100%;
height: 100%;
top: -20px;
right: -70px;
background: lightgrey;
z-index: -2;
}
}
Here's the pen:
http://codepen.io/Tiger0915/pen/XJKBoq
do not know what I might be doing wrong, I tried to put it this way:
.container-image{
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
display: inline-block;
position: relative;
z-index: 20; // dont work
}
.container-image img{
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10; // dont work
}
jsfiddle
I need the image is behind the edge (.container-image)
Put a container around the border div and the image. http://jsfiddle.net/7fqAu/2/
<div class='example'>
<div class="container-image"></div>
<img src="http://i.imgur.com/T0KMwIs.jpg">
</div>
body {
background: red;
}
.container-image {
background: url('http://i.imgur.com/Dl8UBO7.png');
width: 226px;
height: 169px;
position: relative;
z-index: 20;
}
.example {
width: 226px;
height: 169px;
position: relative;
}
.example img {
position: absolute;
left: 14px;
top: 13px;
width: 199px;
height: 141px;
z-index: 10;
}
You could add the border image to .container-image:after instead of as a background to .container-image - no need for z-index at all then.
jsfiddle here
I'm showing an image on a page and I wish to add a mask to achieve a specific border-and-corner effect.
To do this I was hoping to use a pseudo-element in the following manner:
img
{
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
&:after
{
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
But the mask image never shows up. I've also tried adding a negative left- and top-margin to 'pull' the pseudo-element back over the <img> but still nothing.
Is there a glaring error in my CSS or does the problem lie with an inherent limit to pseudo-elements?
By default the img tag is an inline element and it is not a container to add an after pseudo class. I'll suggest the following code:
div.container {
img {
display: block;
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 1;
}
&:after {
display: block;
background-image: url(images/frame.gif);
content: " ";
height: 58px;
left: 0;
position: absolute;
top: 0;
width: 58px;
z-index: 2;
}
}
Notice that the pseudo class is also a block element.