I have a single png with a variety of social login button images on it. I can get them to display just the images I want by using the following CSS classes:
.sign-in-with-facebook {
width: 430px;
height: 88px;
background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
background-position: -184px -110px;
}
.sign-in-with-google {
width: 430px;
height: 88px;
background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
background-position: -184px -401px;
}
.sign-in-with-twitter {
width: 430px;
height: 88px;
background-image: url("/static/social-media-icons/social-sign-in-buttons.png");
background-position: -184px -207px;
}
And then adding divs like the following will get my images to appear on my page:
<div class="sign-in-with-twitter"></div>
First off, is this a reasonable way to handle a "sheet" of images like this?
Second, my main problem is that I want to then scale these buttons down so they're smaller, as they're pretty large in the original png. I've tried playing with background-size, max-width, max-height, wrapping them in another div, etc. with no luck so far. Help would be much appreciated!
Yes! this is a reasonable way named Spriting
The best way is to downsize it, using some raster editing tool (like photoshop)
Related
I just begun to learn how to use image sprites in order to optimize my site better. However, there is this white border on the right and bottom side of my image element. I searched for posts on here and google and cannot seem to figure out how to remove the border.
I did read it was caused by using the image element, however, I need to use this element for SEO purposes. By using a div it would cripple my SEO in regard to images (from what I have read anyways). Can anyone help me figure this out? It did this in both Chrome and Firefox. Thank you
[White border on right and bottom of image container][1]
<img class="image-sprite" src="">
.image-sprite {
background: url("../images/gallery-sprite.png");
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
Are you able to put the background URL directly into the img tag in HTML? Like this:
.image-sprite {
background-color: #3a3a3a;
background-position: -17px -10px;
background-repeat: no-repeat;
width: 360px;
height: 470px;
}
body{
background-color: gray;
}
<img class="image-sprite" src="https://w3schools.com/html/img_girl.jpg">
I've posted an example below, see can you find any white space on either side? The problem might be the 'image-size' you using and dimensions that you are placing your image with. If your image finishes by the time it reaches the right end or bottom end, obviously then and only then you'll see the white space, otherwise there is no issue in using sprites. Either increase your image in size, or decrease its width and height.
.image-sprite {
background: url("https://picsum.photos/200/300");
background-position: -10 -10px;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
<img class="image-sprite">
I am just starting to learn code and trying to make my first portfolio page project.
Sorry if this is a commonly repeated question. I've tried to search the answer on this one and found some results that have gotten me really close but not quite there and am now wondering if this is possible at all.
I want to use an image as my header but I want to fit the entire image to fit across the page without it cropping like it does when I use the 'cover' option with background-size. I've tried contain as well but that doesn't fill the whole space.
A link to my codepen here: https://codepen.io/Lofu/pen/yXPemm
The html I'm trying to select:
`<div class="page-header"></div>`
My styling:
.page-header {
background-image: url(https://source.unsplash.com/o3TZx8_j7FE);
background-position: 100%;
background-size: cover;
min-height: 50vh;
max-height: 999px;
width: 100%;
}
Is it possible to stretch and fit the entire image across the header that will still keep it looking relatively nice?
Any help is appreciated. Thanks!!
You can also try this:
.page-header
{
background-image: url("enter here your img path");
width: auto;
text-align: center;
margin: 0;
padding: 0;
height: 0;
padding-top: 18.0082%; /* (img-height / img-width * container-width%) */
background-size: contain;
background-repeat: no-repeat;
}
You just need the img-height and img-width normally the container-width in % is 100. Then you use the formal you can see as a comment behind padding-top and replace the 18.0082% with your result.
Let me know if it worked for you.
I'm attempting to have a div background image change to a new image on-hover, and it's working correctly, however, when the image is swapped it shifts slightly. Is there a way to eliminate this shifting effect?
.temptext {
background: url("my-img1.png");
background-size: 35% 33%;
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
margin-left: 33%;
margin-top: 38%;
}
.temptext:hover {
background: url("my-img2.png");
background-size: 35% 33%;
background-repeat: no-repeat;
background-position-x: 3.6px;
background-position-y: -.35px;
}
I've attempted using background-position-x/y to specify the pixel shift, which eliminated it almost entirely, however I've now manually gotten down to the millionths in decimal places and it's still shifting every-so-slightly. Any advice or alternative solutions?
You should combine the two images into a single sprite to avoid the flicker.
Ok, I figured out what the problem was. Because the pixel dimensions of the two images were exactly the same (1600x750), the image was shifting itself because it read it as 'bigger' than the initial image. When I changed the on-hover image canvas size to one pixel smaller than the original image, the shift was eliminated. This is apparently a problem with text that changes font-size and similar effects when hovered over as well.
I have a database for house listings with images of the homes for each entry. The images are uploaded by a 3rd party and they send images in random widths and lengths. Some are square-ish, some are portrait, some are landscape, etc. Without using javascript, what would be the best way to have the image completely fill a square div that is a definite size (200px by 200px, for example). I think using the image as a background image of each div and using "display: cover" would work great but not sure of any browser compatibility issues or maybe there is a better way. any suggestions?
If compatibility is what you care about, this is the best way to give everyone a decent experience:
div {
background-position: 50% 50%;
background-size: cover;
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
}
img {
position: absolute;
max-width: 100%;
max-height: 100%;
left: calc(-2000px);
}
<div style="background-image: url(http://placehold.it/400x150)">
<img src="http://placehold.it/500x200" />
</div>
Basically, use background-size to scale where available, and show the image to all browsers that don't support calc. Two birds, one stone.
There are a few ways to do this, but I prefer using object-fit: cover, which is supported by all major browsers except IE. If you need a solution that works for IE and Edge, you can check out how to implement a fallback, or fall back to using background-size: cover.
Avoid explicitly defining the images' size. Instead use this:
max-width: 100%;
max-height: 100%;
JsFiddle Demo
OR if you want to use background-image then center it using:
background-position: center center;
background-size: cover;
JsFiddle Demo
How do you get the main image to only scale/ shrink horizontally like the pics on this website? Instead of scaling the image it starts to cut out the image's sides when you resize the browser. Heres how it should work: http://castus.co.uk/
The main image on the castus.co.uk website stays at the same height no matter how small you resize the browser but it shrinks the image's sides.. I hope that explains it better :)
I can only seem to get the whole image to scale when I resize the browser.
I am currently using the following code for my img class:
img.mail {
width: 100%;
height: auto;
}
Or do you mean this?
background-position: center;
background-image: url('....');
background-repeat: none;
width: 100%;
height: 100px;
It cut instead of scale like what you have posted.
NOTE: You need to have wide picture to make it work prettily
I use:
max-width: 100%;
height: auto;
They are using a centred background image and allowing the containing element to shrink thus hiding the sides of the image.
e.g.
#feature {
background: url("path/to/img") center 0px no-repeat;
width: 100%;
height: 50px; // Height of image
}
example: http://jsfiddle.net/xY9qT/1/