my background url for css property is not displaying image sprite? - html

I'm getting the image from w3schools and I'm practicing using image sprites. I don't know what I'm doing wrong. I tried creating an image sprite with an image tag and a div tag, but neither option is working. I don't know if my path is wrong, but I have my image sprite in a folder called "images" and have my website in my desktop folder. Here is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<img src="images/img_navsprites.gif" /> <br></br>
<img id="home" src="img_trans.gif" alt="home" />
<div class="img" alt="img"></div>
</body>
</html>
Here is my css code:
#home {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif") 0 0;
}
Is this image considered an image sprite?
Here is my file structure:

To answer a couple of your questions:
"Is this image considered an image sprite?" I would say yes. Multiple smaller images composed together in a single image. A sprite is useful for reducing network calls to pull a single image instead of multiple images smaller ones.
You generally won't use an <img> tag to display a sprite. Sprites will be used as background images. The usage within the <div ... is more accurate as you are applying a background-image with CSS.
The Width and Height of your background image should represent the width and height of the smaller image within the sprite. You also need a background position to tell the browser where to start rendering with width and height.
The background-position CSS element is slightly misleading. It does start at 0,0 which is the top left corner of the sprite. However, from there the values go negative instead of positive.
To render the first house in the sprite, you have the background-position and width and height correct in the #home element, but you need to move the background-position to the .img element. The <div class="img"... is the one proper way of utilizing a sprite.
It should look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: 0 0;
}
</style>
<div class="img"></div>
I also mentioned earlier about the background-position goes negative instead of positive. This means, for example, if I wanted to render the Bottom Right Arrow for instance you would apply negative X axis to the position and a negative on the Y axis as well.
That would look something like:
<style>
.img {
width: 46px;
height: 44px;
background-image: url("images/img_navsprites.gif");
background-position: -91px -45px;
}
</style>

Don't apply a background-image to an img tag, as you do it for your #home image
Make all those elements empty divs or spans in the HTML code, to which you apply the background sprite image, and use according background-position values to make the desired part of the sprite image visible.

Related

Image on body not repeating even when specifying "repeat-x"

I have specified a div in my HTML code then defined the div in the stylesheet with a background image, height, width and a repeat-x value. My image does not repeat though.
This does work if I specify an image on the HTML file but then it overlaps the repeating image on the webpage.
CSS:
.header {
height: 120px;
width: 120px;
display:block;
background-image:url(logo.gif);
background-repeat: repeat-x;
background-size: contain;
}
HTML:
<div class="header" id="header">
<!--<img src="logo.gif" name="logo" width="181" height="119"
id="logo"/> -->
</div>
The expected results is my logo.gif being repeated to the right side of the page on the x axis. Actual results (as mentioned above) are that nothing comes up. The only time something comes up, is when I uncomment that HTML code above and then the image repeats (although its the CSS image repeating, not the HTML one) and there is a HTML image on top of it with the CSS image repeating beneath it, which looks weird because some of the logo sticks out from the HTML image. I tried to fix this problem by commenting out the HTML image because, hopefully, the CSS one would repeat but when commenting out the HTML img tag, the CSS one disappears too.
To get the effect that you want, first the width of the div needs to be bigger than height in order to see the repeat image in x-axis for example:
CSS:
.header {
height: 120px;
width: 460px; // <-- this needs to be bigger than height
display:block;
background-image:url(logo.gif);
background-repeat: repeat-x;
background-size: contain;
}
Here's the: example

Avoid image stretching

so I have an image tag on my page that is set to 300px height. When a bigger image is used for it, the image is stretched so it fits and it gets really ugly. Is there a way to just get a part of the image instead, preferably the top 300pxs of it?
Hope I made myself clear, I'm new to this. Thank you!
I believe
overflow:hidden;
is what you're looking for. You put that property on a div that surrounds the image, not the image itself. Here's a good resource: http://css-tricks.com/almanac/properties/o/overflow/
Here's a code sample:
<html>
<head>
<style>
.overflow{
height:100px;
width:200px;
overflow:hidden;
}
img{
height: 200px;
}
</style>
</head>
<body>
<div class="overflow">
<img src="http://funmozar.com/wp-content/uploads/2014/06/white-cat.jpg">
</div>
</body>
</html>
You could also want to consider using the max-height and max-width properties. Make sure not to set both height AND width on the image or it will still stretch it to match those parameters.
probably the best solution in order to avoid image stretching is to use a div with fixed size (width and height), background-image and use background-size propriety.
example:
html:
<div id="yourDiv"></div>
css:
#yourDiv {
width: 200px;
height: 200px;
background-image: url('yourimage.jpg');
background-size: cover;
}
Please have a look here for other information about background-size: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A possibility is to use the object-fit CSS property on the image. For instance, the value contain will scale down the image so that its original ratio is maintained; while the value cover will crop parts of the image. You can then use the object-position property to properly place the scaled down or the croped image.
For more information on these CSS properties and their differents values:
https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position
You can wrap the image in an element, set fixed dimensions for the container and no dimension settings for the image but overflow: hidden on the image. Here’s an example of using small dimensions:
An image:<br>
<img src="http://www.lorempixel.com/100/100" alt="foo"><br>
The same image with just the upper half taken:<br>
<div style="width: 100px; height: 50px; overflow: hidden"><img
src="http://www.lorempixel.com/100/100" alt="foo"></div>

