I was trying to figure out what is the best, if it can be done, and desired method to take an image that is uploaded and trim the image for a thumb in CSS. If it cannot be done in pure CSS what is the method to do it in JavaScript/jQuery? The images may be different sizes but I am looking for a way that an image will square on center, and then reduce to fit. Example below:
This image is 413 x 300.
If this image was trimmed from the left and right for the portfolio thumb it would be 300 X 300:
Then the image needs to be reduced for the thumb 200 x 200 or what ever value the thumb is set to display:
EDIT
my understanding if #img_preview{width:200px;} is applied it would result in this:
example here:
http://jsfiddle.net/cnWqQ/5/
css like this:
#img-wrap{
height:200px;
width: 200px;
background-image: url('http://i.stack.imgur.com/yQ1j8.jpg');
background-size: cover;
background-position:center;
}
html like so:
<div id="img-wrap"></div>
Works by putting the images as the background in a div, works for all image shapes and sizes consistently.
it involves some css3.
You can do it in CSS, but it will only work with modern browsers :
You'll use background-image property :
<div id="myImageTrimed">
</div>
and the css :
#myImageTrimed {
background-image: url('img/youImage.jpg');
background-position: center; /* to make sure it trims the borders */
background-size: cover; /* As large as possible */
height: 200px; /* But only 200x200px are shown */
width: 200px;
}
Please comment if you have more browser constraints.
Just set the CSS width to the value you need, the height will be automatically adjusted to maintain the aspect ratio.
#img_preview{
width:200px;
}
You can mask the image with a div:
Your div:
height:200px;
width:200px;
overflow: hidden;
Your image:
position:absolute;
height:inherit;
margin-left:-15%;
see this demo below: http://jsfiddle.net/jRCgP/
Related
Could you please tell me why my background image not display completely .It only display upto the contend why ?I have only header in that so it display only small part of background image
Here is my code
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url(/login);
}
Actually I got the answer but
when I am trying to give margin to my header tag my background image come down .but my header title remain on same position on top .
see this
.headerTitle{
margin-left:2%;
margin-top:2%;
}
Try with this:
.button-bar {
padding:3% 20% 3% 20%;
}
#wrapper{
background-image: url("http://s.codeproject.com/App_Themes/CodeProject/Img/logo250x135.gif");
min-height: 500px;
}
Because the element with the background is only as high as the elements inside it. So in you wrapper there is only an h4-element with X amount of pixels high, so therefore the wrapper is also X amount of pixels high.
Try adding a min-height to your wrapper and see that the background follows. Like this:
#wrapper{
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
min-height: 250px;
}
https://jsfiddle.net/0tnjznt5/
Your css is doing exactly what you are telling it to do....
#wrapper is just that small slither showing with the background. If you want it to take up the entire page use .ionic-scroll in your css instead of #wrapper
See image:
http://screencast.com/t/l1ptRRNaDs
Try replacing #wrapper in your css with .button-bar, then try .ionic-scroll and see the results
.ionic-scroll {
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you want the full image to display inside #wrapper and you know the image height you can set #wrapper height and width like so:
#wrapper{
height: 1000px;
width: 1000px;
background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
}
If you don't know the height and width of your image I would suggest using an <img> tag inside #wrapper instead... This will cause #wrapper to adjust to the size of the image
I'm using an image with a height of 5000px, and i want make it always appear 100% in width and height to cover the background, in mobile and desktop.
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
background-size: cover;
width: 100%;
}
This code does not work, it makes her not to appear. I always need to set a height, and the problem is that the mobile's height is different from the desktop.
So you could say.. 'you can set height: 100%'.. and I did .. but nothing happens, the image doesn't appear, only if i set with pxs.
UPDATE
I feel urged to update my answer since I apparently understood the question the wrong way. I'll leave the old version at the bottom since apparently a lot of people found it helpful even though it failed to answer the original question.
Since your background image is repeating itself, I'll assume you don't want the whole image, just whatever height you need. So, you need 2 things:
set a height on .main
get rid of background-size altogether
So, this should actually work for you:
.main {
position: relative;
background: url('../images/background.png') no-repeat top center;
width: 100%;
height: 100%;
}
If my assumption is correct, there's 1 more thing: you don't need a background over 5000px high to achieve your goal, just reduce it to 1px height (i.e. 1 line of your desired background) and change your css to:
.main {
position: relative;
background: url('../images/background.png') repeat-y top center;
background-size: cover;
width: 100%;
}
I hope this helps
OLD VERSION
Your .main has no height and height:100%; doesn't work because the elements containing it have no height themselves.
One possible solution would be to add this:
html, body, .main {
height:100%;
}
This might be exactly what you need, but you may also run into other problems with this solution. It all depends on what you're actually trying to achieve.
Other possible solutions:
Use viewport units
.main {
height:100vh;
}
Please be aware that some mobile devices interpret these differently from what you'd expect.
Add the background to the body itself
body {
background: url('../images/background.png') no-repeat top center;
background-size: cover;
}
As I wrote before: It's difficult to tell which solution is the best, it depends on your goal.
Have you tried adding this style?
html, body{ height: 100%;}
Then adding a height:100%; to your .main div
You are working with background-image... Keep in mind that the size of the rendered image has nothing to do with the image it self, but with the element created to contain it.
Now, if you want your image to appear at 100% height and width you can use the property background-size: contain, instead of cover.
This will tell the browser that your image should not be cropped (as long as you have a height set for the .main element).
It seems to me, that the kind of effect you want is easier done if you just use the <img> tag instead of css background.
I had a issue about flex box can`t fit the background height, and the code below suited for me. The rest background-size,repeat and position depends on yours.
html{
height:auto;
}
body{
display: flex;
flex-direction: column;
min-height: 100vh;
}
I have several images with very varying dimensions.
Some images may be as small as 50x100 and others as big as 4000x4000.
I want to show these images in their original size (never bigger), or scaled down to just fit inside the browser window.
Using the background image property I have gotten the images to always fit inside the browser, but I can't stop them from up-scaling if the browser is bigger than the image:
<div class="slide-pane" style="background-image: url(<insert url to image here>);"></div>
.slide-pane {
background-repeat: no-repeat;
background-size:auto;
position: absolute;
background-position: center;
background-repeat: no-repeat;
height: 80%;
width: 80%;
}
I have found these Javascript/Jquery solutions:
https://github.com/gutierrezalex/photo-resize
How to resize an image to fit in the browser window?
But I'm hoping there are some CSS only solutions.
max-height:100%;
max-width:100%;
height:auto;
Apply that to an img not an elements background image. Background images don't have full browser support for max width height. You could use background-size set to 100% 100% but I'd recommend using an img for better css control and accessibility.
If they’re content images (and not there for style) then you’re better off using an <img> element in the page. If you do that then you can give it img { max-width: 100%; } in your CSS. This has the added benefit of working in IE8 (unlike background-size).
I have a situation where I have fill the body with a background image which is nothing but a pattern - so I would use
body
{
background-image:url('paper.gif');
background-repeat:repeat-y;
}
but now I also need one more image to set on top of this which will appear the horizontal and vertical center of screen, (this image ofcourse smaller and would only occupy the center).
Its like putting 2 images in BG smaller one over the another. How could I do that?
And I have to do that in javascript/jQuery.
How about using pseudo elements.
CSS desk demo
body
{
background:url(http://placehold.it/200x100) repeat;
}
body:after
{
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
background: url(http://lorempixel.com/400/200) center center no-repeat;
}
Using css3 you can achieve something like this (two images), since your question is tagged with HTML5, so I think you can use this probably
body {
background: url('paper.gif'), url('another.gif');
background-repeat: repeat-y, no-repeat;
}
This is an example but not sure how you want to place both images.
Either apply a z-index:{NUMBER}; that is greater than the body's z-index (default 1) if you don't mind the top of your background image being cut off (or you can just edit the image to have an empty bar at the top to account for your header).
Or, apply your background not to body, but to whatever your main content div underneath your header is.
EDIT: The answer would allow the background image to change it's height depending on the size of the body. if the body is 500px high, it should be 100% width, 500px height. or 100% width 2500px height.
Maybe I'm missing the boat on this, but I'm trying to figure out how to have my background image scale with the page. The end user doesn't want for the background image to be static (COVER), but the image should scale with the bigger his content gets on his site.
I'm guessing this can't be done with CSS alone. When I say I guess I've been through a mess load of different ways of doing this.
Is this just a simple javascript/jquery where I get the height of the body tag, and then apply that to the background image height?
If you need an example:
<body>
<div class="first"><!--TEXT--></div>
<div class="second"><!--TEXT--></div>
</body>
CSS
body { background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat; }
div { width: 75%; margin: 0 auto; }
.first { height: 1000px; }
.second { height: 500px; }
http://jsfiddle.net/WEat7/
This would need to work on multiple pages with different body heights
EDIT: http://jsfiddle.net/WEat7/1/
Fixed widths on the divs to illustrate the concept. I apologize
body {
background: url(http://flashfreezeicecream.com/bg.jpg) center no-repeat;
background-size:100% 100%;
}
http://jsfiddle.net/WEat7/
The following CSS should fix the background image and have it cover the entire body no matter what size the width or height - see demo
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center fixed;
background-size:cover;
}
However, please note that IE8 does not support background-size.
Edit: updated demo using following CSS
body {
background: url(http://flashfreezeicecream.com/bg.jpg) no-repeat center center;
background-size:100% 100%;
}
Add to your body css:
background-size:100% 100%;
It seems that we need a wrap answer ))
It has been suggested above that background-size: 100% 100%; will stretch the background image to the full width and the full height. And so it does.
Say your content is small (400px) - the background image will cover only 400 - http://jsfiddle.net/skip405/WEat7/7/
Say your content is really huge (2500px) - the background image will still cover the full height - http://jsfiddle.net/skip405/WEat7/8/