I've made my background image responsive in my :after psuedo but not able to control the height responsiveness so I end up with a big white space at the bottom of my image.
My CSS:
.element:after {
content:'';
background:url('http://i57.tinypic.com/4kdytv.png') no-repeat;
background-size:100%;
height:284px;
display:block;
}
Fiddle: http://jsfiddle.net/w6amht6o/
I've seen a couple other questions like this but none of them discuss making the height responsive. I seen you could try something like "background-width:100% 100%;" but this did not work for me.
Let me know what I am doing wrong!
No such thing as background-width in CSS. You're thinking of background-size, which should do exactly what you're describing.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
I need background image sprites to resize according to the width of their container, without showing the whole sprite, and background-size:100% accomplishes this, like so:
#featured ul.icon-controls li.prevention {
background:url(img/ico1.png) no-repeat;
background-size:100%;
height:60px;
width:50px;
background-position: 0 -113px;
}
But, alas, I have to support IE8, which does not support background-size. I've found scripts like backgroundSize.js, which force IE8 to render background-size:cover and background-size:contain, but those don't work for sprites. And I need to use a sprite for the various states of each icon (hover/active/inactive).
Is there anything I can do -- hacky solutions are ok given my desperation!
Here is a fiddle of my full code: http://jsfiddle.net/Pw7fL/
Check out this!
https://github.com/louisremi/background-size-polyfill
As I found out it is easy to use!
I'd like to get the gradient effect of purple or white color that starts with a strong tone and gradually this until dimming seems to disappear or become transparent and you see the background behind.It's possible?
I hope I have explained!
Regards!
I'd suggest using a CSS gradient generator.
Try this one: http://www.colorzilla.com/gradient-editor/
It has a number of presets, some of which look like they might be useful for you.
div {
height: 500px;
width: 300px;
background-image: -o-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -moz-linear-gradient(#8860af, #4e91cc, #c7deee);
background-image: -webkit-linear-gradient(#8860af, #4e91cc, #c7deee);
}
Live demo: Tinkerbin
Read more here.
I'm looking for a way to use a part of a picture to use as a thumbnail without actually resize the image.
It's like you capture a part of the picture and show it as thumbnail
try using CSS overflow to limit the viewport in the div, like so
.preview {width: 60px; height: 60px; overflow: hidden;}
<div class="preview">
<img src="path to big image" alt=""/>
</div>
I think sprites are what you're looking for.
CSS Tricks has some posts on how to use sprites, so I'd refer you to that, maybe starting with the article CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
What you describe seems to be the use-case of the CSS clip method.
img {
position:absolute;
clip:rect(0px,60px,200px,0px);
}
img:hover {
clip: auto; /* 'un-clips' the image and displays it full-size */
}
The main caveat with this technique is that the element to be clipped must have position: absolute; to work.
See (in order of recommendation):
http://www.cssplay.co.uk/menu/clip_gallery
http://www.w3schools.com/CSS/pr_pos_clip.asp
Here's what you want to do... The DIV with the background image works, but that's a DIV. If you want it to still behave like an image layout-wise, you could get your hands dirty with "inline-block" and a matrix of browser incompatibilities, or you could simply use a transparent image with a background image on that. Construct a 1x1 pixel transparent GIF, say it's "pixel.gif." Then all you do is:
<img src="pixel.gif" width="40" height="40"
style="background:url(full_pic.jpg) -90px -90px no-repeat">
In this case 40x40 is your crop size, and (90, 90) is the offset into the full image where you grab the crop from.
Here's a quick and dirty round corners technique I've been playing around with.
<!-- assuming the div isn't statically positioned -->
<div>
<img src="box_TL.png" style="position:absolute;top:0;left:0;"/>
<img src="box_TR.png" style="position:absolute;top:0;right:0;"/>
<!-- other content -->
<img src="box_BL.png" style="position:absolute;bottom:0;left:0;"/>
<img src="box_BR.png" style="position:absolute;bottom:0;right:0;"/>
</div>
Yeah it's ugly, but it's fast, the corners are fluid, it avoids nested divs and requires no javascript. The corner images and content order makes no difference, but I thought it might be more intuitive to order corners and content this way.
Question: How terrible is this technique? Is it passable or should I abandon it completely?
I'd use jQuery Corner Plugin. It's very fast and works in all modern browsers, and also in IE6.
It's terrible. Your markup should be content, and your layout should be in the style. Not intermingled. You should go with:
<div class="whatitis">
bla blah ... content here
</div>
and the style:
.whatitis {
background: whatever;
border: whatever;
border-radius: 1em;
-moz-border-radius: 1em
-webkit-border-radius: 1em;
}
Yes, sure, some browsers won't get rounded corners. But if you hack up a solution that will give properly rounded cornsers even in browsers that does not support that, you will have a complex solution, and odds are that your site will not work att all in some other browsers. So you should ask yourself: What is more important, that the site works at all in some browser X or that you get rounded corners in some other browser Y?
Addition: Using the jQuery plugin mentioned in another answer (or some other pre-packaged solution) might be accepptable. As long as it does not require any extra <div>, <img> or other tags.
It's a terrible solution, sorry :-)
It's true that you don't need any JavaScript or nested div elements. The JavaScript is easily avoidable, no matter what. But is four irrelevant img elements better than a few nested div elements? The img element is supposed to contain image content, using it for layout purposes is basically the same as using tables for layout. Yes, it works, but it's wrong, and it ruins all semantic value.
If I were you, I'd do it this way (excuse the silly class-names, they are just there to illustrate):
The markup
<div class="boxWithRoundedCorners">
<div class="roundedCornersTop">
<div class="roundedCornersTopRight"></div>
</div>
<p>Your content goes here, totally unaffected by the corners at all. Apply all necessary margin and other styling to make it look good.</p>
<div class="roundedCornersBottom">
<div class="roundedCornersBottomRight"></div>
</div>
</div>
The CSS
.boxWithRoundedCorners { background: red; }
.roundedCornersTop {
background: url(topLeftCornerPlusTheTopOfTheBox.gif); /* Should be pretty long. Assuming your corners are 20*20px, this could for instance be 1000*20px, depending on how large the box would ever be in the real world */
height: 20px;
}
.roundedCornersTopRight {
background: url(topRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
.roundedCornersBottom { background: url(topBottomCornerPlusTheBottomOfTheBox.gif); /* same "rule" as above */
height: 20px;
}
.roundedCornersBottomRight {
background: url(bottomRightImage.gif);
width: 20px;
height: 20px;
float: right;
}
Got it? Hang on, I'll put up an example somewhere :-)
Edit: Just threw up an an example!
Anyhow, this method will ensure a complete flexibility regarding height and width of the box, and the layout within the box always works the way it should, unaffected by the corners.
Yes, it gives you some nested divs with no purpose other than the layout - but then again, that's what DIVs are used for. IMGs should always be content-related imagery.
You could do it with all the corners being 15*15px and setting the background-color of the container. However, when stretching these images like this, you get the opportunity to add shadows, gradients or other effects. This is what I'm used to do, so I did this this way with the stretched images.
This method is well tested out, and should as far as I know/remember work fine at least all the way back to IE 5.5.
This is a very old topic, but since it's re-appeared on the front page, I'll add a comment.
In the last few months, a new solution has appeared for rounded corners, which solves the issue for all relevant versions of IE (6,7,8).
CSS3Pie is a 'hack' for IE which allows you to set up rounded corners in your CSS and not worry about it anywhere else. At a stroke, you can throw away all those extra divs in your markup and those jquery plugins, and just specify it in your stylesheet the way it should be.
All other browsers support rounded corners in CSS, and have done so for long enough that you don't need to worry about older versions.
CSS3Pie also helps with CSS gradients and box shadows in IE too, so it's a very big win for cross-browser developers.
you'll come into issues with IE6 using PNGs so you will either need to add the correct CSS filter background to divs instead of images or use javascript to help turn the png images into transparent gifs with the png background added.
http://www.twinhelix.com/css/iepngfix/
If the box is fixed width, then there's an interesting trick you can do which works in IE8 and the rest (but not IE7-):
div.rounded {
width: 600px;
padding: 0 10px;
}
div.rounded:before,
div.rounded:after {
display: block;
content: "";
width: 600px;
height: 10px;
}
div.rounded:before { background: url(images/rounded_top.png); }
div.rounded:after { background: url(images/rounded_bottom.png); }
Unfortunately this doesn't work with anything that has a fluid width, and it's not copatible with older IE browsers, but I still like it :)