I used to have an image that was placed as a background:
#myIco{
background:url(/i/myIco.gif) no-repeat center top;
}
So, when I placed that id into a table cell it'll place the icon in the middle of the cell.
I decided to combine all my icons into a single sprites image.
.sprites{
background-image:url(/i/mySprites.png);
background-color: transparent;
background-repeat:no-repeat;
border:0;
}
The value for the new icon is:
#axXh {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
But now my icon is no longer in the center of the table cell. How do I fix it?
That's tricky. You'll have to encapsulate the icon within its own <span> or <div> and then horizontally position that in the center. I'm a big fan of sprites and stoked that you've decided to use them.
<style>
div { text-align: center; } /* or consider margin: 0 auto; */
.sprites {
background-image: url('/i/mySprites.png');
background-color: transparent;
background-repeat: no-repeat;
border:0;
}
.icon {
background-position: -33px -83px;
width: 33px;
height: 11px;
}
</style>
<div>
<span class="sprites icon"></span>
</div>
Related
I need to place an image behind (or in front of - it doesn't matter) my h1 text, with it positioned so that it will always be a little to the right of the end of the text, like this:
I can't seem to get the background image to display either on top of or behind the text. What am I missing?
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-position: -85px 12px;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
}
<h1>Dynamic Headline</h1>
With :after, I can't get the image to display behind or above the text.
In order to shift the background to display on top of the text, instead of the background-position you're looking for margin-left. Note, however, that you can't apply margin-bottom to an absolutely-positioned element, so you'll still need to make use of background-position to adjust the vertical offset. I've changed this to 4px in the following example:
h1 {
text-align: center;
}
h1:after {
content: "";
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") no-repeat;
background-size: 32%;
width: 400px;
height: 50px;
position: absolute;
margin-left: -85px;
background-position: 0 4px;
}
<h1>Dynamic Headline</h1>
I would wrap the text with a span, that has left and right padding, and then put the image as the background of the span, and position it to the right:
h1 {
text-align: center;
}
h1 span {
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>
<span>Dynamic Headline</span>
</h1>
And the same idea without a span, but not supported by IE/Edge due to width: content-fit.
h1 {
width: fit-content;
margin: 0 auto;
padding: 0 1.3em;
background: url("https://static1.squarespace.com/static/50f111c8e4b02b3b2218af91/t/5d9fa26b176671739c726240/1570742891482/CRMC-2020-Measure-h1-1a.png") right top no-repeat;
background-size: contain;
}
<h1>Dynamic Headline</h1>
UPDATE
Here is a jsFiddle with the image and hover event.
I have a sprite image containing 4 "button" images each 30px x 60px - so the total image size is 60px x 120px. Each button is displayed using its proper background offset in the css as shown below.
I want to increase the clickable area of each button, but if I increase padding for the image, more of the image will show than contained in the defined width and height. Can I increase padding or use some other method where the image is still constrained to the amount in height and width?
I do have a containing a tag. I am able to increase the clicking area of the buttons by padding the a tag, but I still need to give feedback via the img hover that the mouse is in the clickable area.
img.prev{
background:url(../img/buttons.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
}
img.prev:hover{
background-position: 0px -60px;
}
img.next{
background:url(../img/buttons.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
}
img.next:hover{
background-position: -30px -60px;
}
OK - I think I've got an answer. It seems I can increase the padding of the containing a tag to increase the clicking area and then use the hover event of the a tag to set the background for the img. The following css is for the containing a tags.
Please let me know if there is a better or another solution.
#a-next{
padding-left: 30px;
padding-bottom: 200px;
}
#a-prev{
padding-right: 30px;
padding-bottom: 200px;
}
#a-next:hover > img{
background-position: -30px -60px;
}
#a-prev:hover > img{
background-position: 0px -60px;
}
the pseudo will do . https://jsfiddle.net/mgggf5vo/6/
catch hover from the link, so it includes the pseudo area.
Te correct attribute for links is title, not alt.
a {
display: inline-block;
position: relative;
vertical-align: middle;
cursor:pointer;/* href is missing */
}
a:before {/* give it any size */
content: '';
position: absolute;
height: 60px;
width: 50px;
margin-left: 29px;
}
a[title="next"]:before {
right: 29px;
}
img.prev {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat 0px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.prev {
background-position: 0px -60px;
}
img.next {
background: url(http://www.waldorfteacherresources.com/img/slideshow-buttons-large.gif) no-repeat -30px 0px scroll;
width: 30px;
height: 60px;
padding: 0;
}
a:hover img.next {
background-position: -30px -60px;
}
<div>
<a title="prev">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="prev" class="prev">
</a>
Something Here
<a title="next">
<img src="http://www.waldorfteacherresources.com/img/blank.gif" alt="next" class="next">
</a>
</div>
IE don't seem to know what bottom means... I'm trying to position background svg in the bottom center of the div.
screen shot comparing IE and Chrome
http://codepen.io/g_am1/pen/KdrvbZ
<div id="pixels">
<p><code>background-position: </code></p>
</div>
<div id="percentages">
<p><code>background-position: </code></p>
</div>
<div id="keywords">
<p><code>background-position: </code></p>
</div>
and
div {
width: 800px;
height: 200px;
border: 5px solid #E18728;
margin-bottom: .5em;
background: url(http://ridebike.ws/images/other/bikesenerey.svg);
background-repeat: no-repeat;
}
#pixels { background-position: 350px 0; }
#percentages { background-position: 50% 100%; }
#keywords { background-position: bottom center; }
/* styling for Pen, unrelated to background-position */
p {
margin-top: 50px;
padding: 0 1em;
}
I ended up using preserveAspectRatio="xMinYMax meet"
I have a link, with which i want use plus, which will change color on hover.
But in the past hour i cant figure out how to do this trick with spites.
Here is a link, nothing special
Find Out More!
My css code
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
padding-left: 25px;
}
.block a.plus:hover{
/*Just for example*/
background-position: -15px -1px;
}
And also plus img
CSS sprites are often vertical arranged, since this will enable you to display only a specific line in your sprite file. In order to use the sprite technique on horizontal arranged images you have to create a second element with a non-transparent background:
<a href="detailed.html" class="plus">
<span>Find Out More!</span>
</a>
.block a.plus {
background: url("images/plus.png") no-repeat 0% 40%;
background-position: 10px , 0px;
font-size: 12px;
display: inline-block;
padding-left: 16px; /* actual width of one icon */
}
.block a.plus:hover{
/*Just for example*/
background-position: 0 -16px;
}
.block a.plus span{
background-color: #fff;
}
If you don't want to use a second element you should rearrange your icons.
You can achieve this with the :before selector.
Find Out More!
a.plus {
position: relative;
padding-left: 25px;
}
a.plus:before {
position: absolute;
left: 0;
content: " ";
width: 15px;
height: 15px;
background: red url("images/plus.png") 10px 0 no-repeat;
}
The color red is just for testing, you can leave that one out. -10px 0 is the location of the image in the sprite (x y).
I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png
When loading the thumbs
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
}
The only way I can get the thumbs to show up is if I do this:
Was this review helpful? |
If I remove all the then the thumbs disappear. If I leave only one then it shows a partial view of the sprite.
How can I display the sprite without the need of ?
by using float:left:
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
float: left; /* OR float:right, depending on what you need */
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
float: left;
}
As the links are inline elements, you can't specify the width and height for them. They get their size only from their contents, that's why the spaces gives them size.
I think that the best option for your use is to make the links inline-block elements. That way they are block elements so that they can have a specific width and height, but they are still inline elements in the text flow so that you don't have to change your markup.
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
display: inline-block;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
display: inline-block;
width: 15px;
height: 16px;
}
The image is a background. But for the background to be visible, the element must have some height and width. In your case an empty tag has no height and width. You should make it display:block
Just use display: inline-block; in both of your CSS classes.