Can't get background center on top, nor fullscreen - css

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%;
}

Related

Woocommerce Aspect Ration and whitespace

I’m working on setting up a site and I have images that are all different sizes as they are different ad sizes i.e. 300×600, 728×90, 320×50 etc. On this page. you’ll see it briefly shows the full image the appropriate size (i.e. you can see the shrunk image), but then it zooms to fit the crop size and some images disappear completely.
I have tried changing the sizes, the hard cropping, and regenning thumbnails each time and I cannot get them to look correct. How do we do it?
https://fullforceads.com/product-category/ads/static-ads/series1s/
When the page first draws I see them with enough space but then it zooms in on each thumbnail, but I cannot see what's causing it. I looked in the developers' tool, but think I'm missing something basic. I looked for a plugin that would add whitespace above and below, but couldn't find anything.
Your CSS is the issue here. I inspected your images and I found this:
.products .product .thumb-image, .products .product .hover-image {
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
top: 0;
left: 0;
}
The background-size: cover; is the issue here because it tries to scale the image up so it fills the entire space. If you change that setting to contain, the image will only be as large as possible without cropping:
.products .product .thumb-image, .products .product .hover-image {
background-position: center top;
background-size: contain;
background-repeat: no-repeat;
top: 0;
left: 0;
}
The reason why the image is first displayed normally and then scales up is the following: if your webserver is slow or your CSS file is very large or if the CSS is loaded badly, it takes time for the CSS rules to take effect. That results in having the images displayed normally at first, then the CSS kicks in and the image is scaled up. Changing your CSS as I described should fix this.
I don't know your setup, but you might need to insert that CSS either in the theme settings or create a child theme, depending on the theme.

Stop responsive background-image from reducing at certain point

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;
}
}

background-attachment:scroll and background-size:cover not working

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.

CSS Background cover that maintains aspect ratio but will always fill full width and height (and create scrollbars for overflow)

This is a particularly strange request, but the client won't budge.
I've almost got what I need currently with:
#main_content, .slide {position: relative; min-width: 1200px;}
.slide_layer {position: absolute; height: 100%; width: 100%; top:0; left: 0; min-width: 1200px; padding-bottom: 18px;}
.slide_layer img { width: 100%; }
Problem is, if my browser window is longer than it is wide, I end up with empty space below the image. What the client wants is for the image to fill all available height if there is room and create horizontal scrollbars as needed (rather than crop).
The solution I'm thinking of doing is just detecting browser window and stretching the .slide_layer img to fill height via javascript. But this feels crappy and sloppy. Is there a better way?
To make matters worse, backward compatibility is required back to IE7.
Thanks!
This doesn't necessarily help you with the horizontal-overflow request from your client, but you could rebuild your slides to use a background image, instead of an image within it.
You can then use the CSS3 background-size, set to 'cover':
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
This means that the background image will stretch out - whilst maintaining the correct dimensions - to fill the parent. So, unless your slide is exactly the same dimensions as the image, you'll either have a little off the top/bottom, or left/right cut off from view, but it will always stretch to cover the entire background.
This is a CSS3 property, so won't work back to IE7 without a little help. Fortunately, CSS3 PIE can help you out there to get support all the way back to those older versions of Internet Explorer.

Spanning an image acrosss the browser like in facebook banner but now an image

I was wondering how i can make an image across the browser such that even though, my website is viewed in a larger monitor, the image will still span out and extend without showing a white space at the end.
You basically have two choices:
Use a repeating pattern that fills the entire width: you can do this using
width: 100%; background: url(your-image-file) repeat-x
Use a fixed main image and a background filler image that fills the remaining area: the background would use the same code as above and the main image could be an img within the background container.
Well, to start, lets clear your margins with this code.
* {
margin: 0;
padding: 0;
}
By using this in your style sheet or section, it will allow for those images to stretch all the way with no white space.
Next, you'll want to create an image that doesn't look skewed. To do this you will need to create it in a fairly wide format to begin with. If you are looking to fill the entire background, I would suggest 1028X768 px as a good size.
Finally, it's time to place the last bit of code and get it all working.
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
This will work with dang near all current browsers (except IE8 and below).
In order to place an odd size image that you want to span but not entirely cover, I would suggest using a <div> to create a place for the image and add a style to the <div> that says width: 100%;.
This can be done with height as well.
Hope this helps.

Resources