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.
Related
I was wondering if it was possible to replace an image on an html page using the only the stylesheet. I know this is not common practice, but the only thing I have access to is the stylesheet and they used inline styles in the html. I have no way of editing the html file.
I inspected the element and it looks like this:
I'm trying to replace the "bullet_ball_glass_green" image. I was able to hide it by adding this to the stylesheet:
.rmLeftImage{
visibility: hidden;
}
But is it possible to replace the image or add another one on top of it without editing the html page?
You could set the background image of a div around the image (and keeping the css you have that hides the image).
.div_class{
background:url('http://yourdomain.com/yourimage.jpg') no-repeat 50% 50%;
width:100px;
height:100px;
}
the css have a higher hierarchy than the style in html, you could just add
img.rmLeftImage {
background-image: url('path to your image');
}
Keep hiding the image with
visibility:hidden;
since you want it to keep the width/height of the image and change the background image with
background:url('urltoyourimage')
Here is, perhaps a slightly controversial technique with support on IE8+ and pretty much every other browser.
.rmLeftImage {
content: '';
}
.rmLeftImage:after {
display: block;
content: '';
background: url(../your/new/image);
width: 220px; /* image width */
height: 240px; /* image height */
position: relative; /* image width */
}
See http://jsfiddle.net/z9QUu/2/ for an example. I've only tested this in chrome so far, where it appears to work. Providing it works cross-browser, you won't need to modify the HTML, at all.
Interestingly, I could only get it to work when applying content: ''; to .rmLeftImage, heres the jsfiddle without it: http://jsfiddle.net/Mw76h/, just for demonstration purposes.
I've set background-image on a couple of span elements, but they aren't showing up, I think because my height and width settings are being ignored.
HTML source:
<div class="textwidget">
<span id="starthere" class="sidebar-poster"></span>
<span id="#primarydocs" class="sidebar-poster"></span>
<span id="donate" class="sidebar-poster"></span>
</div>
CSS:
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
None of the background images are actually visible.
In Chrome Developer Tools, Under Computed Style, these two spans do appear to have a background image. If I copy and paste the URL of this image, I see the image. Yet nothing is actually rendering.
[UPDATE - this part is solved, thanks] In Chrome Developer Tools, under Matched Rules, only the #starthere and #donate spans are actually picking up the background-image attribute. The #primarydocs span is not. Why not?
SPAN is an inline element. Which will indeed ignore such things. Try setting the display mode in your CSS to something like: display: block;
I think your spans need to have display:inline-block, an ordinary span will always have its 'natural' width and height.
Since a is display: inline; automatically it cannot take width and height attributes from CSS.
If you want to use the inline characteristic but without inner content (ie: <span>content</span>) and instead have a background image, use padding instead.
ie:
span {
padding: 10px;
}
but input the number of pixels you would need to show the image.
Solved it - you can't set height and width on span because it is an inline element. Switching to div solved it.
Phew.
If anyone knows how to debug CSS with better tools than guesswork, hope, Google searches and swearing, please let me know!
I want to declare a link without any content, instead I want to use a background image for it. But I can see the background only when I put something between <a></a> tags. How can I solve it?
Make the link a block-level element, and give it a width and height:
a.somelink {
display: block;
width: 100px;
height: 20px;
background-image: url(someimage.png)
}
Or just use an <img /> inside the <a> instead of using a background-image.
A link should always have text, whether it is direct text content or the alt tag of an image. You can use a negative text-indent style to hide the text from view, replacing it with the image. Example:
check out my important stuff
#important-link {
background: transparent url(../images/important-stuff.png) no-repeat top left;
display: block; /* needed as <a> tag is inline by default */
height: 100px; /* whatever image width is */
text-indent: -9999px; /* moves the text off the screen */
width: 100px; /* whatever image height is */
}
This is a common technique for image replacement where specific fonts are needed, while preserving accessibility (mostly, CSS+no images is the only caveat) and SEO benefits from the text.
Best practice and SEO friendly CSS Text Replacement With Images:
http://css-tricks.com/css-image-replacement/
To use a background image, give it a style of display: block; or display: inline-block; depending what you're after.
Example HTML:
CSS:
a.ImgLink {
display: block;
background: #FFFFFF url(img.jpg);
width: 200px;
height: 100px;
}
/* Add a hover if you want */
a.ImgLink:hover {
background: #FFFFFF url(imgHover.jpg);
}
What about this:
<a href="#> </a>
then remove the possible underline with the following css:
a.somelink {
display: block;
text-decoration:none;
background-image: url(someimage.png)
}
Like this one:
Or should I do like this instead and change the font-size to zero:
Home
Edit:
No one here seems to understand my question. So I'll post some CSS too:
#logo {
display: block;
width: 326px;
height: 69px;
background-image: url(images/logo.gif);
background-repeat: no-repeat;
}
#logo:hover {
background-image: url(images/logo-hover.gif);
}
It looks like that, so I can't replace it with an image because then the hover wouldn't work. Seems like there is no solution to this so I guess I'll skip it.
Not including descriptive text of one form or another (text, title or description) would be a serious accessibility failure regardless of any SEO issues.
Edit: If you're asking how to hide the text of a link given a desire to use a background image, there's a few ways to do that. My preferred option (where possible) is to provide a fixed height and then a line height ~3 times as large and turn overflow off. You can also adjust letter spacing to reduce the width towards zero, e.g. from production code:
background: transparent url(../images/sprites/icons.gif) no-repeat;
a.foo
{
width: 16px;
height: 16px;
display: block;
overflow: hidden;
line-height: 666px;
letter-spacing: -1.1em;
}
As I understand, Google does use link text to rank pages. A page with an incoming link text of "foo" will give that page a higher search result position when searching for "foo".
Using your example, you could do the following:
Use a descriptive text in the link:
Foo
<style type="text/css">
a.foo {
display: block;
text-indent: -999em; /* Hide the text, using a negative indent (only works on single lines) */
background: url(foo.png) no-repeat;
width: 329px;
height: 69px;
}
a.foo:hover {
background-position: 0 -69px; /* Using spites to switch between normal and hover state */
}
</style>
Use an image in the page:
<img src="foo.png" width="329" height="69" alt="Foo" />
<style type="text/css">
a.foo:hover {
background: url(foo-hover.png) no-repeat;
}
a.foo:hover img {
visibility: hidden; /* Hide the image on hover, so the background of the link is shown, but dimensions and page flow stay the same */
}
</style>
Which method you choose, depends on what you want to do with it. For example: if you're creating an print style sheet, using the image would be preferred, because background images won't be printed (by default).
You should provide either an image or text for the link. If you go the image route, be sure to have alternate text as well that describes the image and/or the link destination.
Failure to provide ANY context for the link, which is what you are doing now, having nothingness be a link, is poor usability as there is no visual hint for a user using a conventional browser or any way for a screen-reader to handle the link.
A better approach may be to put an image in the a tag; the a:hover CSS can still work with this (at least with some browsers). As a simple example,
a { color: #30f; }
a:active, a:hover {
text-decoration: none;
color: #F30;
background: yellow;
}
can cause a yellow bar to appear adjacent to an image in an a href.
In the terms of SEO, Atl tag is needed as long as it involves images.
I know this is probably the dumbest question ever, however I am a total beginner when it comes to CSS; how do you hyperlink an image on a webpage using an image which is sourced from CSS? I am trying to set the title image on my website linkable to the frontpage. Thanks!
Edit: Just to make it clear, I'm sourcing my image from CSS, the CSS code for the header div is as follows:-
#header
{
width: 1000px;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
I want to know how to make this div hyperlinked on my webpage without having to make it an anchor rather than a div.
You control design and styles with CSS, not the behavior of your content.
You're going to have to use something like <a id="header" href="[your link]">Logo</a> and then have a CSS block such as:
a#header {
background-image: url(...);
display: block;
width: ..;
height: ...;
}
You cannot nest a div inside <a> and still have 'valid' code. <a> is an inline element that cannot legally contain a block element. The only non-Javascript way to make a link is with the <a> element.
You can nest your <a> tag inside <div> and then put your image inside :)
If you don't want that, you're going to have to use JavaScript to make your <div> clickable:
Document.getElementById("header").onclick = function() {
window.location='...';
}
To link a css-sourced background-image:
#header {
display:block;
margin: 0px auto;
padding: 0px 15px 0px 15px;
border: none;
background: url(images/title.png) no-repeat bottom;
width: 1000px;
height: 100px;
}
<a id="header" href="blah.html" class="linkedImage">
The key thing here is to turn the anchor tag into a block element, so height and width work. Otherwise it's an inline element and will ignore height.
That's really not a CSS thing. You still need your A tag to make that work. (But use CSS to make sure the image border is either removed, or designed to your required spec.)
<img src="foo" class="whatever" alt="foo alt" />
EDIT: Taking original intent (updated question) into account, a new code sample is below:
<img id="header" alt="foo alt" />
You're still in an HTML world for links, as described by other answers on this question.
sorry to spoil your fun ladies and gentlemen, it is possible.
Write in your header: [link](http://"link here")
then in your css:
#header a[href="https://link here"] {
display: inline-block;
width: 75px;
height: 75px;
font-size: 0;
}
.side .md a[href="link here"] {
background: url(%%picture here%%) no-repeat;
}
then in your css
.titleLink {
background-image: url(imageUrl);
}
You still create links in HTML with 'a' (anchor) tags just like normal. CSS does not have anything that can specify if something is a link to somewhere or not.
Edit
The comments of mine and others still apply. To clarify, you can use JavaScript to make a div act as a link:
<div id="header" onclick="window.location='http://google.com';">My Header</div>
That isn't really great for usability however as people without JavaScript enabled will be unable to click that and have it act as a link.
Also, you may want to add a cursor: pointer; line to your CSS to give the header div the correct mouse cursor for a link.
CSS is for presentation only, not content. A link is content and should be put into the HTML of the site using a standard <a href=""> tag. You can then style this link (or add an image to the link) using CSS.
You have to use an anchor element, wrapped in a container. On your homepage, your title would normally be an h1, but then on content pages it would probably change to a div. You should also always have text in the anchor element for people without CSS support and/or screen readers. The easiest way to hide that is through CSS. Here are both examples:
<h1 id="title"><a title="Home" href="index.html>My Title</a></h1>
<div id="title"><a title="Home" href="index.html>My Title</a></div>
and the CSS:
#title {
position:relative; /*Makes this a containing element*/
}
#title a {
background: transparent url(../images/logo.png) no-repeat scroll 0 0;
display:block;
text-indent:-9999px; /*Hides the anchor text*/
height:50px; /*Set height and width to the exact size of your image*/
width:200px;
}
Depending on the rest of your stylesheet you may need to adjus it for the h1 to make it look the same as the div, check out CSS Resets for possible solutions to this.
Try this - use an H1 as the seat of your graphic instead. Saved my butt time and time again:
<h1 class="technique-six">
CSS-Tricks
</h1>
h1.technique-six {
width: 350px;
padding: 75px 0 0 0;
height: 0;
background: url("images/header-image.jpg") no-repeat;
overflow: hidden;
}
Accessible, and also solid across browsers IE6 and > . You could also link the H1.
HTML is the only way to create links - it defines the structure and content of a web site.
CSS stands for Cascading Style Sheets - it only affects how things look.
Although normally an <a/>; tag is the only way to create a link, you can make a <div/> clickable with JavaScript. I'd use jQuery:
$("div#header").click(function() {window.location=XXXXXX;});