sprite image repeat in x

i have one image and i want to set this image into diff. place like heading image plack.
i am done this to sprite.
<style type='text/css'>
img {
margin: 5px;
border: 1px solid silver;
}
.sprite {
width: 20%;
background-image: url('sprite.png');
}
.sprite.head {
background-position: 0 -47px;
height: 70px;
}
.sprite.logo {
background-position: 6px 0;
height: 43px;
width: 250px;
}
</style>
<div alt='smile' title='smile' class='sprite head'></div>
<div alt='fish' title='fish' class='sprite logo'></div>
this is the my
Try
i want to set heading repeat.
black image repeat.
thanks.
Sprites do not work this way.
You cannot repeat a part of the background-image with pure css alone.
Don't wrestle with this. Make the background-image a image of itself and use that. Don't do repeats in sprites.
edit
BTW, that's not the whole story. It is possibly under certain circumstances as easwee stated in his/her comment. But it's not worth the fuss. Because you always have to see, if you whole sprite thing is not destroyed by it. So, I will not bring a solution to this.
It can be done but with limitations and loss of sprite optimal space use.
What you can do is to:
1.) Extend the part you want to repeat across the whole width of the image sprite. It has to be in it's own row.
2.) Set a fixed height to the element that needs the repeated background (to ensure the parts of the sprite below the repeat pattern won't be visible if the element breaks in two lines).
3.) Set background-repeat: repeat-x
Fidle: http://jsfiddle.net/kZLsL/4/
You can't repeat just part of the image.
I would suggest you use a separate image for your background.
You can also edit your image sprite to stretch the part you want to repeat to cover the full width of your image sprite. This has the benefit of reducing the number of get requests when loading the page.

background image stretch and crop

So far I have managed to get the background image to stretch:
XHTML:
<div id="background">
<img src="images/background.jpg" alt="Background" />
</div>
CSS:
#background
{
width: 100%;
height: auto;
position: fixed;
left: 0px;
top: 0px;
}
#background img
{
width: 100%;
height: 100%;
}
This works well, except the image is being displayed from the top when the height of the image exceeds the window height. This means that the top of the image is always displayed but the bottom is cut off. I want to change this so that the image is always displayed from the centre (so that both the top and bottom of the image is cut off and the centre is of the image is displayed).
Here is a good tutorial on creating a perfect full page background image. The same concept can be applied to any ol' div as well.
In general, images that are meant to be background images shouldn't appear in the markup itself. You're mixing presentation with content.
If having the img tag is not an absolute necessity remove it and add the following three lines in your #background class,
background-image:url(images/background.jpg);
background-position:center;
background-repeat:no-repeat;
The first line sets your background for the DIV. The second line positions it to centre always. The third line makes sure the background is not repeated which is what I assumed you needed by looking at your HTML structure.
More than happy to suggest further is required.

Clip images with HTML and CSS

I want to display images in a 144px x 144px div element.
Images are always larger than 144px and so I want to zoom scale them. By that I mean that the smallest side will touch the edge of the div, cutting a bit from the other side - the opposite of letterbox.
How can I do this and have it work on older browsers like IE as well?
EDIT:
Changed the image, the first was wrong, sorry.
Resize the image so that inside the div there is no space without image
My first answer addressed intentionally blocking out the part of the image while intentionally keeping the space occupied. If you just want part of the image visible with no space or anything else taken up, the best option will be to use CSS Sprite techniques.
Here's an example:
HTML (copy and paste into your own file for a full test):
<html>
<head>
<style type="text/css">
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
height: 100px;
width: 235px;
}
</style>
</head>
<body>
<div class='clippedImg'> </div>
</body>
</html>
CSS (this is really the key):
.clippedImg {
background-image: url("http://www.grinderschool.com/images/top_main.jpg");
background-position: -75px -55px;
}
You can adjust the position numbers to get exactly the portion and size of the image that you want.
Note also that if you want a black box around this, it's even easier than the other post I made. Just put a parent div around this one:
<div class='blackBox'>
<div class='clippedImg'> </div>
<div>
With a padding and width set to create the black-box effect you want:
.blackBox {
background-color: black;
padding: 0 20px;
width: 235px;
}
Set only the width of the image to 144px in CSS or in the attribute. The height will scale automatically. I'm fairly certain this works as low as IE 6. I'm not certain about anything older than that.
If I read your question right, you aren't trying to resize the image, but rather to actually cut off part of the image. If you just want to resize the image, then follow the other answers about that.
The simplest way I can think of to actually cut off the image this is to add <div class='blockOut'> </div> and then use CSS to place & size the div, make it's color match the background color of your page, and put it in front of the image. Example CSS:
.blockOut {
position: relative;
top: -100px;
left: 100px;
background-color: white;
z-index: 2; //this is the important part for putting this div in front of the other one
}
Edit: Note that since you added an example showing that you want all sides blacked out, this would require separate divs for blacking out the top, each side, and the bottom. Also, if you want part of the image to show through (as it does in your example) you can use CSS transparency options.
div{height:114px;width:114px;overflow:hidden;}
div img{position:relative;left:-100px /*or whatever you want. can change it with js*/;top:-100px;}
that is masking to only show a part of the img, as you say in the title. but in the description says you want to resize the img. decide yuorself
to do what you want with css, you should use max-height:144px;max-width:144px. but ie6 doesn't implements those simple properties, so you'll have to use js