i have created a sprite image for all my images being used in the website(.png,.jpeg,.gif)
earlier when i was using imageurl to get the images.. the quality of the image for example the calendar icon to display the calendar.. was good.. and perfect
however when i have started getting the images.. using a css file .. by using background:image url(path and position of the sprite image).. the quality of the image deteriorates..
i have tried creating my sprite image in all possible formats..!!..
is there any solution to maintain the quality and still get the images through the sprite generated image!
CSS for an image:
.sprite-calendar
{
background: url(images/csg-4d4146d95bbab.png) no-repeat top left;
background-position: -480px -1249px;
width: 16px;
height: 16px;
}
Are you by any chance, scaling the image using CSS? You shouldn't be doing that as it will reduce the quality.
Related
I am having a issue on blurry background url image in css for bigger screen resolution 1920. I'm using a 54px X 54px png icon for quick menu on website. The icon image looks blurry in 1920 but when i scale down the screen resolution to 1280x720, the icon image looks sharp. I'm using background-size to resize it to 25px. is there other solution i can use to resize the icon image so that it looks sharp across the different resolution or should I use a bigger icon image like 512px?
This is the code im using:
HTML:
<div>
<a id="icon">click here</a>
</div>
CSS:
#icon {
line-height: 26px;
display: block;
color: #3f3f3f;
text-decoration: none;
padding-left: 25px;
font-weight: normal;
background: url("https://drive.google.com/uc?export=view&id=1eGJUC18ZwUK_YXBqQ6bZMQnGxl1atWcj")
left center no-repeat;
background-size:25px;
}
https://codepen.io/kimberleeho/pen/XWjZXVm
Thank you!
If you want to insert an image in a different resolution without it becoming blurred, then you must choose an image in SVG format and not PNG or JPG. With Inkscape (https://inkscape.org/) you can even create your own image in SVG format.
It is blurry because the icon size 25 is not a divider of actual image size 54. You should use 50px or 100px image.
I have to add: for those small icons it is always best to use a SVG image instead, as this one.
I am building an information website for a client who is hosting an MUN in their school. I'm using Weebly for this because the client wants to be able to control their data themselves, so they need an easy interface. On the homepage, I have used the landing-page format to have the MUN logo float over a background image.
As you can see, there's an ugly white background in the logo. I attempted to fix this by editing the JPG in PS, removing the background and saving as PNG. I then uploaded the PNG:
and wrote it into the website's CSS like so:
.landing-page #banner {
padding: 0;
}
#bannerleft {
float: right;
width: 400px;
}
.landing-page .wsite-header {
width: 400px;
height: 300px;
background: url(logo.png) no-repeat;
}
However, despite the image being a PNG with a transparent background, the image on the website still had a white background. The slight changes in the image were apparent, so I knew that the chosen PNG had been rendered, but yet the background remained the same. I suspect it has something to do with the container behind the image showing through.
How can I make the background image show through the logo using PNG transparency?
I'm having a bit of trouble with IE downscaling CSS background images using the background: and background-size: attributes, as below
.llifLogo {
background: url(images/llifmonotagline.png) no-repeat center;
background-size: 550px;
position: absolute;
top: 60px;
width: 100%;
height: 170px;
}
The site is live on http://llif.co.uk. Looks great in other browsers, but IE appears to downscale the image using nearest-neighbour rather than bicubic. I understand that there used to be a hack by using -ms-interpolation-mode: bicubic;, but that this is now deprecated.
Anyone have any ideas how to downscale background images nicely in IE?
I should also add why I want to do a background image rather than just a regular image: it's so that I can use media queries to display a different image when the site is in a narrow viewport such as a mobile device.
Thanks!
The best (and probably the only) way to do this is to resize your .png file.
There's no reason to use 2808x1024 png with file size about 85KB, when you can resize your file to 550x201px and it will have ~15KB and will be nicely rendered. Just use #media queries to switch between pngs with different resolution.
I am trying to create a hover over image from a single split PNG
How do I enable it so when the image is not hovered over, the top image will view, but when they hover over, the bottom one will show.
The technique you are asking for is called "CSS-Sprites". Here's a tutorial
It uses the background-position style. For the default state of your element, just set the image as background. Note that you need a fixed height (half the height of your sprite) to hide the second part of the image. You also need a width, because your button will contain no content, just a background. For the hover state, use a negative background-position:
.button-foo{
display: block;
height: 29px;
width: 110px;
background: url("http://i.imgur.com/sJu5vvo.png") no-repeat scroll left top transparent;
}
.button-foo:hover{
background-position: 0 -29px;
}
This means the image is moved up so the top icon in there is above the visible area of your button.
Try to make sprites there is many applications out there. Google Css sprites generator.
Or try this one its free http://csssprites.com. Then its just simple css or jquery if u want any effects.
I am starting a new webpage at draincleaningphx.com, and the eagle image on the homepage using Chrome still displays the transparent background as white. Ive tried the image saved as both png and gif file. I've read about using css to make the background transparent but can't figure it out.
Any ideas? Thanks.
The Eagle image is transparent.
If you put any other color in the CSS for the content:
#content {
float: right;
width: 640px;
margin-right: 30px;
background-color: #000;
}
for example black, you can see, the image is transparent.
If you want to add the shadow to eagle, you need edit to picture with shadow around the eagle :D
Did you just open the image in the browser or did you embed it in a HTML file / defined as background-image?