When I use :after pseudo class with background image, it doesn't shows in my div.
Why does it happen?
P.S. When I apply position:absolute top:0, right:0, I can see the image.
<div class="vienas">abra kadabra</div>
.vienas {
height:200px;
border: 1px solid black;
position: relative;
}
div::after {
content:" ";
background: url(http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg);
width:100px;
height: 100px;
}
By default pseudo-elements are set to display inline. Because of this, your width and height properties will not have any affect on the element and it will instead default to the width and height of the inner content.
You need to set it to display: block instead:
div::after {
...
display: block;
}
JSFiddle demo.
Try like this: Demo
CSS:
div:after {
content:"";
background: url("http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg") no-repeat -100px -100px fixed;
width:100px;
height: 100px;
top: 10px;
right: 5px;
position: absolute;
display: inline-block;
}
Related
Here is a fiddle.
<p>foo <a class="infolink" href="#">bar</a> baz</p>
and
a.infolink::before
{
content: '?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
}
The '?' appears but clearly does not have 20ex size. Why not? Tested in Firefox and Chrome.
Note: The ::before and ::after pseudo-elements are actually laid display: inline; by default.
Change the display value to inline-block for the width & height to take effect while maintaining inline formatting context.
a.infolink::before {
content: '?';
display: inline-block;
background: blue;
color: white;
width: 20px;
height: 20px;
}
http://jsfiddle.net/C7rSa/3/
::before and ::after pseudo-elements are laid inline by default, so width and height won't take effect.
Set it to display: inline-block and it should work.
Use this if you have image in container or CSS white-space: nowrap; property
body::before{
content:url(https://i.imgur.com/LJvMTyw.png);
transform: scale(.3);
}
For me it worked when I used display: block.
If you set the element to position: relative and the pseudo to position: absolute, you can adjust the pseudo width and height in relation to the parent element size.
div {
position: relative;
width:400px;
height:200px;
padding: 0;
}
div::before {
position: absolute;
width:100%;
height: 100%
}
add display:block;
demo
p > a.infolink::before {
display:block;
content:'?';
background: blue;
color: white;
width: 20ex;
height: 20ex;
border:1px solid #000;
}
I can get it to work but not using a percentage in width. Pixels work fine
visibility: visible;
content: "stuff";
min-width: 29px;
width: 100%;
float: left;
position: relative;
top: -15px;
left: 0;
I've been struggling for hours to try and get this simple border to appear on top of a div of a set height, but it's just not happening. I've checked out z-indexing and ':after', but nothing seems to be working.
The content's parent is: (establishes the content to be in the middle of the page)
#content {
position: relative;
margin-left:auto;
margin-right:auto;
top: 50px;
width:800px;
}
The content is then filled by the div-class "greycontent":
.greycontent {
position: relative;
z-index: 1;
height: 350px;
background: url(images/stacked_circles.png) repeat;
}
The area that is now covered by the background URL attempts to contain a border (away from edges):
.fill {
position:relative;
z-index: 2;
border-style: solid;
border-width: 2px;
border-color: red;
}
It just won't work. If my description was unclear, this image should clear up what I'm trying to convey:
Thank you!
JsFiddle
Just in case you do not want to put a ::before or ::after elements, you can simply use the background-clip property.
.myDiv {
background-clip: padding-box;
}
Exemple: https://codepen.io/geekschool/pen/JBdpdj
Is this what your trying to achieve? jsFiddle
#content {
position: relative;
margin: 0 auto;
top: 50px;
width:800px;
overflow:hidden;
background:#ccc;
width:800px;
}
.greycontent {
position: relative;
z-index: 1;
height: 350px;
width:350px;
border:1px solid #fff;
background:#ccc;
margin:0 auto 60px;
}
Updated your jsFiddle.
I have two layer,one is black overlay:
#overlay {
background: rgba(0,0,0,0.7);
width: 100%;
height: 100%;
position: fixed;
left: 0;
top: 0;
z-index: 0;
display: none;
}
the other is my text container:
#wrap {
z-index: 999
width:600px;
height:600px;
border:5px solid black;
display:none;
color:red;
}
I want let the overlay and the container show at the same time:
$(document).click(function () {
$('#overlay').add('#wrap').fadeIn();
})
but the text container is always under the overlay,although I have set the overlay z-index to 0 and set the container z-index to 999.
Demo is here
finally I found I have to set the overlay z-index to -1, it would work.
Why I can not set the overlay's z-index more higher?Because its position is fixed?
z-index is not applied to #wrap because it has flow positioning. A box must have at least position: relative; before z-index takes effect.
Also, your z-index value is missing its semicolon. Make it z-index: 999; and it works. My code is below:
#wrap {
z-index: 999;
width:600px;
height:600px;
border:5px solid black;
background: #FFF;
display:none;
color:red;
position: relative; }
An element with static positioning(this is the default) is unaffected by the z-index property, change its positioning to relative
Is there a simple way to style element like this?
Supposed to be used on a mobile so CSS3 is fully available. Can't think of a simple way. Images are out of question.
It has to be this blocky and there supposed to be a text within (this is a blocky 8-bit button)
This jumps off of feeela's beginnings, but it's different enough to warrant its own answer.
Rather than putting a colored block overly, it only adds red-colored elements, allowing background to show through. HOWEVER, to calculate it properly (so that they're square corners!) I had to set a fixed width height. There's probably some sort of wacky way to do this with percentages, but for proof of concept it was too headachey to contemplate. Since the requirement is for fixed height variable width, this should work.
The pseudo-elements need to have content or they will "collapse". The content can be empty, but that property needs to be set.
CSS:
/* main button block */
.button {
display:inline-block;
background: #f00;
position: relative;
line-height: 60px;
text-align: center;
padding: 0 20px;
height: 60px;
margin-left: 0.5em;
}
/* common background color to all */
.button, .button::before, .button::after {
background-color: #f00;
}
/* shared styles to make left and right lines */
.button::before, .button::after {
content: "";
position: absolute;
height: 50px;
width: 5px;
top: 5px;
}
/* pull the left 'line' out to the left */
.button::before {
left: -5px;
}
/* pull the right 'line' out to the right */
.button::after {
right: -5px;
}
Fiddle: http://jsfiddle.net/3R9c5/2/
How about this?
HTML:
<div class="block">(text goes here)</div>
CSS:
body {background:#1990D7;}
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px;
position:relative; text-align:center; font-weight:bold; color:yellow}
.block::before {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; left:-4px; bottom:4px; width:4px;}
.block::after {display:inline-block; background:#FF1200; content:'';
position:absolute; top:4px; right:-4px; bottom:4px; width:4px;}
Edit: updated after the latest insights into the demands of the question.
You can insert each of that four blocky-corners by appending pseudo elements via ::before or ::after.
e.g.:
.button {
background: #f00;
position: relative;
}
/* corner top left */
.button::after {
position: absolute;
top: 0; left: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner top right */
.button::after {
position: absolute;
top: 0; right: 0;
width: 5px; height: 5px;
background: #00f;
}
/* corner bottom left */
/* … */
The CSS border-radius attribute
maybe this will help you. Or you can just add new class, "cadre" for example
.cadre
{
border-radius: 10px;
}
to your css file, then affect it to the div.
I don't think border-radius can accomplish that. This is the simplest way I can think of:
http://jsfiddle.net/DpLdt/
CSS:
body {
background:blue;
}
div#clipcorners {
width:500px;
height:200px;
background:red;
position:relative;
margin:100px auto;
}
span#a,span#b {
position:absolute;
width:10px;
height:180px;
top:10px;
background:red;
}
span#a {
left:-10px;
}
span#b {
right:-10px;
}
HTML:
<div id="clipcorners">
<span id="a">
</span>
<span id="b">
</span>
</div>
I need make something like this. and I want to do it for a <div></div> which has width in %
I can do this by using an image and adding another div inside and z-index.
But I want to know if it's possible to make in this circle in backgroud using css.
Keep it simple:
.circle
{
border-radius: 50%;
width: 200px;
height: 200px;
}
Width and height can be anything, as long as they're equal
Check with following css. Demo
.circle {
width: 140px;
height: 140px;
background: red;
-moz-border-radius: 70px;
-webkit-border-radius: 70px;
border-radius: 70px;
}
For more shapes you can follow following urls:
http://davidwalsh.name/css-triangles
Use circular gradient for background property
div {
width: 400px; height: 400px;
background: radial-gradient(ellipse at center, #f73134 0%,#ff0000 47%,#ff0000 47%,#23bc2b 47%,#23bc2b 48%);
}
<div></div>
It can be done using the border-radius property. basically, you need to set the border-radius to exactly half of the height and width to get a circle.
JSFiddle
HTML
<div id="container">
<div id="inner">
</div>
</div>
CSS
#container
{
height:400px;
width:400px;
border:1px black solid;
}
#inner
{
height:200px;
width:200px;
background:black;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
margin-left:25%;
margin-top:25%;
}
You can use the :before and :after pseudo-classes to put a multi-layered background on a element.
#divID : before {
background: url(someImage);
}
#div : after {
background : url(someotherImage) -10% no-repeat;
}
Here is a solution for doing it with a single div element with CSS properties, border-radius does the magic.
CSS:
.circle{
width:100px;
height:100px;
border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000
}
HTML:
<div class="circle">Hello</div>
Maybe you should use a display inline-block too:
.circle {
display: inline-block;
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
z-index: -1;
}
If you want to do it with only 1 element, you can use the ::before and ::after pseudo elements for the same div instead of a wrapper.
See http://css-tricks.com/pseudo-element-roundup/