sprite image repeat in x - html

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.

Related

Replace picture with css color and resize according to content

I have this CSS code which generates transparent div:
.camera_caption {
position: relative;
background: url(../images/capture_bg1.png) 0 0 repeat-x;
left: 0;
margin-top: 263px;
width: 717px;
height: 234px;
padding-left: 365px;
font: normal 14px/24px 'Roboto';
color: #fff;
}
As you can see the background is generated using this image:
But I have several problems with this solution:
I would like to use pure CSS code to display colorful background.
And also I would like to resize the background height according to content size. For example I have several lines of text in different languages. I need to dynamically to resize the background layer .camera_caption.
Can you propose me some solution of the problems?
I am not user as to what exactly your issue is and what is it that you want to get done.
But for auto resize you can remove the width and height given. Maybe you can have 100% width if that will be more appealing
width:100%;
If by any chance you need to have a minimum height and width you can get it done like this
min-height:500px;
min-width:500px;
Add background color with this code
background:blue;
If you can elaborate or better post a fiddle, we can help better.
If you want to use pure css, an online tool you may want to consider is http://duri.me/, which converts an uploaded image into base-64 encoding that you then include in your css class definition. The end result looks like the example below. Doing this, you don't need an image, because the value of the background-image:url(data:...) property is the image. In your case, simply create your colorful background in an image editor, upload it, and grab the generated code.
There are goods and bads to this. On the bright side, you don't have to worry about a missing image, but you're adding a lot of code (especially if it's a large image), and the "image" never gets cached. You may also have to use a bit of javascript to dynamically resize the background, or, you can look into using the css property background-resize to scale it appropriately.
.myImg {
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-image: url(data:image/jpg;base64,/9j/4AAQSkZJRgABAQEAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/wAALCAA8ADwBAREA/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/9oACAEBAAA/APn+iiiiiiiiiiiiiiiirWm6beavqENjYW73FzM21I0HJP8AQe54Fadz4O16G4aKDSr67QMEE1vayPG7Yz8pA59j3HPSqsvhzXIXCS6NqCOSyhWtXBJVdzDGOoXk+g5qEaPqZXcNOuyvkrPnyGx5bHCv0+6TwD0JrV1DwRr2m6CusXOn3EVsH8qZZYzHJC/UblbBwQQQw4P1rnaKK9E0Sa3+HNxpt1fZXW7spLMvlCRrG0PJG1uPNkX1+6p9W40NU+NE9/c2skejpGtrqv8AaCZuDlwGyEb5fQKMj06VFa/GOWCys7OTw/ayw2rSOpM7h2aRJFlLN/teaT7YHWorf4tfYBDJp+gQQ3MFgunxSvcvIFiSQSR5UjBKkde9XoPixpVzYa1a6h4dUw6kySzRG5klWR9xEm0scxkqQVxkKUHHORwfifw//YV5DJbTfatLvY/PsLsDAlj9D6Op+Vl7EfSsOum8MXWlaAw13UoUv7qI5sdPb7jSD/lpL6Ip6L1Y+gGaydb1q+8QatcanqMokuZ3LuQoUc+gHSs+iiiux0bxbb3Hh1vCviKLzNLZzJa3caAzWMvTeP76HoynnHQ8AVyl1bm1upIDJHJsOA8bZVh2IPoahooooooooooooooooooooooor//Z)
}

Background image repositioning

An image that I'm using for the background of a website is getting positioned to just the center of the page.
The screenshot for what I'm explaining is as follows:
Why is the black space on the right and left of the image present?
The CSS for the following is:
body {
background: black url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg')no-repeat 50% 100%;
}
It would appear that your background image isn't big enough to cover the space of your window size. As a result, the black background color you're also providing is being seen on the areas where your image can't cover.
I'd be tempted to try the following:
body {
background-image: url('http://unsplash.s3.amazonaws.com/batch%209/johnny-lam-connect.jpg');
background-position: center;
background-size: cover;
}
This will ensure your background image covers the body of your HTML. More info can be found here.
First of all, it is black because in your CSS you specify black as the background colour. But im assuming you mean why is there any blank space at all...
In which case, the simple answer is the size of your image does not match the size of the window. More specifically, the resolution and therefore width to height ratio is not the same as the window. So the browser will center the image as per your css instructions and fill the rest of the space with your solid base colour (black).
You basically have 3 options here.
You find a background colour that is appropriate for the blank space to fit in with your design (a lot of people add a border or fade the image edges to transparent so it looks purposeful).
You use an image which is repeatable (this is the most common step as its usually advisable to use a very small repeatable image rather than a single large image. As an example, you might have a 2000px image gradient going from one colour to another that can be repeated (aka tiled) horizontally.
Use the background-size: cover property to fore the background image to fully cover your body tag. This property can be set to a number of options, but each one comes with its own caveats (i.e. weird stretching issues or cropping important parts on certain screens). So you need to google for the valid values and test each one. You will also have to download a shim/polyfill for this property to support old browsers (IE?).
It looks like the body is used to center the page. As the body is just as wide as the content, thats where the image ends. The root html element gets the background-color from the body, but not the image.
As a solution, you should consider adding a wrapping div to center the page, while setting the background on the body.
Example HTML
<html>
<body>
<div class="page"> ... </div>
</body>
</html>
Example CSS
html, body {
margin: 0;
padding: 0;
}
body {
background: black url(...) no-repeat center top;
}
.page {
width: 90%;
margin: 0 auto;
}
In your css use following property:
body {
background-size:cover;
}
or
body {
background-size:100%(for width) 100%(for height);
}
Hope it will help.

Get icon from single png image

I have seen this so many times until now, but I never used myself. Can somebody explain how you can get specific icon picture from this single png image, for example the icons i selected with red ... using css
That is called CSS sprites. It is used to cut down the http requests. Basically all icons are placed on a single canvas and are used as background-image property and later they are mapped using CSS background-position property, so for example
.icon1 {
background-image: url('YOUR_URL_HERE');
background-position: 10px 10px; /* X and Y */
height: 30px;
width: 30px;
}
Demo
So inshort just define a fix height/width to your element, and than map the canvas using background-position property. Hence, if you have 100 small icon images on a page, it will make 100 requests to the server, thus to increase the performance, CSS Sprites are used.
Set a fixed (in pixels) height and width on an element
Set the image as the background-image
Adjust background-position so the part of the image you want to be visible is in view
Using background shorthand for the positioning of image.
div {
background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px;
width:27px;
height:27px;
}
http://jsfiddle.net/T2EtY/1/

Make img occupy always 800*400 px space even it is smaller in size(without scaling up)

I am using Jquery Lazy Load plugin to load images lazily when they come in the viewport of browser.
In place of the original image, I just place an animated loader gif. However because there is a difference in the dimensions of the animated loader gif & original image I see the original image shrinked in size.
I want to make the loader gif hold the entire space that would have been used by original image to be placed. (loader gif is 32*32 px & original img is 800*400px)
So I want that the image rendered by the code below should always occupy 800*400px space without the loader image scaling up to that size. I think that is possible through CSS, but I dont know how? Could you please guide me on this ?
<img class='lazy' data-original='/module_files/l.jpg' src='/loader.gif'/>
http://jsfiddle.net/uNbMN/1/
There are a lot of ways to solve this, but just using a single img tag and no js I don't think there is a very good way. You can't tell an img to center inside itself, because you are setting the actual dimensions. You could do something like this with two classes.
img.lazy {
height: 400px;
width: 800px;
border: 1px solid black;
}
img.loader {
height: auto;
width: auto;
/*You would have to account for loader dimensions here*/
padding: 200px 400px 200px 400px;
}
If you really want to do this I would consider separating 'loader' from the image completely and placing it in its own, separate element.

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