My image: http://path.com.my/v2/wp-content/uploads/2016/05/Home-Page-Banner-B.jpg
Website: http://path.com.my/v2/
Check 2nd slide
The slider image, no matter what resolution of images I put in, it will still 'zooming' in too much in the center and cut off too much details. Changing the the image aspect ratio doesn't seem to do any good either.
I have try to use background-size: cover, but it would leave blank spaces on the side, and doesn't do any good in different screen sizes too.
Any idea on how to best achieve this so I can put in my image with the least crop or zoom in?
Try the following:
.home #content .slide {
/*[...]*/
background-attachment: fixed;
background-size: 87%;
background-position: 250px 0;
}
Related
Good afternoon,
I'm new to webdesign.
I've added a background-image to my webpage.
I used the below CSS to achieve this:
body {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
max-width: 100%;
height: 100%;
background-image: url(link.jpg);
}
It is fine on desktop and tablet devices. However on mobile phones, not everything is showing.
I have a specific image for mobile devices, but I don't want to use it, because there is too much quality loss of pixels.
I want to use the same image, but it is not scaling down correctly.
I already tried adding a media query for mobile, with adding background-size: contain. Then the image is scaling down in the widht, but not the whole background is coverd. So that doesn't help either.
What can I do to fix this?
Thank you.
That's normal behaviour when using a landscape image on a portrait screen. The only thing you can do is, what you already tried. Add some media-queries for different screen resolutions, which adjust you image the way you thing it looks the best.
One idea for your case:
If you add a header and a footer to your website, it should be possible to show the background image exactly like you wish.
if you are ok with stretching image then you can use,
background-size: 100% 100%;
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)
I am having an issue getting my background image in my header to look right.
Right now, it is set to:
.hero {
background: url(http://wordstream-prod.s3.amazonaws.com/landing_pages/assets/img/e682443e-b4c0-483f-823e-8170fd4b71b2) no-repeat center center;
background-size: cover;
background-position: center;
}
Ive tried many variations of css to get it to work but cant figure it out. I would like the section to show the full image and keep showing it (not cut it off) as the browser shrinks. As of now, it is cutting on the top and bottom of the image until I shrink down and then it shows the whole thing. When I shrink further, it cuts off the sides.
When I switched the bg size to contain, I was left with a bunch of space around the image on small devices. Any help is appreciated.
Link: http://solatube.solabrite.com/premier-dealer
To do that, the aspect ratio of .hero needs to match that of the image. You can do this by applying a padding to the element with the percentage amount that represents the image aspect ratio. You can get that percentage by dividing the image height by it's width (500/1280 = 39.0625%).
Add this CSS
.hero {
height: 0;
padding-top: 39.0625%;
}
If you usebackground-size: cover, then the image will be scaled until it covers the whole available space.
Maybe try it with background-size: contain, then the image will be scaled until it covers either the x or y dimension of the available space.
BUT: If your image has the same aspect ratio as the area it is trying to cover, neither of this should be a problem though.
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;
}
Forgive my severe lack of knowledge here and I apologize if I'm not referring to things correctly. I'm working on a site in Weebly and I'm having trouble with the logo. The image I uploaded is huge and the box for it is only 525px by 200px. With the below information in CSS I get only the top corner of my logo. How can I make the image adjust to the size of the box? Thank you.
#logo{
float: left;
background: transparent url(logotransparent.png)no-repeat;
width: 525px;
height: 200px;
}
You have 2 posibilities:
background-size: cover;
or
background-size: contain;
The first one will cover all the area, cutting some part of the image.
The second one will make the image as large as posible without cutting the image
Both will keep the aspect ratio of the image.