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.
Related
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/
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)
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;
}
I have the following HTML code:
<header id="header">
<h1><span id="titlu-pagina">Watercolors</span></h1>
<ul>
<li>About Me</li>
<li>Where To Find Me</li>
<li>The Blog</li>
</ul>
</header>
and the respective CSS one:
#header {
height: 800px;
text-align: center;
border-bottom: 1px solid black;
background-color: #734C8F;
background-image: url('10.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
}
I am trying to set up an image as a background for the header but for some reason the image is not displayed in its full size. I've tried low res images and still, some parts are cut from it. If I resize the browser the image scales and in the end it gets to its full size.
If I change the code to
background-image: url('10.jpg') no-repeat center center fixed;
the image doesn't display at all. What am I doing wrong? I've tried the code in all browser but the result is the same.
Looks like this is/was simply a misunderstanding on your end, of what background-size: cover actually does.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size:
[cover] scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
(“When the image and container have different dimensions” should rather be “have different aspect ratios” – because if they had not different dimensions, but width and height of image and element would be exactly the same, then we would not need to apply background-size in the first place.)
If you want the image to get “squished” instead of clipped – then use background-size: 100% 100%.
Can I ask you when is generally recommended to use the 100% 100% background-size and when it would be better to use :cover? It's not very clear to me how are they doing two different things in terms of covering the container.
background-size: 100% 100% means, stretch the image in both dimensions to 100% of the respective container dimension. If the aspect ratio of the image and the element don’t match, the image will be distorted/squished.
cover however is intended to scale the image to be as large as possible, while keeping it’s aspect ratio.
Think of it like watching a movie on your TV screen. Cinema aspect ratio and TV aspect ratio usually differ (or at least used to, with older TVs.) Now usually you’d want to see all of what is going on in the picture, and not miss anything that happens “on the sides” of the it. Therefor the movie is scaled in a way that it covers the whole width (or height) of the screen, and you get black bars on the top and the bottom (or left/right) – thereby the aspect ratio of the movie is kept – because you would not want to watch a movie distorted, that just looks weird when car tires are ovals and the people have unnaturally wide or long faces.
That analogy make things clearer …?
To make your background-image resize without cropping it must be proportionate to the parent, or header. If your header has a 16:9 ratio then so must your image. They need to resize together. But this seems more tricky than it needs to be.
The alternative would be to use the following structure;
<header>
<img />
<nav></nav>
</header>
The image sits inside the header. The nav (which sits on top of the image) is absolutely positioned relative to the header.
This may need some further media-queries to manage font-sizes and nav list items for smaller screens.
JS Fiddle
#header {
text-align: center;
border-bottom: 1px solid black;
background-color: #734C8F;
background-image: url('10.jpg');
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
width:100%
min-height: 100vh;
}
I have add 2 lines of code to your header section by this you can able to solve your problem
Bro instead of using background-image: url ('x') no-repeat center center fixed; in you above alternate i suggest you this is the format.. background:url ('x') no-repeat center center fixed; because the background short hand property in css is what i suggest in my message.. thk you bye frnds
I have a background image that I want to be fixed on larger screens and scroll on smaller devices.
This works great...
#main_page {
height: 100%;
min-height: 100%;
background-image:url('url');
background-position: 50% 50%;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
however I want to be able to use...
#media (max-width: 991px) {
#main_page { background-attachment:scroll; }
}
Using the background-attachment:scroll seems to kill background-size:cover and show it at it's full size (even bigger I think). When I test background-attachment: scroll; in the first set of CSS it does the same thing.
This exact thing seems to work on this site.... http://www.julytalk.com/ what am I missing?
I think I see what you mean. In the event that #main_page extends below the bottom of the viewport (I saw no problems here when it did not), the background image seems to inexplicably jump in size as soon as the media query breakpoint is reached and the background-attachment changes.
There's actually a good reason for this, and it relates primarily to your use of background-size: cover. While the style for #main_page is background-attachment: fixed, the area that this background needs to cover is only the size of the viewport, since the background never changes position relative to it.
However, once you cross that media query breakpoint and the style for #main_page changes to background-attachment: scroll, this area suddenly changes. Since the background now moves relative to the viewport, any part of #main_page that extends below the viewport needs to be covered as well. To account for this new area to cover, the background image instantly scales, resulting in this jump in size. (Exhibited in this JSFiddle.)
The site you linked to uses effectively similar styles to you, but ensures that their counterpart of #main_page never extends more than 100% of the viewport. For example, this JSFiddle uses your CSS to achieve a similar effect to them (no image size jump), since #main_page doesn't contain any content that would force it to exceed 100% of the viewport height.
Hope this helps! Let me know if you have any questions.