I have a background-image which I made responsive by adding background-size: 80%; to my CSS code. When I minimise the browser window it works to a certain extent, the thing is: I want the background-image to stop reducing at a certain point, as the other elements on my site do. But it reduces infinitely. To illustrate what I mean, check it up on my website: http://www.filmfutter.com/forum/
It's the white image at the top.
Currently the CSS code looks like that:
background-image: url(../images/blueTemptation/blueTemptationHeader.png);
background-size: 80%;
background-repeat: no-repeat;
background-position: top center;
You might add a media query breakpoint at that specific point. The given pixel value are approximate.
#media only screen and (max-width: 1140px) {
body {
background-size: 897px;
}
}
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 background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.
code
div#photo_break {
#include viewport-unit(height, 28vw);
background-image: url('<img>');
background-repeat: no-repeat;
background-size: 100% auto;
-webkit-background-size: 100% auto;
-moz-background-size: 100% auto;
-o-background-size: 100% auto;
background-position: center top;
background-attachment: fixed;
z-index: 99999;
}
website
As you can see in this picture, in Chromes simulatorthe picture is shown.
The size of the image is not really large, or is it?
Nice site. :D Let's try to solve your issue.
Make sure you do not have that CSS code inside any media query, since it might block that content.
You might also try to add a new media query with the same CSS you have just for mobile, like this #media (min-width: 481px) { }.
Clean your mobile browser's cache before loading the site again.
Your background image is 12,000 pixels wide. It takes a long time to load to, I would suggest making the background of a parent div black inside the header, then putting an image in of just the person as the background of the element within that container if that makes sense. Save your mobile users data!
mobileand tablet browsersdo not support background-attachment: fixed.
changing this, solved the problem
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 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.
What I want is for the background video to fit the screen lengthwise(y) and crop sides widthwise(x) when less than the ratio. As it is now, when someone is looking at in in a long skinny browser, half the video gets cut off on the right rather than both sides being shrunk and centered on the middle. Alternatively I would like the whole thing to stretch in every direction and fit the browser, but I've also searched every page about that and none of the commands seem to work... I dunno maybe less has a new command, but I can't find it...
I am editing the .less file to accomplish what I need and almost all of the css commands seem to work except the one I need or at least, not anywhere I've tried putting it... still not sure what the difference between css and less is aside from newer/better. Here's what I have, it's the best I've found so far. it shrinks to the middle at least when it gets small:
// Background
#rt-top-surround {
position: relative;
video {
position: fixed;
width: auto;
height: 100%;
min-width: 100%;
-webkit-background-size: cover; }
-moz-background-size: cover; } these do nothing at all
-o-background-size: cover; } neither does background-size: 100%;
background-size: cover; }
.backface-visibility(hidden);
}
No matter what I do I can't stop it from preserving the aspect ratio. Any help for either full screen or centering the background video will do. Thanks in advance
-Scott
(I have only been teaching myself how to program websites over the last 2 days so I may not understand everything you say. Please keep that in mind. However, I did program and re-write a site from a template since then and I have been through every single file on ftp and read through the css just to learn what I can. I actually know a pretty decent amount)
You starters your CSS is invalid, #rt-top-surround isn't closed off so anything under that is broken.
// Background
#rt-top-surround {
position: relative;
} /* <------ here! */
As for background-size, this only applies to background-image not a video element. You can simply set width to whatever you want and because height:auto is applies be default it was scale with aspect ratio.
jsFiddle
HTML
<video>
<source src="http://www.quirksmode.org/html5//videos/big_buck_bunny.mp4" type="video/mp4"></source>
</video>
CSS
video {
width:100%;
}