Using the following HTML:

<p>You can read all of content, or get straight to the <a href="#nittygritty">nitty-gritty</a>.</p>
<p>Alternatively, you can read the  <a href="#grittynitty">gritty-nitty</a>.</p>
<p>Or if you prefer, try the <a href="#wittyditty">witty ditty</a>.</p>
<!--[A whole load of content]-->
<h2 id="nittygritty">Nitty-Gritty</h2>
<h2 id="grittynitty">Gritty-Nitty</h2>
<h2 id="wittyditty">Witty-Ditty</h2>

And the following CSS:

h2 {
	color: #f60;
}

h2:target {
	color: white;
	background: #f60;
}

Not only will the browser jump to the required element (the anchor), it will highlight that element by changing its color to white and its background to orange. Read more…

• No Related Post

You can turn textual links into graphical links with simple image replacement, and with the hover link state, you can create effective image rollovers that will swap one image for another when the cursor passes over the link.

An obvious solution would be to have two images and do something like this to swap one background image for another:

a {
	display: block;
	width: 200px;
	height: 63px;
	background-image: url(images/toucanfade.jpg);
	text-indent: -999em;
}

a:hover {
	background-image: url(toucan.jpg);
}

The trouble with this is that there will be a delay when the link is hovered over, as the image for the rollover downloads, making the effect far from instantaneous.

The way to get around this is to actually have just one image that comprises the two images you want, one on top of the other. Read more…

• No Related Post

background-size Description:

This is a CSS 3 property from the CSS 3 Working Draft. Until the draft has been finalized, there may be additional changes. For most up-to-date information, go to the W3C.

The background-size property allows you to change the size of the background image to better fit your page. It is often thought of as the background stretch property.

background-size in CSS Versions:

background-size Syntax:

background-size: [ [ <length> | <percentage> | auto ]{1,2} || round ]

• length - A specific size
• percentage - A size relative to the container element.
• round - tells the user agent to get it close to that width or height

If you specify one value, the image stretches the same amount for width and height. Two values equal the width then the height to stretch. Read more…

• How to use CSS Background Properties
• Top Useful CSS Tips For Beginners
• CSS ID Selector
• Use shorthand CSS notation
• Organize your CSS-code
• HTML Basics
• CSS Framework
• 150 CSS Examples
• Using Logo with CSS
• Introduction to CSS3