I am trying to find a way to hide the black strips across the top and bottom of a vimeo video. I thought there might be a way to cover them up with CSS.
I basically wanted to achieve what this person wanted to achieve with an image in the link below except I want to do it with an embedded video whilst keeping it repsonsive.
Removing black borders 4:3 on youtube thumbnails
Many thanks.
HTML
<section class="d5-d13 c5-c13 b5-b13 a5-a13 video">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/69252713' frameborder='0'
webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</section>
CSS
.embed-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
For your use case, I don't think you'll be able to use just css.
Usually we add letterboxing or pillar boxing around video iframes to keep the height and width at a certain ratio for presentation. But in that case, the black borders would just be as simple as a css background.
To keep things responsive, you would set the height to something like zero (like you have) and use the padding hack to keep the aspect ratio of the video (in this case a 16:9 video; 9/16 * 100 = 56.25%). That number would be either your padding-top or padding bottom value. Since the padding is measured with percent, this scales the padding in relation to the width keeping the correct ratio no matter what width you size the video to.
In your case, this video actually has the letterboxing in the actual video which you can see from the source of the video tag within the iframe. I'm not sure why you have the padding-top:30 but that makes the black borders even bigger. You'll need to hack your situation even more though because of the built in letterboxing. I put together a jsfiddle demo here which includes a few comments but it uses JS to achieve what you're looking for.
The concept for the code is as follows:
You want the outer container to crop off the bottom and top of the
video. Assuming you wanted the video to be responsive, and be cropped, you need to always have the actual video be larger than the outer container which masks it.
The video should be moved up in relation to how wide the video is vs the thickness of the top border
You'll want to shrink the height of the outer container a bit to compensate for the negative top margin yet still hide the bottom portion of the video
Personally I don't like doing expensive DOM operations on resize which maybe is the reason you asked for solely css but FWIW, you have the demo.
Ideally your best option would be to get the video re-recorded without the letterboxing so all you would need is the padding hack.
Cut the 1px off all edges with CSS:
.embed-container {
position: relative;
padding-bottom: 43%; /* Aspect ratio of the video */
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe,
.embed-container object,
.embed-container embed {
position: absolute;
top: -1px;
left: -1px;
width: calc(100% + 2px);
height: calc(100% + 2px);
}
HTML:
<div class="js-video [vimeo, widescreen]">
[video html goes here]
</div>
CSS:
.js-video {
height: 0;
padding-top: 25px;
padding-bottom: 67.5%;
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.js-video.widescreen {
padding-bottom: 57.25%;
}
.js-video.vimeo {
padding-top: 0;
}
.js-video embed, .js-video iframe, .js-video object, .js-video video {
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
You will find more details here
I had this same issue and the problem was simple to solve. My videos were embedded in Wordpress pages and posts using oEmbed. Wordpress was wrapping my embedded videos in <p> tags, the <p> tags had some margin which was causing black borders on the top and bottom of my videos. I used the following bit of jQuery to remove the <p> tags from my embedded videos:
$('.embed-container iframe').unwrap();
I solved this problem by removing padding-top in .embed-container
padding-bottom: 56.25%; will set screen ratio to 16:9 and remove the black bar in top and bottom.
padding top here will add extra black bar area back.
I created a solution for this exact problem using a portion of this github post. Removing Black Bars. It doesn't change vimeo's background color but merely hides it from the viewport.
https://github.com/davatron5000/FitVids.js/issues/130
#myid {
height: 112.6%;
}
However, If you add a width using CSS "vw"(viewport width) it will size consistently on any monitor/device without showing the black background. I added a margin so that the iframe will stay centered in the div once the width is shorter.
#myvimeoiframeID {
height: 112%;
width: 80vw;
margin: 0 15% auto;
}
In my parent container that holds the video, I added:
.embed-container {
padding-bottom: 40.25%;
}
This seems to make sure the video shows in the div. When I removed this section the video disappears but you can still here it play. So there is something that is pretty awesome with the padding-bottom: 40.25%;
I changed the vimeo embedded iframe code to have a height="100%".
So you can add a height to the iframe or you can do it in css. In order to control the height by css, I kept the base height in the iframe at 100% and any adjustments to that base height is through the css.
Simply put frameborder="0" as one of your attributes.
I just solved this -
The video container was built with a video-captions-container DIV which was a black transparent bar.
I need to center images that will be wider than the parent div that contains them. the parent div is a fixed width and has the overflow set to hidden.
<div style='overflow:hidden; width:75px height:100px;'>
<img src='image.jpg' style='height:100px;' />
</div>
I must use an image as the child element because I need to resize the thumbnail dimensions and cannot rely on background-size since it is not supported on older versions of mobile safari which is a requirement. I also cannot use javascript for this, so it must be a css solution.
One more thing to note is that widths will vary between images, so I can't just use absolute positioning on the child element at a hard-coded offset.
Is this possible?
UPDATE:
for posterity, I've just found out that this can be accomplished on the older versions of mobile safari by using
-webkit-background-size:auto 100px;
of course, the background will be set as usual using 50% for left positioning. If you need this to work on another browser, the accepted solution is probably the best, but since this question was related to the iphone, this solution is a little cleaner.
How adverse are you to extra markup? Also, is there a max size for the images? For example, if your max image width is 225px then you could try:
<div class="frame">
<div>
<img src="image.jpg"/>
</div>
</div>
.frame {
overflow: hidden;
width: 75px;
height: 100px;
position: relative;
}
.frame > div {
position: absolute;
left: -5075px;
width: 10225px;
text-align: center;
}
.frame img {
height: 100px;
display: inline-block;
}
A fiddle example here: http://jsfiddle.net/brettwp/bW4xD/
Wouldn't using a background image still work? You shouldn't need to resize it.
Does something like this make sense? http://jsfiddle.net/QHRHP/44/
.container{
margin:0 auto;
width:400px;
border:2px solid #000;
height:250px;
background:url(http://placekitten.com/800/250) center top no-repeat;
}
Well if you know the width of the div and the width of the image, you can simply do some math.
Let's say the div is width 200px and the image is width 300px:
div.whatever {
width: 200px;
}
img.someImg {
left: -50px;
position: relative;
}
We know that since the width of the div is 200 pixes, then 100 pixels will be cropped from the image. If you want to center the image, then 50 pixels be hidden past the boundaries of the div on either side. Thus, we set the left position of the image to -50px.
Example (knowing the image size): http://jsfiddle.net/7YJCD/4/
Does that make sense?
If you don't know the image size or the div size, you can use javascript to detect these values and do the same thing.
Example (not knowing the image size, using jQuery javascript): http://jsfiddle.net/K2Rkg/1/
Just for reference, here's the original image.
I have a footer div with 100% width. It's about 50px high, depending on its content.
Is it possible to give that #footer a background image that kind of overflows this div?
The image is about 800x600px, and I want it to be positioned in the left bottom corner of the footer. It should work sort of like a background image for my website, but I've already set a background image on my body. I need another image positioned at the bottom left corner of my website and the #footer div would be perfect for that.
#footer {
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
background:#eee url(images/bodybgbottomleft.png) no-repeat left bottom fixed;
}
The image is set to the footer, however it doesn't overflow the div. Is it possible to make that happen?
overflow:visible doesn't do the job!
There is a very easy trick. Set padding of that div to a positive number and margin to negative
#wrapper {
background: url(xxx.jpeg);
padding-left: 10px;
margin-left: -10px;
}
I do not believe that you can make a background image overflow its div. Images placed in Image tags can overflow their parent div, but background images are limited by the div for which they are the background.
You can use a css3 psuedo element (:before and/or :after) as shown in this article
https://www.exratione.com/2011/09/how-to-overflow-a-background-image-using-css3/
Good Luck...
No, you can't.
But as a solid workaround, I would suggest to classify that first div as position:relative and use div::before to create an underlying element containing your image. Classified as position:absolute you can move it anywhere relative to your initial div.
Don't forget to add content to that new element. Here's some example:
div {
position: relative;
}
div::before {
content: ""; /* empty but necessary */
position: absolute;
background: ...
}
Note: if you want it to be 'on top' of the parent div, use div::after instead.
Using background-size cover worked for me.
#footer {
background-color: #eee;
background-image: url(images/bodybgbottomleft.png);
background-repeat: no-repeat;
background-size: cover;
clear: both;
width: 100%;
margin: 0;
padding: 30px 0 0;
}
Obviously be aware of support issues, check Can I Use: http://caniuse.com/#search=background-size
Use trasform: scale(1.1) property to make bg image bigger, move it up with position: relative; top: -10px;
<div class="home-hero">
<div class="home-hero__img"></div>
</div>
.home-hero__img{
position:relative;
top:-10px;
transform: scale(1.1);
background: {
size: contain;
image: url('image.svg');
}
}
You mention already having a background image on body.
You could set that background image on html, and the new one on body. This will of course depend upon your layout, but you wouldn't need to use your footer for it.
Not really - the background image is bounded by the element it's applied to, and the overflow properties only apply to the content (i.e. markup) within an element.
You can add another div into your footer div and apply the background image to that, though, and have that overflow instead.
This could help.
It requires the footer height to be a fixed number. Basically, you have a div inside the footer div with it's normal content, with position: absolute, and then the image with position: relative, a negative z-index so it stays "below" everything, and a negative top value of the footer's height minus the image height (in my example, 50px - 600px = -550px). Tested in Chrome 8, FireFox 3.6 and IE 9.
How do I get a div to automatically adjust to the size of the background I set for it without setting a specific height (or min-height) for it?
There is a very nice and cool way to make a background image work like an img element so it adjust its height automatically. You need to know the image width and height ratio. Set the height of the container to 0 and set the padding-top as percentage based upon the image ratio.
It will look like the following:
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
You just got a background image with auto height which will work just like an img element. Here is a working prototype (you can resize and check the div height): http://jsfiddle.net/8m9ur5qj/
Another, perhaps inefficient, solution would be to include the image under an img element set to visibility: hidden;. Then make the background-image of the surrounding div the same as the image.
This will set the surrounding div to the size of the image in the img element but display it as a background.
<div style="background-image: url(http://your-image.jpg);">
<img src="http://your-image.jpg" style="visibility: hidden;" />
</div>
There is no way to auto adjust for background image size using CSS.
You can hack around it by measuring the background image on the server and then applying those attributes to the div, as others have mentioned.
You could also hack up some javascript to resize the div based on the image size (once the image has been downloaded) - this is basically the same thing.
If you need your div to auto-fit the image, I might ask why don't you just put an <img> tag inside your div?
This answer is similar to others, but is overall the best for most applications. You need to know the image size before hand which you usually do. This will let you add overlay text, titles etc. with no negative padding or absolute positioning of the image. They key is to set the padding % to match the image aspect ratio as seen in the example below. I used this answer and essentially just added an image background.
.wrapper {
width: 100%;
/* whatever width you want */
display: inline-block;
position: relative;
background-size: contain;
background: url('https://upload.wikimedia.org/wikipedia/en/thumb/6/67/Wiki-llama.jpg/1600px-Wiki-llama.jpg') top center no-repeat;
margin: 0 auto;
}
.wrapper:after {
padding-top: 75%;
/* this llama image is 800x600 so set the padding top % to match 600/800 = .75 */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
color: black;
text-align: center;
margin-top: 5%;
}
<div class="wrapper">
<div class="main">
This is where your overlay content goes, titles, text, buttons, etc.
</div>
</div>
I looked at some of the solutions and they're great but I think I found a surprisingly easy way.
First, we need to get the ratio from the background image. We simply divide one dimension through another. Then we get something like for example 66.4%
When we have image ratio we can simply calculate the height of the div by multiplying the ratio by viewport width:
height: calc(0.664 * 100vw);
To me, it works, sets div height properly and changes it when the window is resized.
Maybe this can help, it's not exactly a background, but you get the idea:
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://antwrp.gsfc.nasa.gov/apod/image/0903/omegacen_davis.jpg" />
<div>Hi there</div>
</div>
Pretty sure this will never been seen all the way down here. But if your problem was the same as mine, this was my solution:
.imaged-container{
background-image:url('<%= asset_path("landing-page.png") %> ');
background-repeat: no-repeat;
background-size: 100%;
height: 65vw;
}
I wanted to have a div in the center of the image, and this will allow me of that.
There is a pure CSS solution that the other answers have missed.
The "content:" property is mostly used to insert text content into an element, but can also be used to insert image content.
.my-div:before {
content: url("image.png");
}
This will cause the div to resize its height to the actual pixel size of the image. To resize the width too, add:
.my-div {
display: inline-block;
}
The recently introduced CSS aspect-ratio attribute (~2020-2021) is a great way to do this without padding hacks and is supported on all evergreen browsers.
Since we need to know the aspect ratio of the image ahead of time, and in many usecases you'll be able to predetermine the image dimension ratio ahead of time (but not always for user generated content), you can either hardcode a single style or inline the css when necessary.
aspect-ratio will calculate the height when the width is specified, based on the provided ratio (or calculate width, if the height is specified).
div {
aspect-ratio: 3 / 2; /*common ratio, like an 800*600px image */
width: 200px; /* computed height will be 133.33px, which is width/aspect-ratio */
background: red; /* so any image bleed is shown*/
background-image: url('https://images.unsplash.com/photo-1631163190830-8770a0ad4aa9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80');
}
<div></div>
You can do it server side: by measuring the image and then setting the div size, OR loading the image with JS, read it's attributes and then set the DIV size.
And here is an idea, put the same image inside the div as an IMG tag, but give it visibility: hidden + play with position relative+ give this div the image as background.
I had this issue and found Hasanavi's answer but I got a little bug when displaying the background image on a wide screen - The background image didn't spread to the whole width of the screen.
So here is my solution - based on Hasanavi's code but better... and this should work on both extra-wide and mobile screens.
/*WIDE SCREEN SUPPORT*/
#media screen and (min-width: 769px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: cover;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
/*MOBILE SUPPORT*/
#media screen and (max-width: 768px) {
div {
background-image: url('http://www.pets4homes.co.uk/images/articles/1111/large/feline-influenza-all-about-cat-flu-5239fffd61ddf.jpg');
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 0;
padding-top: 66.64%; /* (img-height / img-width * container-width) */
/* (853 / 1280 * 100) */
}
}
As you might have noticed, the background-size: contain; property doas not fit well in extra wide screens, and the background-size: cover; property does not fit well on mobile screens so I used this #media attribute to play around with the screen sizes and fix this issue.
This Worked For Me:
background-image: url("/assets/image_complete_path");
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover;
height: 100%;
If it is a single predetermined background image and you want the div to to be responsive without distorting the aspect ratio of the background image you can first calculate the aspect ratio of the image and then create a div which preserves it's aspect ratio by doing the following:
Say you want an aspect ratio of 4/1 and the width of the div is 32%:
div {
width: 32%;
padding-bottom: 8%;
}
This results from the fact that padding is calculated based on the width of the containing element.
Adding to the original accepted answer just add style width:100%; to the inner image so it will auto-shrink/expand for mobile devices and wont end up taking large top or bottom margins in mobile view.
<div style="background-image: url(http://your-image.jpg);background-position:center;background-repeat:no-repeat;background-size: contain;height: auto;">
<img src="http://your-image.jpg" style="visibility: hidden; width: 100%;" />
</div>
How about this :)
.fixed-centered-covers-entire-page{
margin:auto;
background-image: url('https://i.imgur.com/Ljd0YBi.jpg');
background-repeat: no-repeat;background-size:cover;
background-position: 50%;
background-color: #fff;
left:0;
right:0;
top:0;
bottom:0;
z-index:-1;
position:fixed;
}
<div class="fixed-centered-covers-entire-page"></div>
Demo: http://jsfiddle.net/josephmcasey/KhPaF/
I would do the reverse and place the image inside of the main div with a width of 100%, which will make both the div and image responsive to screen size,
Then add the content within an absolute positioned div with width and height of 100% inside of the main div.
<div class="main" style="position: relative; width: 100%;">
<img src="your_image.png" style="width: 100%;">
<div style="position: absolute; width: 100%; height: 100%; display: flex...">
YOUR CONTENT
</div>
</div>
May be this can help, it's not exactly a background, but you get the simple idea
<style>
div {
float: left;
position: relative;
}
div img {
position: relative;
}
div div {
position: absolute;
top:0;
left:0;
}
</style>
<div>
<img src="http://www.planwallpaper.com/static/images/recycled_texture_background_by_sandeep_m-d6aeau9_PZ9chud.jpg" />
<div>Hello</div>
</div>
You can do something like that
<div style="background-image: url(http://your-image.jpg); position:relative;">
<img src="http://your-image.jpg" style="opacity: 0;" />
<div style="position: absolute;top: 0;width: 100%;height: 100%;">my content goes here</div>
</div>
If you know the ratio of the image at build time, want the height based off of the window height and you're ok targeting modern browsers (IE9+), then you can use viewport units for this:
.width-ratio-of-height {
overflow-x: scroll;
height: 100vh;
width: 500vh; /* width here is 5x height */
background-image: url("http://placehold.it/5000x1000");
background-size: cover;
}
Not quite what the OP was asking, but probably a good fit for a lot of those viewing this question, so wanted to give another option here.
Fiddle: https://jsfiddle.net/6Lkzdnge/
Suppose you have some thing like this:
<div class="content">
... // inner HTML
</div>
and you want add a background to it, but you do not know the dimension of the image.
I had a similar problem, and I solved it by using grid:
HTML
<div class="outer">
<div class="content">
... // inner HTML
</div>
<img class="background" />
</div>
CSS
.outer{
display: grid;
grid-template: auto / auto;
// or you can assign a name for this block
}
.content{
grid-area: 1 / 1 / 2 / 2;
z-index: 2;
}
.background{
grid-area: 1 / 1 / 2 / 2;
z-index: 1;
}
z-index is just for placing image actually at the background, you can of course place img.background above the div.content.
NOTE: it might cause the div.content has same height of the picture, so if div.content have any children that placed according to its height, you might want set a number not something like 'auto'.
inspired by the most liked answer, I ended up coming up with a solution using min-height and 'vw' unit
I had an image in a very unusual proportion
through experimentation I ended up using
min-height: 36vw;
that value must change, according to the ratio of your image
css code used im my actual page:
background:url('your-background-image-adress') center center no-repeat;
background-size: 100%;
background-position: top center;
margin-top: 50px;
width: 100%;
min-height: 36vw;
code pen example https://codepen.io/viniciusrad/pen/GRNPXoL
Had this issue with the Umbraco CMS and in this scenario you can add the image to the div using something like this for the 'style' attribute of the div:
style="background: url('#(image.mediaItem.Image.umbracoFile)') no-repeat scroll 0 0 transparent; height: #(image.mediaItem.Image.umbracoHeight)px"
I have been dealing with this issue for a while and decided to write a jquery plugin to solve this problem.
This plugin will find all the elements with class "show-bg" (or you can pass it your own selector) and calculate their background image dimensions.
all you have to do is include this code, mark the desired elements with class="show
Enjoy!
https://bitbucket.org/tomeralmog/jquery.heightfrombg
The best solution i can think of is by specifying your width and height in percent . This will allow you to rezise your screen based on your monitor size. its more of responsive layout..
For an instance.
you have
<br/>
<div> . //This you set the width percent to %100
<div> //This you set the width percent to any amount . if you put it by 50% , it will be half
</div>
</div>
This is the best option if you would want a responsive layout, i wouldnt recommend float , in certain cases float is okay to use. but in most cases , we avoid using float as it will affect a quite of number of things when you are doing cross-browser testing.
Hope this helps :)
actually it's quite easy when you know how to do it:
<section data-speed='.618' data-type='background' style='background: url(someUrl)
top center no-repeat fixed; width: 100%; height: 40vw;'>
<div style='width: 100%; height: 40vw;'>
</div>
</section>
the trick is just to set the enclosed div just as a normal div with dimensional values same as the background dimensional values (in this example, 100% and 40vw).
I solved this using jQuery. Until new CSS rules allow for this type of behavior natively I find it is the best way to do it.
Setup your divs
Below you have your div that you want the background to appear on ("hero") and then the inner content/text you want to overlay on top of your background image ("inner"). You can (and should) move the inline styles to your hero class. I left them here so it's quick and easy to see what styles are applied to it.
<div class="hero" style="background-image: url('your-image.png'); background-size: 100%; background-repeat: no-repeat; width: 100%;">
<div class="inner">overlay content</div>
</div>
Calculate image aspect ratio
Next calculate your aspect ratio for your image by dividing the height of your image by the width. For example, if your image height is 660 and your width is 1280 your aspect ratio is 0.5156.
Setup a jQuery window resize event to adjust height
Finally, add a jQuery event listener for window resize and then calculate your hero div's height based off of the aspect ratio and update it. This solution typically leaves an extra pixel at the bottom due to imperfect calculations using the aspect ratio so we add a -1 to the resulting size.
$(window).on("resize", function ()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
Ensure it works on page load
You should perform the resize call above when the page loads to have the image sizes calculated at the outset. If you don't, then the hero div won't adjust until you resize the window. I setup a separate function to do the resize adjustments. Here's the full code I use.
function updateHeroDiv()
{
var aspect_ratio = .5156; /* or whatever yours is */
var new_hero_height = ($(window).width()*aspect_ratio) - 1;
$(".hero").height(new_hero_height);
}
$(document).ready(function()
{
// calls the function on page load
updateHeroDiv();
// calls the function on window resize
$(window).on("resize", function ()
{
updateHeroDiv();
}
});
If you can make an image on Photoshop where the main layer has an opacity of 1 or so and is basically transparent, put that img in the div and then make the real picture the background image. THEN set the opacity of the img to 1 and add the size dimensions you want.
That picture is done that way, and you can't even drag the invisible image off the page which is cool.
just add to div
style="overflow:hidden;"