I swear I've seen people add multiple background images to an element using the :after selector. For whatever reason, I can't get it to work. What am I doing wrong? Can anyone point me to a working example?
#el li { background:url(image1.jpg) top center;}
#el li:after { background:url(image2.jpg) bottom center;}
Thanks!
As Blender notes, there is some type of dom node added as content to the end of the element's content. However, you also need to provide some kind of content AFAICT to make it work.
<ul id="el">
<li>Hello world</li>
</ul>
#el li {
background:url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=128&d=identicon&r=PG) top center no-repeat;
width: 200px;
height: 200px;
overflow: hidden;
}
#el li:after {
background:url(http://www.gravatar.com/avatar/05a3a91994b86e4e45246b57b0ec3c7d?s=128&d=identicon&r=PG) bottom center;
content: " ";
display: block;
position: relative;
height: 500px;
z-index: -100;
}
http://jsfiddle.net/QhUsS/
:before and :after always need the following:
{
content: '';
}
With CSS3 it could be done by
#el li {
background: url(image1.jpg), url(image2.jpg);
background-position: top center, bottom center;
background-repeat: no-repeat;
}
You can do it, but I've never tried. :after seems to create an inline-like element after your element. You can try adding this CSS (no idea if it works):
display: block;
position: relative;
top: -200px;
height: 200px;
width: 200px;
Related
I have some markers over the top of a map and the goal is to have a hover effect over each marker to show additional information. I used an ID for the image and the following CSS:
#pan {
position: absolute;
display: inline-block;
}
#pan:hover:before {
content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') no-repeat !important;
display: block;
position: absolute!important;
top: 50px;
right: -200px!important;
z-index: 9999!important;
}
Works great in safari! However, nothing happens in Firefox. Any help would be appreciated!
Do not use no-repeat inside content property. By specification no-repeat is not valid content property value.
If you want more image control use background property. Because of images or gradients inserted using content cannot be resized.
The problem here is you are using no-repeat on a content property. Just remove it.
#pan:hover:before {
content: url('http://devmg.redtogreendesign.com/wp-content/uploads/2014/08/PAN_Hover.png') !important;
display: block;
position: absolute!important;
top: 50px;
right: -200px!important;
z-index: 9999!important;
}
DEMO
I need to align the p element to the bottom center of the page but something is wrong. I am making an HTML5 page.
Here is the CSS selector:
p { vertical-align:80px; }
If you need exactly "align the p element to the bottom center of the page"
p {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
}
demo
but it's not the best solution for most websites. Suppose, you are trying to make footer with some copyright (or year, or your name). In this case you have to use more complicated html and css, that includes main div, footer div, etc.
Please try this:
CSS
html,body{
marign: 0;
padding: 0;
height: 100%;
}
body:after {
content: "";
display: inline-block;
height: 100%;
width: 0;
}
p{
display: inline-block;
vertical-align: bottom;
}
Please view the demo. You will change the vertical-align for p, lay hime at top or middle.
I know I have seen this somewhere before, but I am trying to create a black fixed navbar with a marker that is transparent cut-out triangle. I need help getting the triangle cut-out to be transparent to the background, so when you scroll the page, you can see through to the content beneath:
I have a standard list/anchor navigation with a javascript to move the .current class depending upon the page section:
<div class="navbar">
<ul>
<li class="current"><a>home</a></li>
<li><a>products</a></li>
<li><a>services</a></li>
<li><a>contact us</a></li>
</ul>
</div>
styled with the following CSS:
.navbar {
width: 100%;
position: fixed;
background: black;
float: left;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
float: left;
}
a {
padding: 10px 20px 20px;
}
.current a {
background: transparent url('../img/wedge-red.png') center bottom no-repeat;
}
The only way I can think to do it is to add extra divs on either side of the ul and assign the background to them, and then use a transparent png with a cutout as the background of the li a's.
Is there a way to do this without getting really ugly like that, and adding extra divs?
Try CSS pseudo elements!
Add 2 free DOM elements before and after an existing element in the DOM. Ideal in cases when you don't want to add stuff to your markup to satisfy styling needs.
CSS Markup
.item:before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: silver;
}
.item:after {
content:"";
display: inline-block;
width: 20px;
height: 20px;
background-color: gray;
}
HTML
<div class="item">Content</div>
Check this JSFiddle for a demo.
Make sure you set content: "" and display:block in order to see them.
Here's what I ended up with -- extending the borders and cropping them with overflow: hidden; (a little hacky, but it works and doesn't add elements to the DOM):
.navbar {
width: 100%;
height: 60px;
position: fixed;
overflow: hidden;
}
ul {
border-left: solid black 2000px;
border-right: solid black 2000px;
position: absolute;
top: 0;
left: 50%;
margin-left: -2000px;
}
The above worked nicely for my purposes, and behaves in a responsive environment.
The other answer on this page, using :before and :after pseudo elements didn't work for my purposes. It ended up being too fussy, the pseudo elements wouldn't align properly, and kept wrapping to the next line when the browser window was resized. That solution as suggested works with fixed-width elements, not percentages as was specified in the original question.
Take a look at this screenshoot first:
That white box is ON the orange background, I want it to be under it exactly as pointed with the arrow. The rest should be visible of course: it should just hide this from being on the orange background.
Here is the orange background style and the white box itself:
Orange background:
body {
margin: 0;
padding: 0;
background: url("../img/back.png") repeat-x top #fff;
text-align: left;
color: #8a5225;
}
White box:
#box {
background: url("../img/box.png") no-repeat;
width: 163px;
height: 41px;
float: right;
position: relative;
}
Hope you give me some solutions for that. I've been trying using the z-index but it doesn't bring any results...
You won't be able to do this based on your current html structure. Z-index only works for positioned elements. ie relative, absolute or fixed. You won't be able to apply these to the body element. You can try, but I tried and it didn't work. Instead put the orange background into another div and draw the lower one up under it.
http://jsfiddle.net/5bsty/
<div class="one">First div</div>
<div class="two">Second div</div>
div.one {
background: #c74d12;
z-index: 3;
position: relative;
}
div.two {
position: relative;
top: -10px;
z-index: 1;
background: white;
}
use a z-index and you should be done.. give the orange background a higher z-index
I think you look like this
You take two div and parent div define position relative and child div define absolute properties and z-index is compulsory .
css
div.one {
background: #c74d12;
position: relative;
z-index:2;
}
div.two {
position: absolute;
top:11px;
background: green;
left:0;
right:0;
z-index:1;
}
Html
<div class="one">First div</div>
<div class="two">Second div</div>
Check to live demo http://jsfiddle.net/rohitazad/5bsty/3/
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_style_zindex
Reffer this..:( ?
I'm trying to learn how to use the :before and :after pseudo elements. I'm trying to add a black background to the bottom of the page as a sticky footer but it doesn't seem to be working correctly.
Basically I have a repeating image as the background of the HTML element and then I add an absolute div positioned at the bottom with a solid black background.
I'd just like to point out that this is a learning experiment and not really how I'd achieve the same effect but what I'm trying is working in Firefox but not in Chrome!
Here's my CSS:
html {
background-image: url('images/template/html-bg.jpg');
background-position: top left;
background-repeat: repeat-x;
background-color: #0e0e0e;
height: 100%;
position: relative;
}
html:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
In FF the page is rendered as I'd expect but in Chrome the whole page is black... Any ideas, am I doing this wrong?
Your CSS should work as expected, as your pseudo-element should be drawn in the context of the initial containing block (the viewport, represented by the html element) anyway, which is exactly what Firefox is doing.
Your particular issue was reported as a Chrome bug, but it hasn't been addressed. As a workaround, you can apply your pseudo-element to body instead:
body:before {
content: "";
display: block;
background-color: #000;
width: 100%;
height: 138px;
bottom: 0px;
position: absolute;
}
Depending on your layout, you may need to either keep your html rule or change it to body as well.