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.
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">
Is background: no-repeat; needed when you have a fixed image?
I read that, when put any background image, it's getting repeated by default.
Even when you don't see it on the screen, is it sill getting repeated then, even on a fixed image?
Do you need to specify no-repeat regardless?
The image size is 180 x 180.
<style>
#playButton4 {
border: 3px solid #0059dd;
width: 260px;
height: 194px;
cursor: pointer;
background-color: black;
}
.img2 {
background: url(https://i.imgur.com/4HJbzEq.png);
background-repeat: no-repeat;
width: 180px;
height: 180px;
margin: 7px 40px;
}
</style>
<div id="playButton4" onclick="">
<div class="img2"></div>
</div>
background-repeat property is relevant whenever the size of the element exceeds the size of background-image. If this never happens to your element, specifying background-repeat is dead code.
If, under any circumstance, your element might become larger than the background-image (on either direction) and you don't want the image repeated, you should leave it in.
As a side note, background is a shorthand property which includes background-repeat, thus:
background: url(https://i.imgur.com/4HJbzEq.png) no-repeat;
being an exact equivalent of
background-image: url(https://i.imgur.com/4HJbzEq.png);
background-repeat-x: no-repeat;
background-repeat-y: no-repeat;
, which reduces your "dead code" to only 10 characters.
I think you need it to avoid repeated image, Your image does not repeat because you set your with same with your image resolution, How if you set your width 100% and not using background-repeat: no-repeat;, You will get repeated image.
Yes, it's best to use ,no-repeat unless you want to tile your background images to make background patterns or make background responsive.
Refer: https://blogs.adobe.com/creativecloud/best-practices-for-background-images-your-getting-started-guide/
In your case, you need not use no-repeat as you have given a fixed dimension(same as the image dimension) to your container <div> . Later, If you wish to change(increase) the dimensions of the container dynamically to make it responsive, then you would definitely need no-repeat .
We have a long frame(about 3.5:1 width to height) in the page.
Most of the photos showing are 4:3, bigger and improper aspect rate to the frame.
The long frame is really wanted by the costumer, not to plan to change the frame size so far.
Currently the way it displays is "width resize to the frame width, then fill from the top of the photo to bottom of the frame".
in this way almost half of the photo was cut from the down below, and it looks really bad.
I know it's almost impossible to fit both width and height without ruin the photo.
So my plan is try to display part of the photo from the center.
How should i write this CSS?
Note: the "frame" here is a "div"
One option if you want to use img elements is use position and transform to center the img on the frame while keep the proportion with padding like this:
.framed {
position: relative;
width: 100%;
/*Proportion 3.5:1 with the padding*/
padding-top: 28.5%;
overflow:hidden;
}
.framed img {
width: 100%;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
<h5>Original Image</h5>
<img src="http://placekitten.com/200" />
<h5>Framed Image</h5>
<div class="framed">
<img src="http://placekitten.com/200" />
</div>
Personally, I'd use background-image and background-position. On your frame, you could apply the following CSS:
#myFrame {
background-image: url('/path/to/image.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
background-size: cover; scales the background image proportionally to take up 100% of the frame.
background-position: center; will center the background image, just as you've outlined in your desired example.
background-repeat: no-repeat; is just to stop the background from repeating, which is default behavior.
Of course, change the /path/to/image.png to your relative image path.
Here is an example of this behavior.
I'm trying to scale down a background image with css. My browser has it scaled all the way to it's maximum resolution, and nothing that should work, is working.
When I try and use max-width it doesn't scale the image, it only cuts off the right edge of the image, and it stays at the same scale.
Here's my CSS
.proj-header{ /* Settings for projects bgr image */
position: relative;
bottom: 20;
height: 450;
background-image: url(pics/fight_shy_lot.jpg);
background-repeat:no-repeat;
background-position: 50% 38%;
max-height: 40%;
max-width: 100%;
background-attachment: fixed;
background-position: center;
}
I don't think html is important as it's just an empty div. Everything is in the css.
The only thing I could get to work is background-size, but it lead to issues when the viewport is resized from my base res.
So my questions is why isn't max-width doing what everyone says it should be doing, or am I using it wrong?
I'm pretty new to web design so I'm sorry if this is a stupid question, but I searched all over for an answer, and all people say is to use max-width, which doesn't do anything for me.
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)