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
Related
I have a 1920x1080 JPEG background image that I am using on a 1920x1080 screen.
It has the following properties:
background-image: url(/bg.jpg);
background-attachment: fixed;
background-position: center top;
background-repeat: repeat;
In Chrome, without the background-position: center top; the background is perfectly scaled and sharp. With this property added, the background loses sharpness.
Weirdly, if the browser width is an odd number, the image is perfectly sharp. So 1920x1080 would be a bit blurry, but 1919x1080 would be perfect.
In Edge and Firefox, the background image is perfectly scaled in either case.
The background-position property is required for proper positioning due to scroll bars on some browsers.
I have tried image-rendering. The only property that I could actually see a difference with was pixelate, but it caused tearing at some parts.
I have trialed lots of different property combinations (background-size), but I definitely could've missed something.
My question is the title:
How to stop background-position making the background image less sharp?
But the answer to this question would also resolve my problem, as I think that this might be a bug or at least an after-effect/result of one of Chrome's features:
How to stop Chrome resizing (or doing something else) to a background image when it is being positioned?
There could be multiple reasons why this is happening.
I'd take a guess and say that the background-size isn't being set. I would be tempted the have this set to background-size: contain to keep your ratio in tack. Also when you are using background-attachment: fixed; make sure the div is position: static.
Hope this help, if not, supply a jsfiddle and I can take a look.
image-rendering: pixelated;
it works for me.
i want to display several different photos with different ratios and sizes. if the image is big enough i'm displaying it as background-size: cover; or else if it's not big enough i'd like to use background-size: cover; background-position: center; and i'd like to display the image blurred on the two sides of the sharp image.
I know that it's possible. My question is that can it be done with using CSS only?
I have the javascript solution already but would be nicer to have it with pure css.
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;
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!