This is something I've seen done by Grooveshark, which removes the need to use multiple images for expandable buttons and such.
Basically, an image like this
is used to produce buttons of any width smaller than the image itself. I assume this is done by somehow trimming out the middle, but I'm not sure how. I've looked over the CSS properties for it's usage here but can't seem to find out what's done aside from a 15px padding on either side.
Does anyone know how to replicate the same effect?
Edit: Just for clarity, I'm talking about cutting out the middle of a single button (I do realize I've given a picture of a sprite for 4 button styles, so it might be confusing when I say "cutting out the middle portion of an image").
What you're talking about is known as the sliding doors technique. By applying the background image to a container element to show the left edge, you can then apply the same image to another element that only shows the right edge.
For example:
.menu li {
background: url(button-sprite.png) 0 0 no-repeat;
padding-left: 10px;
}
.menu li a {
background: url(button-sprite.png) 100% 0 no-repeat;
display: block;
}
The list item shows the left edge of the image. The padding allows the left edge to show when another element is laid on top.
The anchor element shows the right edge of the image, and it is cropped to the required width of the text content.
CSS allows to move background image to any position.
In order to display part of the background you need to define CSS like the following:
.button {
background: transparent url(sprite.png) left top no-repeat;
display: block;
height: 40px;
width: 160px;
}
.button:hover {
background-position: left bottom;
}
.button:focus {
background-position: left center;
/* or
background-position: left -50%;
background-position: left -40px;
*/
}
#Pixelatron; i know you accept the answer but check this example may be that's help you & easy solution as well http://jsfiddle.net/sandeep/CQmJz/
css:
a{
text-decoration:none;
display:inline-block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat 0 0;
position:relative;
padding:8px 0 8px 10px;
height:17px;
}
a:after{
content:"";
display:block;
background:url(http://i.stack.imgur.com/gYknG.png) no-repeat -490px 0;
position:absolute;
height:33px;
width:10px;
top:0;
right:-10px;
}
a:hover{
background-position:0 -34px;
}
a:hover:after{
background-position:-490px -34px;
}
I know of no way to manipulate images like that in CSS,
I think you'll find what they do is have the top image and bottom image always top and bottom, and just fill the rest with a middle image.
This can also be applied to each side, i'll add the CSS3 code, the CSS2 code should be easy to determine.
This would look like (CSS3):
.button_horizontal {
background: url(topimage) top left no-repeat,
url(bottomimage) bottom left no-repeat,
url(middleimage) top left repeat-y;
}
.button_vertical {
background: url(left.png) top left no-repeat,
url(right.png) top right no-repeat,
url(middle.png) top left repeat-x;
}
This would look like (CSS2):
.top {
background: url(top.png) top left no-repeat;
width:100%;
height:10px;
}
.middle {
background: url(bottom.png) bottom left no-repeat;
width:100%;
height:180px;
}
.button{
background: url(middle.png) top left repeat-y;
width:500px;
height:200px;
}
<div class="button">
<div class="top"> </div>
<div class="middle"><p>stuff goes in here :D</p></div>
</div>
That is called border-image.
Related
Where does this space after my background image come frome? (red line in image shows spacing)
The background image does not have this space, it end where the black color ends...
#menu{
width:300px;
margin: 0;
padding: 0;
background:url(../img/menuBackground.png) right no-repeat;
color:rgba(255,255,255,1.00);
}
It should go nicely and completly to the right side of the div...
try changing top: right: and height: to see what you come up with also add position fixed unless you have this somewhere else, i don't know where the rest of your code is.
#menu
position:fixed;
top:0px; /*maybe try positioning it fixed where you want it*/
right:0px; /*same here or left:0;*/
width:300px;
height:250px; /*you could also try using height*/
margin: 0;
padding: 0;
background:url(../img/menuBackground.png) right no-repeat;
color:rgba(255,255,255,1.00);
}
It was me who was confused:
This solved it:
background:url(../img/menuBackground.jpg) right top no-repeat;
Because only the middle of the image was shown, it looked as if there was spacing:
How can i center align background images in a td or a li which have different widths (from 25px to 30px). I tried everything but they won't align.
This is what i'm using:
.cIcons-26 {
float: left;
position:relative;
height:26px;
background:url("../img/sprites/icons/png") top left no-repeat;
}
.theIcon { background-position: -93px -1px; }
you should start by using the ../img/sprites/icons.png, not the
"../img/sprites/icons/png"
I don't understand :
widths (from 25px to 30px)
you whant to align both to have the image on the same place, or just the image centered for both?
If you use background-position: center; orbackground-position: 50% 50%; it should be centered. How it looks depends on de width and height of the outside content.
The issue I'm having is that my link is being placed over the icon, so that the icon is in the background, not next to it as I would like. How would you write this so that the icon would be to the left of the link?
HTML:
<p>Hunger Games, Chapter 1</p>
CSS:
a[href $=".pdf"] {
background: url('image.png') no-repeat center left;
padding-left 25px;
}
I have updated your code and it seems to work just fine..
SEE HERE
a[href$=".pdf"] {
background: url('http://cdn.cutestpaw.com/wp-content/uploads/2011/11/cute-cat-l.jpg') no-repeat center left;
padding-left: 25px; /* you forgot the colon here */
background-size: auto 100%; /* make the background size 100% of the height of the anchor link */
}
I want to make a drop down list with nice buttons that are long as the screen (compatible with more screens)....
I will use 3 images (left , middle and right) ... something like this (of course, smaller):
The middle part will repeat itself to "fill" the button. I want to get something like this:
There is no example with 3 images, all I could found is only 2 images.
my solution:
html:
<div class="button">
<div class="left"></div>
<div class="inner">text</div>
<div class="clear"></div>
</div>
css:
* {margin: 0px; padding: 0px;}
.clear {clear: both; height: 0px; font-size: 0px; line-height: 0px;}
.button {
padding-right: 15px; /* right image width */
background: url('right_image.jpg') no-repeat right top;
height: 20px; /* images height */
}
.button .left {
background: url('left_image.jpg') no-repeat right top;
width: 15px; /* left image width */
height: 20px; /* images height */
float: left;
}
.button .inner {
height: 20px; /* images height */
background: url('middle_image.jpg') repeat-x right top;
text-align: center;
}
jsFiddle Demo
It's very easy.
That's html:
<button>
<span><span> MENU </span></span>
</button>
You should place all parts of your image in a very wide none-transparent(for transparent png method is harder a little bit) PNG(like it looks on design), trimmed to the image content. (one image wouldn't increase size much, but will make less http request to server). It called sprite.
button { }
button span {
padding:0 0 0 25px;
background:url('image.png') left 0;
display:inline-block;
height:25px;
line-height:25px;
}
button span span {
padding:0 25px 0 0;
background:url('image.png') right 0;
}
That's it. Of course you should place your image name, and your values of padding, height and line-height.
There are no examples with 3 images because you don't need 3 images. Create a small right images (like you have posted above) and create a left + center image with your maximum width (let's say 800px). Set the left sided / background image on a <li> and hook the right side up to the <a>.
<li>
Link
</li>
Try this - this uses 3 background images which isn't compatible with IE8 and below, but you could use two inner divs to give you three containers and put one image in each - note the bottom image is listed last.
nav {
height:75px; /* height of graphic elements */
background:
url(images/left_end.png) no-repeat 0px 0px,
url(images/right_end.png) no-repeat right top,
url(images/center.png); /* this images repeats */
}
I have a series of background images that need to fade in and out and appear in the background. This background image appears behind my content, is centered, and is wider than my content. I do not want this image to affect the width of my page so there is no width set on the container div, ul, or li elements. I need to determine why there is a white left margin showing up over my background image. This margin shows up no matter how wide the browser window is as shown by my "test" li. The problem appears across browsers (tested: FF, Safari, Chrome, IE8) and has nothing to do with the javascript used for the rotation and fade.
I'm sure this is something dead simple that I'm overlooking. Many MANY thanks to anyone who can point me in the right direction here.
Link to an screenshot showing the problem.
Live example of the problem.
The HTML for this is:
<div id="hdrHomeWrap">
<ul id="hdrHome">
<li class="hdrHome1"></li>
<li class="hdrHome2"></li>
<li class="test"></li>
</ul>
CSS:
#hdrHomeWrap {
margin: 0 auto;
position:relative;
top:-20px;
}
#hdrHome #hdrHome li {
margin:0;padding:0;
position:relative;
list-style:none;
}
#hdrHome li {
display: block;
height: 400px;
display:none; /* hide the items at first only */
list-style:none;
}
#hdrHome li.hdrHome1 {
background: url('images/hdr-home1.jpg') no-repeat top center;
}
#hdrHome li.hdrHome2 {
background: url('images/hdr-home2.jpg') no-repeat top center;
}
#hdrHome li.hdrHome3 {
background: url('images/hdr-home3.jpg') no-repeat top center;
}
#hdrHome li.test {
background: #F00;
}
Have you tried giving the ul (#hdrHome) a margin & padding of 0?
In your CSS, you have
#hdrHome #hdrHome li
I'm guessing that's a mistake. You are either missing a "Comma" in between.
So it should be like #hdrHome, #hdrHome li instead of the other