here is the file : http://studioteknik.ca/stackoverflow_question/test1.html i need to see only one background image at the time, let's say the second. It's 400 pixel from the top, but i need it image to be crop top 400 height. HOW TO DO THAT ?
In general content images should not be backgrounds or sprites, they should be inline images using the IMG tag. Sprites are usually reserved for UI elements such as icons and menu elements.
<div class="sprite1"></div>
CSS:
.sprite1 {
height:400px;
width:400px;
background-image:url(http://www.studioteknik.ca/stada/wp-content/themes/stada-theme/images/banner_sprite.jpg);
background-position:0 -400px;
}
I use a pseudo element (before/after) to generate the box size I want for the sprite and add the background-image to that.
That way you can set the 'normal' element to position: relative and the :after to position: absolute;.
Then position the after as you want it in relation to the main container and the size of the after element prevents any more of the image sprite 'bleeding out'.
I documented that technique more fully here: http://benfrain.com/image-sprites-data-uris-icon-fonts-v-svgs/
Yes - that's a good answer. Generally, you position a sprite exactly the way you would position a normal image, but set the height and width so that they only cover one portion of it. The background position is the only thing that changes. If I had a 40 pixel high sprite and wanted to display it has 2 20px high images, the code would be this:
.sprite1{ height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position: 0 0;
}
.sprite2{
height:20px;
width:20px;
background-image:url("myimage.jpg");
background-position:0 -20;
}
Related
I'm trying to create one of those little fade effects that Google uses at the end of text instead of an ellipsis or simply cutting the text off with overflow:hidden.
I do this by creating a :before element, that I position over the right hand side.
Here's the mixin I use:
.OverflowFadeRight(#color)
{
position:relative;
&:before {
content:"";
height:100%;
position:absolute;
top:0;
right:0;
width:4.8rem;
.GradientLTR(transparent; #color);
}
}
This code works, but what I would like to do is set the width to the same as height so it's always proportional, which is 100% the height of the parent.
I've seen techiques which set height based on width, but can it be done this way round?
You need to use object-fit: contain to achieve this result.
Turns out that creating a square with height:100% using pseudo elements may not be possible.
The way to create a 'responsive square' is to use the img tag.
It allows to set the height and it will proportionally auto-adjust its width.
The alternative to that is to use percentage off the width.
Here's a demo using either one.
<!-- Empty image 1x1 pixels as gif base64 data -->
<div class="OverflowFadeRight2">Real square with img
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="">
</div>
I've created a simple image fader using the technique in the answer from How to make HTML/CSS slideshow background fade?
However this solution requires the images to be of a fixed size. Once I add dynamic width (width=100%), the images overlay the text.
http://jsfiddle.net/2kkHH/340/
.fadein {
position:relative;
width:100%;
}
Any suggestions how to have width=100% and at the same time avoid the images overlaying the text?
You can set the text to be positioned:
http://jsfiddle.net/jonigiuro/2kkHH/346/
p {
position: absolute;
}
Also, text should always be contained in some tag (p, span, etc..)
You have to give a fixed height and width to the container div. Unless that is done, how will your images be 100%? I mean 100% of what? The parent of images is div and hence 100% of that div.
See this updated fiddle: http://jsfiddle.net/2kkHH/350/
If you make your div 100%, then 100% of what? In this case it will take 100% of your page.
Set the position of .fadein img also relative.
.fadein img {
position:relative;
left:0;
top:0;
}
You can insert these two lines of code
$('.fadein img:gt(0)').hide();
var h = $('.fadein :first-child').height(); // line to add 1
$('.fadein').height(h); // line to add 2
and everything will start working - http://jsfiddle.net/5Ugkr/
The reason is that container div does not deduce its height from its absolute positioned img children, so you must set the height 'manually'.
I've been fiddling with an image sprite to be used in a background.
I need to select two parts of an image and then place them in different locations in the body background, one in the bottom left and one in the top right.
Lets say I have an image that is a rectangle - 1700px wide and 1100px tall. This is my image sprite.
I need to select a rectangle shaped area from the image sprite that is 600px wide and 400px tall from the top right of the sprite. I need to place this part in the top right of the body element as a background.
I then need to select the bottom left most part of the image sprite that is also 600px wide and 400px tall. I need to place this part in the bottom right of the body as a background image.
AFAIK you can only set one background image per element, so you would have to add pseudo elements (:after/:before)
#area {
position: relative; /*by relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements*/
z-index:1; /*positive z-index will allow for the correct z-axis positioning of the pseudo-elements*/
/*you could set any background you want, your 2 background images will be in :before and :after*/
}
#area:before,#area:after {
position: absolute; /*we want to position them*/
z-index: -1; /*_back_ground-images... so they are behind #area*/
}
#area:before {
/*set width, height, the 1st background-image, ... here*/
}
#area:after {
/*set width, height, the 2nd background-image, ... here*/
}
you may have to add display:block and content:" " to your pseudo elements, so they don't get omited
EDIT: I assume you know the basics of CSS background-sprites, pretty much everything else has now been done for you ;)
I need to place an icon of 48x48 as background. I have this icon in my image sprite where of course there are many other images.
Is there a way to show as background only a porition of the image?
thanks
EDIT: Is there a way to do this without setting width-height of the backgrounded element? (I am not sure if acutally i can set a width-height)
Edit2: this is what i need: http://jsfiddle.net/pdxnj/
Thanks
Set the width and height of the element to 48px.
.element{
width: 48px;
height: 48px;
}
Set the background of the element to your image
.element{
background-image: url('image.png');
}
Move the background so that the top left corner of the icon is positioned correctly.
.element{
background-position: 20px 94px;
}
The two numbers in background-position are the X and Y coordinates (respectively) where the top left corner of your 48px by 48px is in your sprite image. So maybe it's actually 96px 0px or something.
EDIT
If you can't control the width and height of the element you are trying to put the background in, but you can add new DOM elements, you can try adding a span inside the element you really want to put the image as a background for.
It would look something like:
<div id="noControl">
<span id="justCreated">
</span>
</div>
and the CSS would look exactly the same as above, except you would need to treat the inline span as a block element:
#justCreated{
display: inline-block;
}
EDIT 2
If you have control over new DOM elements, and want to make your sprite the background without messing with a span, just add another div inside your original one.
Would wind up looking like:
<div id="noControl">
<div id="justCreated">
ALL of the content that used to be inside #noControl
</div>
</div>
and the CSS for it would be
#justCreated{
width: 48px;
height: 48px;
background-image: url('image.png');
background-position: 96px 0px;
z-index: -200;
/* z-index of all the contents needs to be not set, or set to larger than -200 */
}
This is all theoretical, but it SHOULD work.
This way, you can apply the sprite sizing to a block element without messing with the inline stuff. This may affect CSS if it addresses elements by child status (like #noControl > a), because you are inserting a div between the parent and the child.
I am still researching whether you can do this at all if you have no control over the DOM at all.
simple answer no, but by using html elements you can. Html element hight and width should match the background portion of image.
You can if you're not going to be setting a repeating background. Otherwise no.
To do this, you need to play around with the background offset, and width/height of the actual element that you're setting the background on.
it will depend on how much whitespace is around it in the sprite whether it will fit where you need it to without showing parts of other images.. however you could e.g. put a span where you want the image and crop the span to 48x48 so that it only shows the icon itself. it kind of depends what you want to use it for and how the sprite is built
It's better using ::before or ::after so you can easily define your image size without having overflow problems!
This is possible. You need to display that in a 48x48 div then set position: absolute style for the div and define left and top too for it. Also set z-index: 0 for the div so that it appears under everything.
Is it possible that I can create a margin/padding between the background image and container that holds the image? In other words, I need to move the background image sprite_global_v3.png 20px to the right of the left border of #nav-primary.
Here the position "0 -470px" are used to pick the right picture from sprite. And I don't know how to apply a padding/margin of 20px in order to achieve what I expected.
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll 0 -470px transparent;
}
<div id="nav-primary">
<span>Hello World</span>
</div>
Based on http://www.w3schools.com/css/css_background.asp
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
If I understood correctly, the background-position is used to control the alignment of the background image. Now I need to control alignment and choose the right picture from a sprite. I don't know whether or not I can mix it together.
Thank you
No, there is no concept of padding/margin for background images.
Options:
1) Positioning the background (as already stated). The key is that the container would have to have fixed dimensions.
2) Nest a container inside a parent container. Parent gets the padding, child gets the background image.
Given that you are trying to do this with a sprite, both are likely options since a sprite has to have a fixed sized container anyways. For option 1, you'd need to make sure your sprite images have enough white space between each other in the file.
No, you can't mix them together.
You can place an image at an offset from the corner:
background-image: url('img_tree.png');
background-repeat: no-repeat;
background-position: 20px 20px;
But you can't combine this with the sprite techinque. This technique uses the fact that the element is smaller than the background image to clip the image, but you can't clip the background image 20 pixels into the element.
You can specify the exact position of the background to the pixel.
If you wanted a 10-pixel gap on the left-hand side, for example:
#nav-primary {
background:url("http://static02.linkedin.com/scds/common/u/img/sprite/sprite_global_v3.png") no-repeat scroll transparent;
background-position:10px 0px;
}
That being said, it looks like you already specified it to be set at (0, -470). Does that not work?
The background-position property allows for percentages and values, e.g. "20px 0", which I think is what you're looking for.