Is it possible to control the direction from which a picture is cropped using CSS?
I have a product shot that has it's subject on the left side of the image.
I need to be able to not crop the left size on browser resize.
Right now the I'm setting the picture as background image in order to have control over the scaling and cropping but directional cropping does not seem to be a thing.
Below is a link to codepen:
http://codepen.io/samratrocks/pen/LxGjjR
and below is the CSS code I'm using on the DIV.
.img-holder {
height: 300px;
background-repeat: no-repeat;
background-position: center center;
background-size: auto auto;
}
As you can see from the pen, when you decrease the size of the browser, the image gets cropped while maintaining the center. I want to crop the image, while maintaining the left side of the image.
Has anyone has this problem / solved this problem before?
You might be able to do something in javascript, but it sounds like a hacky solution to me. Instead, I'd recommend having two versions of the image, one cropped and one not, and using media queries or a css framework like bootstrap. This way, when the browser is resized to a certain dimension, your page will use the correct image automagically.
Turns out it's a rather stupid question.
I just changed the position to left and kept the size as auto and now the image only crops from right.
.img-holder {
background-position: left center;
background-size: auto auto;
Related
In Chrome
In Chrome, it works just like the picture above.
In Safari
However, in Safari, it does not work as shown above.
The CSS code is as follows:
background-image: url(rendyhome.png);
background-size: auto 66vh;
background-repeat: no-repeat;
background-position: right;
How do I fix it?
background-size: contain;
You can try with the following code that tell the browser keeping image inside the container, then, to center it. This solution may create a blank color around the image that can be filled using background color;
background-size: contain;
background-position: center;
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
A keyword that scales the image as large as possible and maintains
image aspect ratio (image doesn't get squished). Image is letterboxed
within the container. When the image and container have different
dimensions, the empty areas (either top/bottom of left/right) are
filled with the background-color.
background-size: cover;
You can also use background-size: cover; that will entirely fill the screen with your image.
Be careful: using this technique, you need to know the image may be cut by the browser if the screen ratio is not the same as your image (think responsive). As I can see on your image, there are some wording inside, so the cover solution may be inappropriate to keep them visible.
When the image and container have different dimensions, the image is
clipped either left/right or top/bottom.
Both solutions are good, but effects are different. It depends on your behaviour preference. Even if image ratio is respected in both solution, one solution clip/cut and the other create a blank around the image.
This is an image from marcarea.com, in order to summarize. You can see behaviours I described before.
Look here:
https://www.w3schools.com/cssref/css3_pr_background-size.asp
I would look at using
background-size: cover;
Scale the background image to be as large as possible so that the
background area is completely covered by the background image. Some
parts of the background image may not be in view within the background
positioning area
I'm trying to add a background to an element, however the image is very large. As a result, using background: cover leaves the image actual-size and does not center it. Thus, the image appears very "zoomed in" as it is not showing as much as it can.
So, here's the question: How can I have the image be as small as it can, while still covering the entire element. Furthermore, how can I center it properly?
Attached I have what background: cover gives me, and a simple photoshop mockup of what I want. I outlined in red where the border of the background is.
Background: Cover with small width
Photoshop mockup with small width
Background: Cover with large width
Photoshop mockup with large width
Currently your background-position declaration for #home is set to 0, 0;
Those numbers represent the x-axis (horizontal placement) and y-axis (vertical placement) for the background image. I played around with the inspector and was able to move the background image's position more to my liking. You could also try playing around with keywords if they make more sense to you
background-position: top left;
or perhaps:
background-position: center center;
Percentages are also an option:
background-position: 25% 50%;
The keywords and percentages also apply to the x-axis and y-axis respectively.
Check out the MDN article for more information:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
One final note, your background image is huge–7.1MB to be exact. If you could get it the size down to at least 1MB (though under 500kb would be ideal), I'd totally recommend that.
I am not sure if this could help since I have not tried it; however, basically there is a property called
background-size: and the size can be in %
so if you want the background image to be 50% ( width and height ) or 50% 75% ( width and height) of the or certain size you want
see documentation background-size also see examples
Hope this could help
Alan Mehio
London
I'm sure I poorly structered that question title, but this is what I'm trying to do:
Key: image = moving picture behind submit form
Problem 1: Get the background image to stay at that perfect size no matter the width of the page.
Get the entire frame of the moving image showing.
When the image is at the perfect width (http://gyazo.com/702e443a6b814b1abc26a801836f4d6f) it shows the entire image.
When the width is increased even more, the image starts to 'zoom in'. (Which I don't want.)
Problem 2: On mobile devices with much smaller screens, most of the image is cut off (and you can't scroll to see the rest).
Get the entire frame of the moving image showing.
Have the entire image centered and the user should be able to see the entire frame of the image.
This is what my code looks like for the image:
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-size: 100%;
background-repeat: no-repeat;
background-size: cover;
jsfiddle
You need to do the following:
#top{
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/a4/79/4c/a4794cbfe048505d9645339738a8ddc7.jpg");
height: 60%;
background-position: center -150px;
background-repeat: no-repeat;
}
Because you were using the background-size: 100%; you're telling the browser to scale the image for you. By removing it and positioning the background you'll achieve what you want with the image never resizing.
Fiddle
Note: You'll need to make sure that your image is large enough that when the page is stretched really large that you won't see the background. It will be hard to do, given that screen resolutions are getting so large now.
#your_image_container_id {
width: 100%;
}
What you are trying to say is called "Responsive Web Design". In order to achieve RWD, you never use absolute units such as pixels, points... but rather use relative units such as %, em which scales according to size of the screen. but you have do some calculation though such as %, make sure all elements on same row do not have the total of with percentage of over 100%, or something like that and also have to compensate for paddings and margins.
Currently, I have a mockup website www.hush.technology
and on my windows (17 inch) computer the website background is full screen
but on my mac (13 inch ) the width of the picture is cut off on the right. I generally like to solve problems on my own but I can't figure it out.
my css looks like this
// CSS CODE
.bgimage {
background: url(image url);
background-size: cover;
width: auto;
height: 720px;
}
Would anyone know why this is happening. I would love an explanation.
From here
background-size:cover
Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area
I assume the aspect ratio is off, and it is clipping part of the image.
I'll try to build on what both of these answers have said. But I'll tell you in short: there is no solution to what you're trying to achieve because it isn't possible. Here's why:
The first box from the left shows what you have as a full screen browser - your image background perfectly covers the screen as you want it to. Your screen is the same size as the background and the image ratio is kept.
The box in the middle shows what happens when you resize your browser (or view on your 13" mac, which I'm assuming is a lower resolution). The image gets cut off the left and right! But why? Because the image is doing what it's been told to: keep it's ratio and cover the entire screen. They both have to be met, and the background image doesn't care whether all of itself isn't visible - it just cares that the screen is being covered and the ratio is the same.
The final box (one on the right), is the implementation of user3739658's answer. You've told the image you want it to make itself entirely visible, and keep the ratio. The consequence: it can't cover the whole screen anymore.
Your background image can only be guaranteed to do two of the three at any given time.
Cover the screen
Keep the ratio
Show the entire image
Another panel I could show is the image being told to: cover the screen and show the entire image, which would result in the image being stretched one way or the other.
The Solution
The easiest thing to do is to remove your static height: 720px;, which means the div can now resize based on the width of the browser (to keep the ratio of the background image).
An alternative is to change your background's purpose - your image is mostly made up of three things:
The actual picture on the right
Some largish text on the top left
Lots of background colour
You can split the background up into just having a picture on the right, and text on the left, with your background now being just a colour. The advantage of this is that the image will always show at the right of the screen, and your text will always show (and is now no longer a picture). Both the text and picture will also never skew, since the property being resized is the background color's width: which doesn't matter since its just a colour fill.
Check this link;
Perfect Full Page Background Image
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
good luck!
first of all keep in mind I uderstand a very little of HTML language...
if you answer, do it as if you'd do it to a 10yo boy...
The question:
I'd like to have a background image in my website and another one on it.
the bg's image can be freely resized to match the screen or mobile size,
but the second one should keep its aspect ratio....!
http://www.flickr.com/photos/110747328#N03/
![you'll see on the left the full screen size and on the right the mobile size][1]
I dont know if understand you correctly. Here's what I get:
You want your bg image to be dynamically resized according to the size of the screen, but not the "content".
You can get the first by using the "background-size: cover"'s CSS property for your background:
body {
background: url('path-to-your-image.jpg') no-repeat center center fixed;
background-size: cover;
}
After that, if you just create a div and put your content in it. You'll get what you want: for the background to be resized and the content to keep its proportions.
Here is a live example: http://jsfiddle.net/agarridob/8NtwE/
By the way, I strongly recommend that you take a look at http://www.bentobox.io, where you'll find lots of resources that will help you understand a bit of what this HTML & CSS is.