I am trying to design a layout for my forum that has 2 background images on a div or a table. I got the idea after looking at this forum's design (http://s4.zetaboards.com/APTSecretServices/index/) If you see on the main category labeled "Category" it contains 2 background images. From exploring the CSS (http://s4.zetaboards.com/c/35079/404/css.css) I found out it was labeled h2left and h2right.
Code:
.h2left {
background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png) no-repeat;
}
.h2right {
background: url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png) no-repeat right
top;
height: 40px;
}
After seeing this I realized they used the h2, and then on the forum they combine it all together somehow It appears to be done by this code
<table class="cat_head"><tr><td>
<h2>
Category
</h2>
</td></tr></table>
Which is very confusing considering I can't find any proof on how they combined the two.
If you don'y have to support IE<8 than the clean solution is to use pseudo-selectors :before and :after. They really contain unleashed power!
Check the browser support: http://caniuse.com/css-gencontent
In the case of IE6, IE7 the user get only background declared on 'real' DOM element.
Remember that pseudo elements :before and :after cannot be used on empty elements (like images) - because there are 'injected' into element before first (:before) and last (:after) node. Remember that you have to include 'content' declaration inside :after and :before to display the declared styles, too.
On more complicated layouts you can get very nice effects by using "position: absolute" and "z-index" (1.stacking context will prevent layers overlapping by complicated layouts, 2. for IE8 z-index by pseudo-elements don't work, so layers are displayed in the same order as rendered in DOM)
More about pseudo element is nice explained there:
http://www.hongkiat.com/blog/pseudo-element-before-after/
So, conclusion:
<tr>
<td>
<h2 class="table-header">Some text</h2>
</td>
</tr>
.table-header {
/* EDITED: didn't put position on affected element, first that makes the coordinates of :after elements to be calculated from the right element. Sorry! */
position: relative;
/* if element is h2 than we got already "display: block" => width: 100%, height:auto */
font-size:1.5em;
line-height:2.5em; /* that centers the text if it is only one line long. For multi-lined text that method is not reasonable. I took arbitrary height bigger than font-size */
background: url(img-main.jpg);
}
.table-header:after {
content: '';
position: absolute;
top:0; right: 0; bottom: 0; left:0;
background: url(img-additional.jpg);
background-repeat: no-repeat;
background-position: center right;
}
Hope that helps
The markup on that website is
<div class="h2wrap">
<div class="h2left">
<div class="h2right">
<div class="h2center">
</div>
</div>
</div>
</div>
so its a div within a div
You can use this css for multiple background images
#bg_table {
background: url(http://z4.ifrm.com/30294/164/0/p1083155/h2left.png), url(http://z4.ifrm.com/30294/164/0/p1083156/h2right.png);
background-position: left center, right center;
background-repeat: no-repeat;
}
Source: http://www.css3.info/preview/multiple-backgrounds/
Related
Question
Can I style just a part of a single character?
Meaning
CSS attributes cannot be assigned to parts of characters. But if you want to style only a certain section of a character, there is no standardized way to do that.
Example
Is it possible to style an "X" which is half-way red and then black?
Not working code
<div class="content">
X
</div>
.content {
position: relative;
font-size: 50px;
color: black;
}
.content:after {
content: 'X';
color: red;
width: 50%;
position: absolute;
overflow: hidden;
}
Demo on jsFiddle
Purpose
My intention is styling the Font Awesome icon-star symbol. If I have an overlay with dynamic width, shouldn't it be possible to create an exact visualization of scores?
While playing around with a demo fiddle, i figured it out myself and wanted to share my solution. It's quite simple.
First things first: The DEMO
To partly style a single character, you need extra markup for your content. Basically, you need to duplicate it:
<div class="content">
<span class="overlay">X</span>
X
</div>
Using pseudo-elements like :after or :before would be nicer, but i didn't found a way to do that.
The overlay needs to be positioned absolutely to the content element:
.content {
display: inline-block;
position: relative;
color: black;
}
.overlay {
width: 50%;
position: absolute;
color: red;
overflow: hidden;
}
Do not forget overflow: hidden; in order to cut off the remaing part of the "X".
You can use any width instead of 50% which makes this approach very flexible. You can even use a custom height, other CSS attributes or a combination of multiple attributes.
Extended DEMO
Great work on your solution. I’ve got a version that uses :after (instead of duplicating the content in the HTML) working in Chrome 19.
http://jsfiddle.net/v5xzJ/4/
Basically:
Set position:relative on .content
Position :after absolutely
Set :after to overflow:hidden
Adjust the width, height, text-indent and line-height of :after to hide bits of it.
I’m not sure if it’ll work well cross-browser though — the em values will probably work out a bit differently. (Obviously it definitely won’t work in IE 7 or below.)
In addition, you end up having to duplicate the content in your CSS file instead of the HTML, which might not be optimal depending on the situation.
I would like to put headlines in my site like this: http://cl.ly/0m3F0j392e0G1n0s0T34
What i'd ideally like to do is use text for the headline and then have a 10px by 10px gif repeat horizontally after it.
EDIT: I should add that I would like to use a textured background so I can't set any solid colours to the h2 element.
I have been able to add in the gif after the headline but I can't get it to repeat, even if i add repeat-x. Here's the code i used:
h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}
Are there any workarounds for this or any alternate methods? I'd rather not resort to slicing the entire headline as an image. I've thought about floating the headline to the left then floating an empty div to the right with the gif as a repeating background image but I figure this is what the :after pseudo-element is for, right?
A little hacky and will involve adding overflow-x:hidden; to the parent element, but should do the trick:
h2 {
position: relative;
padding-right: 10px;
float: left;
}
h2::after {
content: '';
position: absolute;
left: 100%;
right: 9999px;
background: url(image.gif);
height: 10px;
width: 9999px;
}
You can set any attributes to your after pseudo element. What I would do it set the content to "" (empty) and then set a width and height to the pseudo element. You can set the background to the repeated gif as normal then.
h2:after {
content: "";
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}
When you use content:url() pressed class create an img element. You need to use background in this case. Like what Erik said.
But if size of your text in heading is not known (aka dynamic content) then pseudo element is not a good work around. You can use a markup like this:
<h1><span>your text content</span></h1>
And then add the repetitive background to h
h1{ background:'url(img/imagehere.gif) repeat-x';}
To hide background in part that text apears make the span's background a solid color
span{background:white}
Update:
if you have a background image under your h1, then you can do this:
Same HTML: <h1><span>your text content</span></h1>
CSS:
say your body have a background image:
body{background-image:(foo)}
then you want bar to be your image to repeat after the heading. You should do this:
h1{background:url(bar)}
And add same background your body have to the span containing your text:
h1 span{background-image:(foo)}
This would solve your problem. Look at this Fiddle to see in action. It's not depended on your text size or anything else.
Note: if you are using an span then you should make it dispaly:inline-block
Update:
Based on your request I rethink on this. I used tables this time. Code without explanation:
HTML
<table>
<tbody>
<tr>
<td><h1>Heading</h1></td>
<td class="pattern"></td>
</tr>
</tbody>
</table>
CSS
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
See in action<
The answer above from Erik Hinton will work if you add "display:block" declaration, as below:
h2:after {
content: "";
display:block;
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}
I have a bunch of img tags on one of the pages in my site. I want to be able to add a custom image on top of a few of these images based on the css class applied to them
So in case of the statements below
<img src="image_path"/>
<img class="newclass" src="image_path"/>
I want another image added on top of the 2nd image and nothing on the first image.
Can I do this using CSS?
Thanks.
Why I want to do it this way
I can do this using 2 img tags. But it would be easier for me to make changes and add more images by just adding a class name to the img tag rather than adding another img tag itself in the future.
No, you can't do it in pure CSS with just a single img element.
:after is what you would use, but that doesn't work for img elements:
Note. This specification does not
fully define the interaction of
:before and :after with replaced
elements (such as IMG in HTML). This
will be defined in more detail in a
future specification.
You could do it by adding a containing element, and using :after on that.
It works "everywhere" http://caniuse.com/#feat=css-gencontent - with the exception of IE7.
For whatever reason, this specific usage of :after also doesn't work in IE8. It finally works in IE9.
http://jsfiddle.net/AQHnA/
<div class="newclass"><img src="http://dummyimage.com/100x100/ccc/fff" /></div>
.newclass {
position: relative;
float: left
}
.newclass img {
display: block
}
.newclass:after {
background: url(http://dummyimage.com/32x32/f0f/fff);
width: 32px;
height: 32px;
display: block;
content: ' ';
position: absolute;
bottom: 0;
right: 0
}
It's best to have a parent element for your image. This is how you can do it with links (or any other element):
.newclass {
background:url(2.jpg) no-repeat;
display:inline-block
}
.newclass img {
position:relative;
z-index:-1
}
<img src="1.jpg" />
<a class="newclass" href="#"><img src="1.jpg" /></a>
This works fine in IE5.5, IE6, IE7, IE8 and Safari 5 (browsers that I tested).
Edit: thirtydot noticed that this doesn't work if you have a parent container with a background color (because of the z-index on the images). See comments.
I want to show images on the page but I don't want to hardcode the references to the images in html.
Is it possible to do something like:
HTML:
<span id="got-easier"></span>
CSS:
#got-easier { image: url(/i/trend-down.gif); }
(IE6 should be supported)
Yes, use a background image :)
#got-easier { background-image: url(/i/trend-down.gif); }
Remember to set a span to display: block; and set width/height of your image if you use it.
As David Dorward pointed out, if it's an image relevant to the information, it should be included in the document with an <img> tag and alt attribute.
Heya, the common term for it is css Image Replacement technique (or IR). Here are the commonly used methods currently. Just choose any of the two ;)
/* Leahy Langridge Method */
span#imageName {
display: block;
height: 0 !important;
overflow: hidden;
padding-top: 0px; /* height of image */
width: 0px; /* width of image */
background: url(url/of/image.jpg) no-repeat
}
/* Phark Method */
span#imageName {
display: block;
width: 0px;
height: 0px;
background: url(url/of/image.jpg) no-repeat;
text-indent: -9999px
}
In case you want to display the images inline, position:absolute does the trick:
#got-easier {
display:inline;
position:absolute;
width:img-Xpx;
height:img-Ypx;
background:url(/i/trend-down.gif) no-repeat;
}
The only problem with this is that, since the image position is absolute, it will overlay whatever is next to it (in IE6 it might appear behind), and the workarounds that I found to fix this (with both CSS and jQuery) aren't supported in IE6. Your image-container will have to be followed by new line.
This might be useful when, for instance, you'd like to place a (?) image next to a form caption or a button (that usually have nothing next to them) to display help with onmouseover.
I'm trying to replace <img> elements with emoticons with different images through CSS (so that I can match them to the style being used). I thought that I can just insert another smiley with the :before CSS pseudo-element, and hide the original element. This would work, except that the browsers don't seem to insert the extra image! This only happens if I try it with an <img> element, works perfectly when I try it with <span>. The code I tried:
<!doctype html>
<style>
img.icon:before {
display: inline-block;
content: url(smiley.png);
width: 16px;
height: 16px;
}
</style>
<p>Lorem ipsum <img src="smiley.png" class="icon" alt=":)"> dolor sit amet...</p>
The specification at http://www.w3.org/TR/CSS2/generate.html#before-after-content has a note at the bottom:
Note. This specification does not
fully define the interaction of
:before and :after with replaced
elements (such as IMG in HTML). This
will be defined in more detail in a
future specification.
We are using a background image, like it is suggested in the comments, but that has the problem that the images won't print with default printing settings then. The next option we are considering is using <span class="icon"><img ...></span> and putting the :before on the span, but it's a little ugly.
I also wonder if this is specified in CSS3 so that there is a chance for fixing it in the near future.
It's almost certainly easier to use:
img.icon:before {
display: inline-block;
background-image: transparent url(smiley.png) 0 0 no-repeat;
width: 16px;
height: 16px;
}
You might not want to use background-image, but the :before and :after psuedo-elements are already poorly implemented; trying to use content to place images is probably a step too far at this stage.
I'm not sure I see the point of this approach, though; it seems you'll end with two versions of smiley.png next to each other. This might be more easily implemented (replacing the generic smiley.png with a themed smiley.png) on the server-side, than client.
Another way to do this is just set a background-image and hide the img element with overflow, without using :before:
<style>
.icon {
width: 0;
height: 0;
padding-top: 16px;
padding-left: 16px;
overflow: hidden;
background-position: 0 0;
background-repeat: no-repeat;
}
.smiley { background-image: url(smiley.png); }
</style>
<img class="icon smiley" src="smiley.png" alt=":)">
Also, have a look at this article about using data attributes instead of classes for this.