I'm trying to lay out a page with an image sprite which holds "awards" (gold, silver, bronze). It's actually WORKING, save for the print preview in Chrome. In Firefox/IE it looks just fine but what Chrome is doing, is that the background image starts off correctly (i.e., the background-position works) but the rest of the image stretches to the start of the next element. See this url for screenshots.
Here is a snippet of the HTML and related CSS:
<span class="price">$22.15
<br />
<span class="awards-section">
<span class="award gold">S.O.E.I.W.F</span>
<span class="award silver">F.L.I.W.C</span>
<span class="award silver">A.C.W.C</span>
<span class="award bronze">F.L.I.W.C</span>
<br />
</span>
</span>
.awards-section {
margin-top: -0.3em;
display: block;
font-size: 4mm;
font-weight: normal;
}
.award {
background-image: url('/images/general/awards.png');
width: 60px;
height: 25px;
display: inline-block;
padding-left: 62px;
margin: 1px;
background-repeat: no-repeat;
line-height: 25px;
float: left;
clear: both;
}
.gold { background-position: 0 0; }
.silver { background-position: 0 -25px; }
.bronze { background-position: 0 -50px; }
.double-gold { background-position: 0 -75px; }
.double-silver { background-position: 0 -100px; }
.double-bronze { background-position: 0 -125px; }
The upstream bug is resolved in chrome 26.
https://code.google.com/p/chromium/issues/detail?id=131054
I've ran into this problem as well. Only workaround I've found is to switch to use an img tag cropper method as opposed to the background-image method.
Method is shown here http://www.artzstudio.com/2010/04/img-sprites-high-contrast/
I have no idea what chrome is doing, but I think it's grabbing the background-image dimensions and displaying them at that size, but cropping the image using the div dimensions. Which is really odd if I'm right.
Related
Summary / Nutshell
Is it possible to have a full width (display: block) clickable hyperlink HTML element that has a unique, positioned sprite background image class, all in just one HTML <a> element?
Background
Currently I have a working elaborate HTML menu, whereby each hyperlink has its own unique icon sprite background position.
The sprite icons each have their own unique class, which is added on top of the default menu class that holds the background url and general layout. All icons are exaclty the same size, 13 x 13 px. Each hyperlink has a full with using display:block. The mouse hover must be activated as soon as the block width is hovered, sothat short text or long text hyperlinks get a equal full width hover color.
SPRITES CSS
.home {background-position:0 -13px}
.about {background-position:0 -1638px}
.ethos {background-position:0 -2944px}
.etcet {background-position:0 -5611px}
GENERAL CSS
li a{
display: block;
line-height: 2em;
color: black;
padding: 10px 1em 10px 2em;
}
.menu{
display: inline-block;
background: url(icons.png) no-repeat;
width: 13px; height: 13px;
vertical-align: middle;
margin: -2px 15px 0px -29px;
}
Currently the following undesired bloated HTML markup works...
Undesired: Bloated HTML
<li>
<a href="/home">
<p class="menu home"></p> Home
</a>
</li>
... but I wonder if it would be possible to reduce that (without losing any of the essential functionality) to the absolute bare minimum HTML:
Desired: Minimal HTML
Home
New CSS
a{
position: relative;
padding: 0 0 0 1em;
}
a:before{
content:'';
position: absolute;
background-image: url(icons.png);
background-repeat: no-repeat;
top: .75em;
left: 2px;
height: 13px;
width: 13px;
}
Stuck setting the unique background-position
I tried the a:before{} workaround and while the background icon boxes are positioned nicely relative to the hyperlinks, and the full width mouse hover works too, the sprites themselves are all from the initial starting pivot of x=0 y=0 of the background image!
In other words all the sprite icons are take from the first block of the sprite background png file. The unique individual class names do not seem to have been used for the background-position when using a:before{}.
If I move the background-image from a:before{} to a{}, then the layout breaks completely beyond repair.
In summary, is there a way to make a one-element HTML work with sprites on hyperlinks, using just a:before{} without necessitating any extra meaningless html elements such as <spans> or <p>, and achieve all the essentials of sprites positioning and full with block hoverability?
Any and all help is greatly appreciated!
You need to add pseudo-class to your customization classes.
I've added an image how it works. It's explains more better, than hundreds of words.
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
Also, if you have a simple menu, remove ul, li tags and wrap all links in a nav tag.
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
nav {
display: inline-flex;
flex-flow: column;
}
a {
position: relative;
padding: 0 1.3rem;
text-decoration: none;
transition: all 0.3s ease-in-out;
}
a:before {
content: '';
position: absolute;
background-image: url('https://i.ibb.co/M7008LV/sprite.png');
background-repeat: no-repeat;
top: 50%;
left: 2px;
height: 13px;
width: 15px;
transform: translateY(-50%);
}
.home::before {
background-position: 0 0px;
}
.about::before {
background-position: 0 -13px;
}
.ethos::before {
background-position: 0 -26px;
}
a:hover {
background-color: #ffd73d;
}
<nav role="menu" aria-labelledby="navigation menu">
Home
About
Ethos
</nav>
I have tried to code my page as follows:
<div class="Conttent-Group">
<div class="Conttent-Group-Body">
<div class="Conttent-Body-Right">
<div class="Conttent-Body-Left">
<h1>News operations</h1>
</div>
</div>
</div>
</div>
and although the following css:
* {
background-color: #006;
}
.Conttent-Group {
margin-top: 5px;
height: 300px;
width: 788px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: white;
}
.Conttent-Group-Body {
margin-left: 4px;
margin-top: 5px;
width: 386px;
height: 30px;
float: left;
background: url (Image / module-bg-bodynew.jpg) repeat-x top center;
}
.Conttent-Body-Right {
height: 30px;
background: url (image / module-bg-rightnew.jpg) top right no-repeat;
}
.Conttent-Body-Left {
background: url (image / module-bg-leftnew.jpg) top left no-repeat;
height: 30px;
}
.Conttent-Body-Left div {
background: #fff;
border:> 1px solid # C6B389;
border-top: none;
padding: 0;
margin-top: 7 pixels;
height: 243px;
}
.Conttent-Body-Left h1 {
display: block;
margin: 0;
padding: 20px 0 0 7 pixels;
text-align: left;
font-weight: bold;
color: # E1F1FE;
font-size: 13px;
}
But when running my code I only see the background-color
* { background-color: # 006; }
And not the background-images I have set. How can I fix this and show the images?
Currently you are using * {background-color: #006}. The * selector targets every element, thats on your side, thats why every background color is the same.
When you are using an image as background, first of all look up its file path:
/index.html
/style.css
/images/
/images/picture1.jpg
/images/picture2.jpg
If you want to target an picture, you always have to choose the file path regarding to your css file. So in this case for example your path is images/picture1.jpg. Although be aware of uppercase and lowercase letters inside your file structure (like Images or images) or not wanted spaces.
Using this you can set your background-image, and although add multiple variables, like:
background-image: url(images/picture1.jpg); /* no spaces inside your url */
background-repeat: no-repeat; /* or "repeat-x", "repeat-y" */
background-size: cover; /* for a fullscreen background */
background-color: #fff /* for everything your background images does not cover */
/* or combine them all into one */
background: url(images/picture1.jpg) no-repeat top center;
Furthermore you have got quite a lot of errors inside your code. Maybe you should consider refreshing the basics, using online helpers like codeacademy or something else you will find.
I've recently encountered some problems with CSS Sprites.
I want them to switch pictures every function call, function itself is OK since it only removes and adds css class.
I have following CSS:
#slider_arrow {
padding-left: 200px;
position: relative;
top: -1px;
}
.red_arrow_sprite {
background: url(/Images/onex/arrows.png) 0 0 no-repeat;
width: 25px;
height: 12px;
}
.yellow_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -26px 0 no-repeat;
}
.black_arrow_sprite {
width: 25px;
height: 12px;
background: url(/Images/onex/arrows.png) -51px 0 no-repeat;
}
Slider_arrow is:
<span id="slider_arrow" class="red_arrow_sprite"></span>
the element in which I change class.
And the problem is that my Sprite file has 75px width and 25px height.
(3x 25px/25px)
With the CSS I Presented I get the result where I see all 3 pictures at the time with red_arrow_sprite class, 2 pictures with yellow_arrow_class and 1 picture which is desired with black_arrow_class.
What have I done wrong with CSS?
Thanks in advance.
http://jsfiddle.net/9b57pb50/
Check out this solution
I've removed padding and add some display properties.
Here is my css
.nav_arrow {
position: absolute; top: 50%; z-index: 15;
background-image: url(../img/arrow-navpage.png) !important;
width: 34px; height: 136px;
margin-top: -68px; }
.nav_arrow.next { right: -34px; background-position: 0 0; }
.nav_arrow.next:hover { background-position: 0 -186px; }
.nav_arrow.prev { left: -34px; background-position: 0 -372px; display: none; }
.nav_arrow.prev:hover { background-position: 0 -558px; }
Image is for next / previous button background
But its not loading in. can any one help me
Use Elements inspector (press F12) to see if the images are being loaded.
In Elements Tab you can see if your CSS rule is correct, or by right
clicking over the element itself
Under Resources Tab you can see if the Image Path is correct and if
the image are being loaded.
If those chechs are correct, probably you have a visualization problem with your CSS rule, probably position related.
Try it and tell us the result.
Hope it helps.
It's hard to see the problem without a fiddle. But first check if the sprites image is loaded, then check background-position for every piece of the image. Also check if the .nav-arrow container has position:relative
maybe try this:
.nav_arrow.next { right: -34px; background-position: 0px 0px; }
.nav_arrow.next:hover { background-position: -186px 0px; }
.nav_arrow.prev { left: -34px; background-position: -372px 0px; display: none; }
.nav_arrow.prev:hover { background-position: -558px 0px; }
I don't know why you use left:-34px right:-34px; if this answer not help you show us your code
I use the CSS Sprite Technique with a background image that looks something like this:
The CSS code for the icons:
div.icon {
background-color: transparent;
background-image: url("/images/icons.png");
background-position: 0 0;
background-repeat: no-repeat;
display: inline-block;
height: auto;
vertical-align: text-top;
width: auto;
}
div.icon:empty {
width:16px;
height:16px;
}
div.icon:not(:empty) {
padding-left:20px;
}
div.icon.attenuation {
background-position: 0 0;
}
My icons can be used like this:
<div class="icon warning"></div>
I want to put some text inside my icons like:
<div class="icon warning">There is a warning on this page</div>
But the problem is that the background image covers the entire text area:
The question is: how can I use only part of an image as a background image for part of my element?
Notes:
setting width to 16px for div.icon doesn't help.
Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.
div.icon:before {
content: "";
background-color: transparent;
background-image: url("/images/icons.png");
display: inline-block;
height: 16px;
vertical-align: text-top;
width: 16px;
}
div.icon:not(:empty):before {
margin-right: 4px;
}
div.icon.attenuation {
background-position: 0 0;
}
You have two ways:
1)Your markup must be like this:
<div class="icon warning"></div><div class="txt">There is a warning on this page</div>
.icon {width:10px(for ex.)}
2)You must change the image. Icons in the image must be below the another
Sorry, my previous answer was not well though out.
Edit:
If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:
.icon {
...
width:0; height:16px; padding-left:16px;
}
.icon:empty {
width:16px; padding-left:0;
}
jsFiddle
set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding