The effect works fine, but the image is zoomed in on. Any clue as to why?
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Well, background-sizing: cover; is the reason why your background image seems "zoomed" as it is making the background image so big that it fully fits over its container. What happens on your case (feeling like its being zoomed in) is that the aspect ratio of the background isnt the same as the aspect ratio of the container. Instead of stretching the background image, background-sizing: cover will oversize the background so much until it covers everything up, leaving no gaps, but the "zooming" might happen.
Here is an illustration of the reason, as I know how bad my english :D
So you can see, the background image will be resized that it fits for the height, but because of the aspect ratio, both of the sides will go out of the container.
Edit #2 - Added some more informations and help
Depending on the real aspect ratios and sizes there are different solutions to it. The "quick and dirty solution" is to use background-size but instead of setting it to "cover", we will set its width and height to 100%. Code:
#hero{
background-image:url(../images/metalWorx_hero.jpg);
width:1020px;
min-height:398px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%; /* Set width and height to 100% */
}
Its a very simple "fix", but its obvious what can happen when the aspect ratio gets distorted:
Real and only way to fix it ;)
If you really want to fix it, you should make sure that your container and background image have about the same aspect ratio and then going back to background-size: cover; (just as in your first post)
Related
I am trying to use an image as background as cover. But the image shows different in different window size. I tried to see on developer tool on chrome. On my image there have curve shape, and its totally looks different for larger screen as well as mobile device.
I want to show the image in same looks for all of the window size. Here is my css code.
background-image:url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-repeat: no-repeat;
background-size: cover ;
height:auto;
Please give me any idea what I have to do.
For several sites I've built this has been what I've use for a responsive large background-image
img {
height: auto;
width: 100%;
background-image: url(../wp-content/uploads/2018/06/footer-wave-img.png);
background-position: 0%, 0%, 50%, 50%;
background-size: auto, cover;
}
You can set the background-size property to "100% 100%", this will allow the background to be independent of the resolution of the device. However, the background image will stretch to cover the entire content area of your element.Here is a fiddle for that.In case, you wish to keep the proportions of the image same, you can try background-size: 100%; this alone too.
I came upon a problem while designing a jumbotron for a website.
It's outside the container. Created a background for it, set background-size to cover, worked great.
When I opened the front page on a wider screen, the jumbotron became larger and there were gaps since the background image was too wide.
I then tried background-size: 100% 100%, thinking the image would stretch. No changes. Thought I perhaps had a margin/padding issue. No changes again.
Is this a problem with the image or the jumbotron? I'm not sure how to solve this. No matter what image I pick, it behaves very differently on different devices.
Behaving differently on different devices is not a bug, it's a feature. Having said that, try this...
background-image: url(INSERT_URL_HERE);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
If you want the image to stretch to fit the full element (even if it means losing proportion), you need to set background-attachment to fixed and the background-size to 100%. Like:
.jumbotron {
background-image: url(image.url);
background-size: 100% 100%;
background-attachment: fixed;
}
Working example:
https://jsfiddle.net/4w9u7m1a/2/
On my site, I want the body to scroll over my header image. With background-attachment: fixed, it works, but the image gets way too big after which my title is not readable anymore. In other words, the background-size: cover, doesn't work anymore when I add background-attachment: fixed.
Curious if anyone else has had this problem and if anyone has a solution for this.
Here is my code:
.site-header {
background: url("https://howtogetrippedathome.com/wp-content/uploads/2018/01/How-To-Get-Ripped-At-Home-Header-Image.png") top;
background-size: cover;
}
PS2, my site: https://howtogetrippedathome.com/
background-attachment: fixed will handle the image as if the element was 100% height and width of the viewport. Therefore background-size: cover; will resize the image height to fit the viewport.
Try using background-size: 100% auto; (100% of the width | auto will set the height in a way that won't stretch the image)
I tested it on your side and with that edit it works 100%.
Unfortunately I can not add a code snipped because it will size the background to stackoverflows viewport and not to the code-sippets viewport.
I hope this is simple but here is the code I'm doing and it works perfectly except for one thing, the scale isn't kept. It gets wide and then looks silly.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
background-position: center center;
}
The image scales when resized and on smaller sizes it looks normal but as it gets bigger (wider) it stretches and looks awkward. How can I make it so the image keeps its aspect and just "zooms" in on itself keeping the whole div covered and the image scaled.
An example of this working on a site is techhubdenver .com with their top div background image
Can this be done with CSS or will I need to get some Javascript coding going to do this.
I know how to make new images for responsive type pages but I was hoping to just use one image and have it work no matter the device. it only becomes a problem when the screen size is way off from the image size (too small or too wide).
if the image would just "shrink" but keep aspect ratio for smaller devices I think it would work and if the image would just "zoom in" staying on the center of the image when the screen size gets to large i think it would work good.
Keep aspect ratio and always fill the div (okay to zoom in) is my goal here.
You need background-size: cover;. That will scale your background such that it covers the element.
.div1 {
background-image: url("images/headerbgimage2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}
I've searched for hours upon hours and now I figure it's time for me to ask the question. I can't get my background image that is placed in my header to fit to screen. It works for every kind of computer resolution fine, but where I run into trouble is when I am viewing on a phone, it doesn't want to shrink. I've done min-height, max-height, I've tried everything, the problem partly I think is that the header div itself is smaller than this image, but I also don't really know and need some guidance, i'm relatively new to the CSS scene.
Here is what I have:
#header {
background-image: url('http://hamsoc.polymath.io/wp-content/uploads/2013/05/hamsocheader.png');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 209px;
}
Website url is http://hamsoc.polymath.io
Thank you for your help in advance!
Duncan Beattie gave me the answer and it worked like a charm. Here is what he said:
"You have background-size: cover which is fitting the height of the
background image to the fixed height of your div, 209px. remove the
fixed height and replace with padding-bottom:15% this will kep the
aspect ratio of the div the same and scale the image as viewport gets
smaller."
You have background-size: cover which is fitting the height of the background image to the fixed height of your div, 209px.
remove the fixed height and replace with padding-bottom:15% this will kep the aspect ratio of the div the same and scale the image as viewport gets smaller.
I would suggest having the header image in your HTML rather than a background image and then setting a max-width like so:
#header img{
max-width: 100%;
height: auto;
}
This will also allow you to make the image "clickable" which is generally wanted in a header logo.
DEMO FIDDLE
FULLSCREEN
Have you used the a precentage to set the height of the image in the div?
So set the image height to be say 100% of the div?
If not then maybe you could use some javascript code to detect whether they are on a mobile device, and set the height of it accordingly?
The hard coded height value is messing you up. Try playing with the height: 290px value and watch the header fit properly on smaller screens.
Instead of a background image, you can try putting the image in the html and using a CSS property to help the content scale down on smaller screens.
img {
max-width: 100%;
}