I have a 200x100 rectangular image, and I scaled it down to 50px while preserving its original aspect ratio by using
max-width: 50px;
max-height: 50px;
I would like to give it a circular picture effect so border-radius: 50% was used. However, this won't work and will give me an oval shape image as the image is not a perfect square. How would I approach this problem while preserving my original image aspect ratio? I am also ok with having white stripes around my image to fill in the gap and make it a square.
Thanks
In a nutshell:
.my-ele {
background-color : #000;
background-image : url([URL TO IMAGE]);
background-repeat : no-repeat;
background-position : 50% 50%;
background-size : 100% auto;
background-size : contain;
width : 300px;
height : 300px;
border-radius : 50%;
}
Here is a demo: http://jsfiddle.net/ArURx/1/
I would use a CSS background property to display the image. You can set your element to be square, whatever dimensions, then set it's background image as the image you want to display and set background-size to contain for modern browsers and something like 100% auto or auto 100% for old browsers (depending on whether you want full-width or full-height).
Related
I want to draw a border around a CSS background image, which resizes itself according to window size in a container div. I can draw a border around the div, but not around the image itself.
Can this even be done in this kind of setup?
Rather than post code here, I've made a working example HERE
<style parse-style>#pimg {
background:#FFF url( {{ img }} ) center center no-repeat;
background-size: contain;
height: 100%;
position:relative;
-webkit-transition: All 0.3s ease-in-out;;}
</style>
Thanks in advance.
No, there's no way to do that. You could add a second div that contains the image, but then you wouldn't be able to use background-size: contain.
If you knew that the image dimensions wouldn't change, you could add a second background-image, positioned in the same way, that was simply a transparent png with the border you wanted... but that would be really silly.
Unfortunately I don't have the time to create a working example right now, but a possible workaround may be the use of multiple backgrounds: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
The second background could be an SVG rectangle with a stroke. To avoid possible stroke deformation due to scaling, use non-scaling stroke: https://www.w3.org/TR/SVGTiny12/painting.html#NonScalingStroke
As shipshape said, there's no way to draw border for BG image but I got an idea which may help you. You can use 2 background images and the behind one can be a plaint colored background playing role of the border. See the code below:
#pimg {
border: 1px solid black;
width: 200px;
height: 200px;
background-image: url({{ bg-image.jpg }}), url({{ 1px.jpg }});
background-size: 90% 90%, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: center center, left top;
}
Use 1x1px shim image in your desired color as the border and repeat it.
The background size can control the width of the border. If you increase 90%, the border will be thinner and if you decrease it, the border will be wider.
I have got so far on the background of my new website and now i am stuck, the background image goes less than 100% height if you shrink the browser window.
I want it to stay full size and if you shrink it, I don't want the height to go any less than 100% (showing white)
Code here http://www.bestlincs.co.uk/new/
you can use below code:
html or .classname {
background: url(ImageUrlhere) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Use:
body {margin: 0; padding: 0}
and set the background-size property to cover: http://www.w3schools.com/cssref/css3_pr_background-size.asp
In your code you have not defined a height to the image give it a height 100% and it works i tried it in my browser and works fine
The solution depends on your needs - one way would be to specify a min-width and min-height attributes in css instead of pure width. As it will scale to whatever size it needs, then position it fixed to the top left corner (mind you, any "overflow" on the right will be cut off).
Source:
http://css-tricks.com/perfect-full-page-background-image/
A detailed explanation of your problem:
If you set an image to 100% width of its container and do not specify a height, it will always be stretched until it fills out the container, while the height is scaled to keep the image's aspect ratio.
E.g: Take an image that is 200px x 100px large, put it into a 300px wide container with it's width set to 100%. It will be scaled by a factor of 300/200 = 1.5 along both dimension, resulting in an image sized: 300px x 150px.
What will happen, if your image has a different aspect ratio than the user's screen? It will simply stretch to full width, then leave the rest blank. Setting a height as well would introduce even more problems, as your image would get distorted.
HTML:
body {
margin:0;
background: url(image.gif) no-repeat;
padding: 0;
}
Then the background size will be 100%
I need to re-size a given area of a sprite. My original image is 800px by 200px. I set background-position: 200px 0px; and width: 100px; height: 25px; This gives me the correct part of the sprite, but I am wondering if it is possible to re-size this portion of the sprite to say 200px by 50px. But background-size: 200px 50px; resizes the whole sprite to this size, not just the area I am interested in.
Thanks!
I am trying to be general, so there is no fiddle.
You can try using percentages to scale the image proportionately. For example, to double that portion to 200px by 50px, use:
background-size: 200% 200%;
This resizes the background to 200% of the width and height of its container respectively. You may need to adjust the background-position value to accommodate this method of scaling, depending on your layout or use case.
Be aware that background-size isn't really designed for use with sprites, so this may or may not achieve the result you're looking for.
No, you can't scale a portion of an image using CSS. I tested background-size by percentage and was surprised to find that the scaling on Chrome is not 1:1.
background-size: 50% doubled the background image. With 200% it seemed to scale exponentially.
http://jsfiddle.net/qFCk3/
I used a background image with dimension 1120 X 714 pixels. The length and width ratio should be proportional w/ it's dimension so that the image will not look distorted.
The webpage that will use the background-image have a fixed width of 1024px. In my css, I have below:
body{
background: black url("background.jpg") no-repeat fixed center;
background-size: 1120px 100%;
}
The css above will make the length of the background-image 100%. Depending on the resolution or the browser dimension, the background-image will get distorted.
Width is not a problem here.
What are other approach for this having a fixed dimension of background image?
Should I use background-size: 1120px 714px;?
When you set the background-size: the first value is the width and the second one is the height.
So if you want to make the length of the image 100% then write:
background-size: 100% 714px;
I presume 714px is the height of the image...
You need not specify the background size at all. The code below should be enough.
body{
background: black url("background.jpg") no-repeat center center;
background-attachment: fixed;
}
I need to set the fixed width for the background image. It should work fine in both IE and Firefox. How to do get this ?
#Multiplexer: You currently can't set the width/height of the background image, but you can set the width/height of its container.
E.g.
<div style="background: url(someimage.jpg) no-repeat 0 0; height: 300px; width: 400px">
Some content
</div>
If someimage.jpg is 640x480, only 400px of that width and 300px of that height will be shown. You can move the background around by playing with the background position properties of the CSS -- see http://www.w3schools.com/css/css_background.asp for the full/short-hand reference.
you can use css3 property background-size, but it's not fully supported yet
https://developer.mozilla.org/en/CSS/-moz-background-size
you can do it with background-size.
enter code here
.myCss
{
background-image:url(image.jpg);
background-repeat:no-repeat;
background size:10% 100%;
}
In size,
10% is width value and 1005 is height value.