A PNG image cuts off from the bottom.
Picture of the problem
.loadMoreBtn-label {
background-image: url(picture);
background-repeat: no-repeat;
padding-left: 30px;
background-size: 23px 23px;
background-position: ;
display: inline-flex;
}
Try creating a div that has the size you want, setting its background image and applying the background-size: contain; property.
Plus you can manipulate the div when your loading is done without doing CSS stuff.
Something like this:
.loadMoreBtn-label {
display: inline-flex;
}
.loadMoreBtn-label #loading {
display: block;
height: 23px;
width: 23px;
margin-right: 7px;
background-image: url(picture);
background-repeat: no-repeat;
background-size: contain;
}
Related
On Chromium-based browsers, downscaled images used as background-image are pixelated while they look more blurred when displayed with an <img> tag. Is there a way to change the render style of a background image so it look like the display in the tag? I tried the image-rendering property but it doesn't seem to work on background-image. It looks fine on Firefox.
Example of render on Brave, left is background-image and right is with the <img> tag:
#backgroundImage, img {
width: 80px;
min-height: 80px;
margin: 10px 5px;
display: inline-block;
}
#backgroundImage {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("https://i.stack.imgur.com/X5EfB.png");
}
<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />
This seems to be happening only when both the size:cover and position:center rules are applying. You can have the same result in the <img> by changing its object-fit to cover:
#backgroundImage, img {
width: 80px;
min-height: 80px;
margin: 10px 5px;
display: inline-block;
object-fit: cover;
}
#backgroundImage {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url("https://i.stack.imgur.com/X5EfB.png");
}
<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />
So to avoid it, you can replace the background-size:cover rule with 100% 100%:
#backgroundImage, img {
width: 80px;
min-height: 80px;
margin: 10px 5px;
display: inline-block;
}
#backgroundImage {
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-image: url("https://i.stack.imgur.com/X5EfB.png");
}
<div id="backgroundImage"></div>
<img src="https://i.stack.imgur.com/X5EfB.png" />
I am trying to incorporate a logo into a HTML page, but I cannot seem to get its height to auto resize to a max-height of 140px. When I do, the logo gets chopped off. See this for this example:
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
<div class="partner-logo">
</div>
How can I make sure that this logo can have 100% width but only a max height of 140px?
Please try applying background-size: contain property to your css. background-size: contain scales the image as large as possible without cropping or stretching the image.
For more about background-size property see mdn
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
<div class="partner-logo">
</div>
This css code makes sure your background is always centered and always fit the size you give your div without it getting "chopped off":
.partner-logo {
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
background-position: center;
background-size: contain;
margin-top: 20%;
max-height: 140px;
left: 96px;
z-index: 1;
background-repeat: no-repeat;
}
Try this, and you can resize the image. Just increase or decrease the padding value.
thanks and hope this help you.
.partner-logo {
z-index: 1;
padding: 20px;
margin-top: 20%;
max-height: 140px;
border: 1px solid #000;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url('https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
}
<div class="partner-logo"></div>
I am trying to make an image responsive, but when I test it with different screen sizes, it cuts off part of the image.My CSS is pretty straight forward as below. Here is my codepen
.mainImage {
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
}
What am I missing or could be doing wrong?
You're setting all the "background-" parts first, and then defining "background" in a shorthand, which is overwriting. Change the order...
.mainImage {
position: relative;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
}
Or don't use the shorthand...
background-image: url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg)
You could also use background-size: contain instead of cover to force the image to display fully.
cover will completely fill the whole background.
contain will make sure the whole image is displayed inside the element
You also need to apply these background styling properties after the main background style.
So:
.mainImage {
position: relative;
width: 100%;
min-width: 100%;
margin-right: 0;
margin-left: 0;
height: 600px;
margin-top: -85px;
background:url(https://s-media-cache-ak0.pinimg.com/originals/12/5d/ba/125dba934726c247106978c7b9cdb452.jpg);
background-repeat: no-repeat;
background-size: contain;
background-position: top center;
background-attachment: fixed;
}
try adding this:
background-size: 100% 100%;
I'm trying to make an image change when a user hovers over it, but the method I used seems to cut off the image, not showing all of it. How can I have it scale the image to the size I specify, rather than just making the div that size and cutting off the rest?
HTML:
<div class="navbar-image" id="navbar-image-ID2Games">
</div>
CSS:
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
See here: https://jsfiddle.net/7a7ghfw4/
As you can see from the imgur url, the image is supposed to be a save icon, but it cuts off everything but the top left.
Add "background-size: contain" to both of your css rules.
#navbar-image-ID2Games {
width: 5rem;
height: 5rem;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
background-size: contain;
}
#navbar-image-ID2Games:hover {
width: 5rem;
height: 5rem;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
background-size: contain;
}
This works:
#navbar-image-ID2Games {
width: 265px;
height: 265px;
background-repeat: no-repeat;
background: url(http://i.imgur.com/Ou5cX4D.png);
}
#navbar-image-ID2Games:hover {
width: 265px;
height: 265px;
background: url(http://i.imgur.com/Tx0SVZr.png) no-repeat;
}
I only changed the width and height for both classes
The css below is what I've applied to the Facebook, twitter, and Google plus links, I've added to a website I'm making, I want to make it so that when i scroll down on the website the Facebook, twitter, and Google plus icons stay in the top, right hand corner of the screen.
I added position: fixed; to it and they stay in that corner when i scroll; however, they pile on top of each other, this should come easy to me, but my brains blank:
.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/fb.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.facebook:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.twitter {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/tw.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.twitter:hover {
background-image: url('Styling-Images/bgcolor.png');
}
.gp {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('Styling-Images/gp.png') center top no-repeat;
background-size: contain;
margin-right:5px;
position: fixed;
}
.gp:hover {
background-image: url('Styling-Images/bgcolor.png');
}
first create an div element with fixed position then put all images in that.
Don't use fix position for images because it will overlap each image
Try this. Giving margin-right:5px; for all the items is causing the problem.
.facebook {
width: 40px;
height: 40px;
display: inline-block;
background: transparent url('http://ottopilotmedia.com/wp- content/uploads/2012/07/facebook-icon.jpg') center top no-repeat;
background-size: contain;
float:left;
}