Is it possible to somehow overwrite an image with a new image with background-image?
I wan't to be able to change an image depending if it's retina or not with css.
Example
HTML:
<img id="foo" src="foo.png">
CSS:
#foo { background: url("bar.png") }
Seems a bit of a convoluted strategy to me. Let me suggest a better option for dealing with retina-quality images. The simplest strategy I've seen for this (and I feel the best, at this stage) is to make the image twice the width and height you need it in Photoshop, then save it at a fairly low quality to keep file size down. In your HTML, or in your CSS, or both, set the desired width and height of the image. It will look great on both regular and retina screens that way, and still have a very small file size. And you only need one image, too, which is great.
Try css3 :before :
img{
display:none;
}
img:before{
content: "";
width: 20px;
height: 20px;
background: url("bar.png");
}
Related
I am working on an animated CSS3 image gallery where clicking on a picture will magnify the picture to a larger scale. However, I feel as though my initial CSS code to style the gallery before enlarging an image has enforced the width to remain the same. I have attempted to set the width on :focus parameter and custom :focus:nth-child parameters, and yet it stays the same width. I forgot to mention the height adjusts just fine with the desired px length given within the :focus method. You can find the source code on my Github Repository in the index.html file and stylesheets/image-gallery.css
My guess is that the .gallery a {... width:200px; ...} is the cause for the unchangeable width, however within the same method I am setting the height as well, so I am incredibly confused on why it is not adjusting to the desired width. Oh, and by the way, excuse the messy HTML and CSS coding, I am still in the building phase of the website and will tidy up the code later on down the road. Thank you very much for the help in advance, it will help me out a whole lot!
like this
img{
width: 200px;
transition: all .2s linear;
&:hover{
width: 400px;
}
}
<img src="http://www.placehold.it/200x200" alt="" />
Have you tried something like width:400px !important;? The !important declaration helps you to easily override properties on your css rules.
How would you resize a image/gif in either CSS or HTML? I want the image to still be proportional and I want the gif to be about the size of the google logo on google.com, how would I do that?
CSS or HTML is fine.
Now the original google.com logo image is 269 x 95. And we know the original image height and width, 1692x396.
if you want this image to be that exact same size, you'll have utilize the css calc().
Knowing that you're new to the web world I'm gonna try to explain it as hard as I can. calc() stands for calculation. HTML is the content of a webpage, such as text and images, and CSS is the styles, such as color, size, and position.
That will select it. Now get the ration of the width you have to the width you want, so 1692/269, and the same with height.
Now we have everything ready and we write:
image {
width: calc(1692px / 269);
width: -moz-calc(1692px / 269);
height: calc(396px / 95);
height: -moz-calc(396px / 95);
}
This will stretch the picture to the size you needed. If you were wondering what the -moz- things were, they pretty much say that the same, the only difference is that because calc() is not really supported, it will solve that problem for you.
#logo {
width: calc(1692px / 269);
width: -moz-calc(1692px / 269);
height: calc(396px / 95);
height: -moz-calc(396px / 95);
}
<image src="https://www.google.com/images/srpr/logo11w.png" id="logo">
Because you don't know much about codeing, you can go to the following pages to learn more:
http://www.w3schools.com/
http://www.codecademy.com/learn
Thank you!
UPDATE
I have forgotten that we were talking only about an image. I confused it with the relative size of the parent, and I screwed up.
Anyways, to make it simple, just do:
image {
width: 269px;
height: 95px;
}
And that is it. Forget about everything I said earlier.
Create a div class or id where you want the image be.
Then, add something like background: url("imageName.gif") 0 0 contain to your CSS to make this image resize to fit the div completely.
Here is an example with JSFiddle.
We're having a problem when an image (logo) is resized in WebKit, it is jagged for a couple of seconds. We've tried resizing it both by changing width in CSS and using scale transformation. Is there any way to fix this?
http://codepen.io/Znarkus/pen/xbxKLK
Example HTML:
<div>
<img src="http://i.imgur.com/LoN4Mnz.png">
</div>
CSS:
div {
width: 300px;
height: 100px;
background: #ddd;
}
img {
max-width: 100%;
}
div:hover img {
width: 200px;
}
It seems to be a problem with the antialiasing of the images which has a short delay. My searches did not yield any good answers on how to solve this, so I've come up with two possible solutions.
Solution 1
Keep two versions of the image pre-rendered, then switch between the different sizes.
Pros: Perfect rendering
Cons: Takes more memory
Solution 2
User the image-rendering CSS property to disable antialiasing. By adding image-rendering: [browser specific see codepen fork]; to the div, you can see that the rendering of the image isn't as good as without antialiasing.
Pros: All CSS, no extra memory consumption
Cons: Lesser image quality
http://codepen.io/anon/pen/XJWrvJ
EDIT: Solution 3
On second though, there might be a different solution. Images aren't particulary great for rendering text, but since it's a logo I'm guessing you have some kind of special twist on the text or styling. If you can export the logo as svg and render it in a canvas you might be able to get around these problems.
I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it.
I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the image.
Since I can't figure out how to scale a CSS sprite, I'm a bit stuck--how can I achieve arbitrary resolution using a CSS sprite?
The most elegant way you can do this is by using CSS3 background-size, but this is not supported on all browsers (e.g. IE<=8). You might look into IE specific transforms or filters that you can use and then add the -mz-, -webkit-, and -o- selectors to get the effect you want on the browsers you are targeting.
The least elegant way to do this is by faking the sprite scale and positioning.
The HTML
<div class="ex3">
<img src="http://www.placekitten.com/g/600/400"/>
</div>
The CSS
.ex3 {
position: relative;
overflow: hidden;
width: 50px;
height: 50px;
}
.ex3 img {
position: absolute;
top: -25px;
left: -25px;
width: 150px; /* Scaled down from 600px */
height: 100px; /* Scaled down from 400px */
}
The Fiddle
http://jsfiddle.net/brettwp/s2dfT/
I know of no way to change the size of a CSS sprite, sorry.
As for generating the CSS Sprites, try:
http://spriteme.org/
Or for general image editing:
http://www.gimp.org/
You could edit the individual image components, and then use SpriteMe to generate the Sprite. You don't want to generate the sprite and then resize the entire Sprite image, as then your CSS positions for each individual element would be thrown off.
The options I see are:
Either have the sprite's contents in different sizes in one sprite.
Or take the original sprite and manually resize it one time to create a smaller copy of it. Then reference the smaller sprite version for when you need the smaller images.
I'm working on a website with a em-based layout (so it can stretch and compress gracefully when users increase or decrease font size). This site has a header that should be displayed across all pages. I have a "header" div in all pages, and the site-wide css file includes the code:
#header
{
width: 50em;
height: 6em;
margin-bottom: .5em;
background: url("/IMAGES/header.png");
}
The problem is that this doesn't really stretch gracefully. When text size increase, the height and width change, but **the image doesn't increase in size; it simply repeats*.*
How can I make my image stretch and squish, instead of repeating or getting cut off? (I'd like a css-based solution if possible... I've got some html ideas in store, already).
There is no way to use css to strech a background image. You would have to use javascript or something similar. However, if you have an image that doesn't need to be repeated (e.g. blends into the background), you could do something like this:
background-position: center center;
background-repeat: no-repeat;
Addendum: The position has the following format: <top|center|bottom|xpos> <left|center|right|ypos>
where xpos and ypos can be given in the regular fashion (em, px, %, etc...).
The only way I've ever found is:
Set background of #header to bgcolor of header image.
Place new div inside #header
Split header image into 2
Set left half of new image as #header background aligned-left
Set right half of new image as #header.div background aligned-right
Of course that's only going to work with appropriate images though.
I'm pretty sure you can't change the scaling of background images. If your header.png file was included as an img tag, then you could set its height and width to be a number of ems and the browser would resize it (usually making it look like crap though).
Remember as well that pretty much all the modern browsers do page zooming these days, which will scale everything up without changing your layout too much. Perhaps tell your users to use that feature?
#Pianosaurus, I think your idea may be the simplest, although limited. Simply, don't stretch the image, but make sure it looks good when it's not stretched (center it, and don't let it repeat). Also, if you use a fair amount of padding at the edges of your header image, sizing the page down wouldn't cause such big problems, either.