If I have an image like this (for example):
(source: tiscali.it)
with more background element for my web site, how can extract a single element with css properties?
You should use the "CSS Sprite" method. It means that you need to create an element block width specified width and height, then give it a background-image along with background-position and backgorund-url, then hide everything that goes out of the box overflow:hidden;
reference to this tutorial for example, it's well explained there: CSS Sprite link
Use CSS sprites
http://www.google.de/search?q=css+sprites
Example with your image
http://jsfiddle.net/qxVf8/
html
<div class="sprite sprite1">
</div>
css
.sprite {
background: url(http://www.tiscali.it/v007/img/el.v004.png) 0 0 transparent;
}
.sprite1 {
width: 79px;
height: 28px;
background-position: -0px -305px;
border: 1px solid magenta;
}
You can use the css sprites technique for that.
Related
I'm trying to use inline CSS to style an image sprite. So obviously, I need background-position to work, but it's not. I'm not sure what's wrong. It's supposed to be a clickable image that links to another page of the site, but the CSS isn't working.
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style=background-image: "-20px;"></div>;
<div class="homepage"><img src="http://imageLinkToHomepage.com/" style="background-image:-20px;"></div>
I think you had some quote marks mixed up there...
Looks like you're trying to apply the background-position property to an image tag, which won't work. Background properties won't apply to image tags. For your specific use case, you could apply a background image to your anchor tag without needing an image element - like so:
<div class="homepage">
</div>
.image-button {
display: inline-block;
width: 55px;
height: 55px;
background: url('http://3.bp.blogspot.com/-q0CJBWRLWUs/T_z2_c7TunI/AAAAAAAABPk/rS7fmE1P-B4/s1600/megaman7.png') no-repeat 0px 0px;
}
.image-button:hover {
background-position: -55px 0px;
}
View this in action here: http://codepen.io/anon/pen/PqKMLo
I was facing the same issue and I got it done by writing !important.No rule was overridden but css was not applying the position without making it important, seems like a bug.
<div class="ProposalBanner" style="background:url(...\imgs\BannerPRop.jpg) no-repeat center -31px !important"></div>
I read once how to create cross-browser rounded buttons with shadow using images, I lost my bookmarks unfortunately that's why I ask does anybody remember the technique.
There is left side picture i.e
And then very wide body image which ends up with right curved border/shadow like this :
So at the end you end up with one button which can be used with multiple sizes? I was googling this, but it seems noways everyone use css without images.
Does anybody knows how this technique is called or can refer me to the link? or give me code example, I'd appreciate any of those
When using an image for the start and one for end of the button, these technique is called "sliding doors" and there are myriads of search results with any search engine…
For an introduction read the A List Apart article: http://www.alistapart.com/articles/slidingdoors
But as Neurofluxation asked you in the comment above: Why the hell would you do that years after we have multiple other methods of styling a button in CSS? The A List Apart article for example is from 2003 - which is an age in Internet terms.
This technique is a variation of the "Sliding Doors" technique:
http://www.alistapart.com/articles/slidingdoors/
http://css-tricks.com/snippets/css/perfect-css-sprite-sliding-doors-button/
http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/
Basically you use markup like this:
<button><span>Text</span></button>
Then style the span with the edge image to the side, overlapping the main background image of the parent element. Something like this:
button {
background:url(main-image.png) top right no-repeat;
border:0;
padding:0;
width:80px; /* with only 1 "door", you might need to set a width */
/* other resets may be necessary */
}
span {
background:url(left-door.png) left top no-repeat;
}
button, span {
height:37px; /* height of your sprite */
display:block;
}
Demo: http://jsfiddle.net/Kqs3m/
Your results may vary depending on your sprites and the natural width of the content.
Here's the technique which I think you are looking for (using the same images you attached):
HTML:
<a href="#" class="button">
<span>Small</span>
</a>
<a href="#" class="button">
<span>Large button</span>
</a>
CSS:
.button {
background: url('http://i.stack.imgur.com/htUHL.png') no-repeat left top;
padding-left: 9px;
height: 37px;
display: inline-block;
text-decoration: none;
color: #555;
text-shadow: 0 1px 1px #FFF;
font-family: sans-serif;
font-size: 0.8em;
}
.button span {
background: url('http://i.stack.imgur.com/ID6nO.png') no-repeat right top;
display: inline-block;
height: 37px;
padding: 5px 12px 5px 3px;
}
.button:hover span {
color: #333;
}
Link to the demo: http://jsfiddle.net/v284q/
Using CSS properties instead of images can make your applications faster.
In this case you could just use: Border-Radius, Box-Shadow combined with a gradient background.
Here you can find a good Gradient Editor:
http://www.colorzilla.com/gradient-editor/
How to use Border-radius and Box-shadow:
http://www.css3.info/preview/rounded-border/
http://www.css3.info/preview/box-shadow/
I have the following HTML with many of these kinds of links:
<a class="button" id="menu">
<img width="16" height="16" src="/Images/control-double.png">
</a>
I created a sprite for these with all the images combined using
spritegen
But when I look at this it seems like it's just for background as it gives an example:
.sprite-control-double{ background-position: 0 -396px; width: 16px; height: 16px; }
#container li {
background: url(csg-4febd28fe3aa3.png) no-repeat top left;
}
How can I use a sprite with positioning for an image instead of a single image?
If you use the "sprite" technique, then you don't need IMG elements within your anchors:
a.button {
background-color: transparent;
background-image: url(/Images/control-double.png);
background-position: 0 -396px;
background-repeat: no-repeat;
height: 16px;
width: 16px;
}
I added the background-color style because in some browsers the rendering engine will not show a background image if there is no background color.
Yes you can. That's how sprites work, they're applied as the background for an element with its overflow set to hidden.
You should remove the <img> tag entirely and rely on the background of the <a> tag. The purpose of the sprite is to replace the need for non-semantic <img> tags.
This is all covered pretty well in the article linked from spritegens help page: http://www.alistapart.com/articles/sprites
In this jsfiddle I'm trying to create a link that covers the entirety of the sprite image. For some reason though, the height and width attributes of a don't seem to work.
What can I do to create links from sprite images?
add display:inline-block or display:block to a for dimensions to work. dimensions don't take effect for inline elements.
I've updated your fiddle. The link covers the whole image now and this is done by turning the link into a block element with display: block like many other answers above state. I also added the id selector to all your other selectors and moved the selector and declaration with where the actual background image is being declared to the top. The reason for this, is that the li-element's background-position were overwritten because of lack of specificity and due to the order of your css declarations.
Use this
// Code shifted to the end.
Where, CSS is like this:
.sprite-sp1{
background-position: 0 0;
width: 242px;
height: 244px;
}
.sprite-sp1 a{
width: 242px;
height: 244px;
border: 1px solid;
}
.sprite-sp2{
background-position: 0 -294px;
width: 241px;
height: 244px;
}
#container li {
background: url(http://i.imgur.com/iDrt8.png) no-repeat top left;
}
EDIT Edited to make the sprite clickable. The new code shall be:
<ul id="container">
<li><span class="sprite-sp1"></span>test</li>
<li><span class="sprite-sp1"></span></li>
</ul>
Add display:block; to a, it will work then...
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;});