So I am trying to use a background image in the bottom left of my page but I want it fixed and to resize with the browser window.
The only way I get close at all to reaching this goal is using 'background-size: 100%' However, that then makes the image TOO tall. So I'm not sure what to use to actually make it fit.
Any suggestions?
This is my current code...
body {
background-color:#000000;
background-image:url(Image.png);
background-position: 0% 100%;
background-attachment:fixed;
background-repeat:no-repeat;
background-size: 100%;
}
Well, background-size takes more than just one value. You could try something like this:
background-size: auto 100%;
However, for simplicity, first try:
background-size: cover;
This would make the width of the background automatically adjust to the aspect ratio of the 100% height. This guarantees that the background image will never be smaller or larger than the height, but the width is variable to the aspect ratio of their browser.
ADDENDUM
Also note that background-size is not supported in all browsers. If support for Internet Explorer is an issue for you, then I'd strongly suggest a Javascript fall-back. I'd also highly suggest reading the always lovely Chris Coyier's article on the "Perfect Full Page Background Image". It discusses fallbacks of all kinds!
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.
everyone!
I guess my problem is simple, but I can't figure out how to solve it :/
I would like to make an Image full height and full width, and when we resize the windows' width, the image resizes correctly like this example:
https://avada.theme-fusion.com/resume/
I already tried to play around with the width and height, but I can't have the same result
Thank you for your help !
The property you're looking for is background-size: cover.
body{
background-image: url('https://avada.theme-fusion.com/resume/wp-content/uploads/sites/66/2016/07/home_bg.jpg');
background-size: cover;
background-position: center;
}
You'll need to use a css background-image instead of an <img/> to achieve this result.
Here's a demo: https://jsfiddle.net/7rqm0mtb/
It would be ideal if you could post the code you're working with in order to get a better understanding on how you're going about this.
The Avada link you posted is using the image as a background-image, with the background-size property set to 'cover'. Take a look at this example on w3 schools.
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 am building a landing page, it must be responsive. but i have one small problem. i am having trouble while trying to define the background image. what i want is that on landscape mode the image will take the full width of the device screen but also to be in its full height like in this example
i see that they are using some framework, how can i do it without any framework.
when i try to do it i use background size:contain, but it maches the background image to the device screen height.
i have seen some exampels i which an image is placed in the html and it is converted to background image. i think that with z-index: -9999;like in the example i gave . but when i try it the image does not go to the background.
Any help would be great
You can use vh and vmax to do this.
An example:
CSS:
#im-full-height {
background: url('https://upload.wikimedia.org/wikipedia/commons/d/d7/Philippine-stock-market-board.jpg') center center no-repeat;
background-size: 100% 100%;
background-position: contain;
height: 100vh;
}
HTML:
<div id="im-full-height"></div>
Demo
A demo based on your JSFiddle link: https://jsfiddle.net/z1L12opp/2/
You will find below the demo of the JSFiddle I created that fits your need. I used new CSS dimension property vh, which let the element take X percent of the Visible Height.
Refering to the Can I use website for vh property, your code will not run in IE8 and below, and may probably not work properly in further version.
editable JSFIddle / Full screen JSFiddle
EDIT : the background follows the scroll
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.