I have noticed that Facebook and Instagram uses the same way of displaying icons found on the site, which is to add into a single PNG file all the icons and make the styling based on their position?
Please have a look on the Instagram way of doing it.
I understand that in this way, the client will receive only a single image which will be cached and the user performance will increase. But how do they do it?
Thank you for your time!
They do it by making a div or span or whatever, with a background of that image and then change the background position.
Example
.icons {
height:20px;
width: 20px;
background-image: url("path/to/image");
}
.icon1{
background-position: 0 0
}
.icon2{
background-position: 30px 0
}
JSFiddle: https://jsfiddle.net/qxjyycv2/
What you're looking for is Image Sprites.
The div you are displaying the image in (always as a background image) is set to overflow: hidden; while the background position changes to display the correct part of the sprite.
https://www.w3schools.com/css/css_image_sprites.asp
You can use this tool to generate CSS Sprites(one single png image) from your multiple images along with their css:
CSS SPRITE GENERATOR
Related
There is a black space where the IOS status bar is. I cannot figure out how to get that space to fill up using CSS.
Here [1] is a screenshot of how it looks on an iPhone when the webpage is loaded.
The status bar space does not inherit/match the background image or the background color.
This is the code down below that I have for the background image.
body{
font-family: 'Inconsolata', monospace;
background: url("./Components/Images/back.png");
background-repeat: no-repeat;
background-size: cover;
position: relative;
} ```
[1]: https://i.stack.imgur.com/y3Lwp.jpg
https://www.youtube.com/watch?v=plOl7TNc89A
I'm not sure what your exact issue is since you didn't provide a working example (please update if this doesn't solve it), but it sounds a lot like the issue desribed in the video above. tl;dr is that images are inline elements by default and they put a default buffer below them to allow them to line up with the main parts of a line of text and not the parts of text that drop below the line on which text is written. To fix this, you can override the default display and use
display: block
for your individual img element to remove space below the image.
Some other problems could be the presence of margin or padding on your element (set those to 0, if needed) or the way the image is saved. Re-save the image from your image software using save as an not as save for web.
also, I'm not sure what your exact issue is but if it is concerned with the default spaces in css please add
*
{
box-sizing:border-box;
padding:0;
margin:0;
}
to reset default properties I hope this helps
This website (click) should look like this website here (click) for the most part. The first link is in BVCommerce cart, the second was the initially designed HTML and CSS. You'll notice on the first link the center content is slightly off center as well as missing the background with the shadow, which is my main issue. (The image that should be showing up is images/bg.png)
There are a few bugs with the first website but I'm really just trying to get this background to show up properly.
First website CSS: justicejewelers.com/css/styles.css
Second Website CSS: justicejewelers.rcmhosting.com/css/styles.css
First Website Image: justicejewelers.com/images/bg.png
Second Website Image: justicejewelers.rcmhosting.com/images/bg.png
UPDATE
I've combined the bar and background gif to save some heartache. But any ideas on how to get the whole center area shifted to the right properly?
I do not know about your main issue, but on the first page I would change the text inside the head. Search robots such as Google will often ignore pages with too much information in the head due to spam protection.
I believe you have something like this in the CSS:
.wrapper { background: url("images/bg2.gif") repeat-y scroll center top transparent; padding-top: 0; }
and it overrides this:
.wrapper {
background: url("../images/bg.png") repeat-y scroll center top transparent;
padding-top: 0;
}
About background error, Firebug shows no-repeat :
/BVModules/Themes/Painted%20Paper/styles/styles.css :
url("../images/bg.png") no-repeat scroll left top transparent;
Also, your #maincontent div is smaller than the width of the background image (you have no padding in the first website (1016 pixels versus 960 pixels)
I guess you should remove /BVModules/Themes/Painted%20Paper/styles/styles.css CSS link
and give a try to a helper like Firebug :)
This is my issue.
I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it works, but I am still able to see the original image at the end.
Is there a way to make the hover show the image that I want and REPLACE the original one?
Thanks,
Marco
You can replace an image by using it as a background-image instead of using the <img> tag.
But most of the times, this is slow and another way is maybe good practice:
Create an image that has the :hover image next to it [img|hoverImg]
Do a styling with background-position to change the background.
Like this:
.menuItem
{
background-image: url('hello.jpg');
width:100px;
height:30px;
}
.menuItem:hover
{
background-position: 100px; /* Or whatever measure your image is */
}
The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.
I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.
I am wondering if anyone knows how to achieve the following - take a look at http://www.dspts.si
The first 1/3rd of the screen has an empty background and from there onwards there should be a pattern repeating. I did it right now, by creating a very long pattern png and set it to offset 300 and repeat-x. However, I'm not happy with this solution because it will break if the pages ever get longer than the background image png is.
Thanks for any suggestions!
Put the repeating pattern as background to html element, then a white 1px * 300px image as an background image to body element, and you're all set.
html, body {
height: 100%;
}
html {
background: url(dotted.png);
}
body {
background: url(white_1x300.png) 0 0 repeat-x;
}
You don't have to use html and body tags for this, but it's the easiest way and doesn't require any new markup.
You can specify multiple backgrounds. See Can I have multiple background images using CSS?. The techniques mentioned there are:
Put the whole page into another <div> container or misuse the <html> tag for it.
This means you specify a background for <body> and one for <html>.
Use CSS3 which support multiple background images. That's not yet supported by all common browsers.
Yes, specify your background image as normal but set the background-position like this:
background-position:0 300px;
This will make the background image start at 0px from the left, and 300px from the top.
Let's not forget that you can use FireBug with FireFox to easily diagnose techniques on websites.
I am working on a site that uses three small images as links to twitter, facebook, etc. I have a callout image that I would like to appear when I mouse over the image.
The key here is that the callout image not interfere with the other images and text on the page.
Is there a handy solution that would meet this need?
not positive but it sounds like u can just assign the background image and use the background-position property to show the appropriate image during hover and non-hover state
a.twitter { display: block; width: 16px; height: 16px;
background: url(/images/twitter-hover.png) no-repeat 0 0; }
a.twitter:hover { background-position: 0 16px }
that's assuming a 16x32 sprite comprised of two 16x16 buttons (non-hover and hover) stacked vertically.
this is a rudimentary example http://www.dynamicsitesolutions.com/css/background-image-switching/
Old skool:
Combine the images into one and then use a client side imagemap with onmouseover events which make the appropriate divs visible.
New skool:
Use CSS hover psuedo class. Good example here: http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/ (won't work in all browsers)
Have you tried MooTools? They have a lot of Javascript utilities that might meet your requirements.