Is there a way to make a HTML5 video (and the poster attribute) to act like a centered background cover?
I've created a dummy pen you can play around width:
http://codepen.io/SEFarstad/pen/vujqE
The layout is based on two 50% width sections, where the left one will contain the fixed video and the right one will containt the absolute positioned content.
The main problem is that my design needs to be split vertically, making horizontal videos an issue. Is there a way to make these horizontal videos full height in a vertically based layout it like this? -in the same manner as you use background-size: cover;
I know you can use background videos etc but I need this to have controls, posters and so on to meet some interactivity demands I have on this project.
I know this is an old question and you've probably moved on to other things, but I wanted to answer just in case anybody else stumbles on to this via Google. What you were looking for was object-fit, a way to add that kind of behavior to videos and images. Here's some info on it, but basically you just need to write it like this:
video {
... // other stuff here
object-fit: cover;
}
Sadly, you can't use this on every browser just yet. However, there's a polyfill you can look into.
Related
I have searched for this question, but I can't find a good solution, so maybe you guys can help me.
Link
If you look at this site, you can see that in each side (left/right), there is a banner. The width for these two are 160px each. the website is using the WHOLE screen at any givin time, but the ads are still 160px no matter what, and the game in the middle is the one shrinking to fit the screen, both vertically and horisontally.
How can I achieve this, and is it even possible to do in css alone? I've looked their code, but I can't really figure it out.
Banner provided by thirt pars (like AdSense) can't generally be resized for an obvoius reason: the advertiser provides, one or more images for the banner, possibly of different sizes; but that sizes are generally not intended to be "scalable" 'cause in that case the result might suck...
You can scale the container, of course, but you are asking about ADS...
I've got the page divided into different parts like header, footer and body. Now i need to set images on the background of header and footer. Should i choose a bigger image which can be re sized according to user's system dimension or should i keep it constant size?
How to keep an image withing the section that has been decided for it?
i'd create separate images for the smaller devices as the smaller file sizes will help when loading on tablet or mobile. Load in the different images using media queries
header-bg-desktop.jpg
header-bg-tablet.jpg
header-bg-mobile.jpg
I agree using separate images is beneficial for performance (especially on phones), though if you wanted to do this with CSS only, you can use background-size: cover, which will ensure the background image does not stretch, but also fills in the entire parent container.
E.G. http://jsfiddle.net/YNBw9/
You want to use background-size: cover to get the images to fill the containers at different size. You also want to use media queries, if possible, to deliver the right sized image to the right screens. That is, you don't want to overload a small screen with more pixels than it needs (not the screen, the bandwidth and load time) and you don't want to scale up a crappy image for larger screens.
http://plnkr.co/edit/bMryzPTGzUK6Y5BbDpWh?p=preview shows an example. Resize the right pane.
More on media queries:
https://www.google.com/search?q=media+queries
More on background-size:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
http://css-tricks.com/perfect-full-page-background-image/
It largely depends upon your website's target audience.
If you are going to target mobile, tablet and desktop all three user bases, then you must supply images for all of them with different background image code via CSS.
Here is a very good reference to get you started,
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
If you target desktop users only then you need to supply one-background image size and that should be enough.
Example code,
<style type="text/css">
body {
background-image:url('<%=request.getContextPath()%>/images/logo.jpg');
background-position: left top;
background-repeat: no-repeat;
}
</style>
I am trying to implement a full page background image as discussed here.
I am using the first method, the CSS3 technique. However, when I use background-size: cover like the author suggests, the image is "zoomed" in way farther than it needs to be and I don't understand why.
Is it a problem with the size of the image or do I have something else wrong?
Here is a link to the page.
achievable I want to see the entire tree, trunk and all. I've already tried setting the background-size to "100% auto" and the effect is the same. I've also already tried background-size to "contain" and now the image is too small.
No JavaScript solutions please. I know this achievable with just CSS.
UPDATE
Contain looks good on a desktop site, but it looks bad on a phone/table. Cover looks good on a phone/table but bad on a desktop. I guess I'll use the one that looks the best on each device?
UPDATE
I think I could use contain across the board, I would just have to resize the bg image to be thinner for smaller devices.
I believe we can suffice this requirement by using following two Solutions:
a. Use background-size:100% 100%; I am able to zoom image properly by using this Solution.
b. Use img tag with height and width as 100%
Change background-size: cover to background-size: contain
It looks perfect this way!
I am new to css.
I wanted to know which is the best standard technique to keep the page intact even when the browser size changes, the page is zoomed in or is used for any other screen size. I have tried centering my layout using a container but it gets disturbed when the page zooms in (i know it will, but all what I want is that the elements don't go out of the screen and if possible stay in almost the same position).
So what is the best and easy standard technique in css to achieve the
Thanks for your help.
The newest, cutting-edge method is called responsive web design. It's a bit complicated, but it's looking like the way to develop for multiple screen sizes. It is especially useful for small websites.
Check out some examples here: http://mediaqueri.es/
And some more in-depth information here: http://www.alistapart.com/articles/responsive-web-design/
If you set a set size for your body element anytime the browser is re-sized nothing within the page will change.
So the CSS you want to add is as follows:
body {
width: 960px; //being the size screen you want to accommodate your site to
}
Also this may help you: Commonly used pixel sizes for webpages and their pros/cons .
I would like to replicate the down arrow that appears next to a username on several sites such as Twitter.
I believe there are two ways of doing this: create a down arrow image and set it as some sort of background image, or use CSS to create the arrow. I believe Google uses the CSS approach for their top bar.
Which option is preferred and how would I go about doing it?
Twitter is using the ↓ html entity (appending it with css content property). In combination with an image sprite, see here: http://jsfiddle.net/HAZGr/
My advice would be to use an image, it keeps it simple and that way you know it will look the same on all browsers.
http://jqueryui.com/themeroller/
This is how I do it. JQuery is the holy grail of web design.
You can't do it directly with CSS (there are border hacks to create shapes that look like triangles, etc but I don't recommend them).
Instead an approach used now, by google, twitter, etc is to have an image that contains all the little icons, load that once, and offset the image using:
background-image: url("sprite-icons.png");
background-position: -176px -96px;
height: 14px;
width: 14px;