I'm trying to "embed" a video in an image (in this case a video in a laptop graphic). I've set the image as bg and with padding I place the video in the "screen" area. Since this must be responsive, percentage-based paddings are in use.
.media > video {
background-image: url(...);
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
padding: 5% 15% 12%;
max-width: 100%;
}
http://codepen.io/jerivas/pen/jqoVYj?editors=1100
It all works great... except in Safari. For some reason the video has a black border (sometimes all around, other times it's left/right or bottom/top). The video needs to blend seamlessly with the laptop, and this breaks the effect.
I have already trying recalculating padding, width, and height values with JS to only use integer px units, but the problem persists (this part is not in the pen).
Related
Current situation: I'm using bootstrap and I have 2 columns next to each other. When I scale the browser window, the image scales with it.
Section on a large display
Section on a smaller screen
The problem: The image that I'm working on is responsively scaling when I scale my browser window.
What I want: Make sure that the image stays full height with the div and crop from the left side.
At its its simplest you can display the image as a background and use the various properties to make sure it stays anchored to the right, with full height and therefore gets cropped from the left as the window decreases in size.
.image {
width: 50vw;
height: 50vh;
background-image: url(https://i.stack.imgur.com/SepTG.png);
background-size: auto 100%;
background-position: right center;
background-repeat: no-repeat no-repeat;
}
<div class="image"></div>
Note: for more modern browsers you could consider an img element and object-fit instead, but this does not work on Internet Explorer.
I have the following website:
www.thewhozoo.com
When viewed from a screen with a width of more than 1240px, it displays the images side by side. With a screen below 1240px (e.g. mobile phone), it displays the images beneath each other. This is achieved using:
#media only screen and (max-width: 1240px) {
This all works fine.
My problem however is with the background image:
.top-container {
float: left;
width: 100%;
background: linear-gradient( rgba(0,0,0,0.1), rgba(0, 0, 0, 0.1) ),url('../images/background1.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
When the browser is wide enough (e.g. 930px here), it displays:
But with a narrower browser (e.g. 480px here) or a mobile device, it displays:
As you can see, in the image, the background work "WORK" gets chopped off in the second screen.
Question
Is it possible in css, to set a minimum width, so that the word "WORK" will always be visible, no matter the size of the browser?
This will give smaller browsers the effect as if they are viewing the page from further away (zoomed out).
Thank you.
The background-size: cover setting makes sure the whole element is always filled by the background images. In your case, the mobile version displays the complete height of the image and centers it horizontally, this way cutting something off at the left and right. If you would display it smaller (which would be necessary to see the whole word "work"), the height would shrink too, and the image wouldn't fill the window anymore.
You can try background-size: contain instead, which will always display the whole image, but will leave empty space on either top and bottom or left and right, depending on the orientation. But combined with a background color, this might be something you can live with.
Try background-size: 100% 100%, or background-size: 100%
Hope this helps!
What you can do is make two copies of the background image, when the browser is resized to the minimum width you can use javascript(jquery) to swap the background image from large to small version.
Or you can style the background like:
background-image:url('../images/bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
Kind of weird title, but couldn't think of better way to word it.
Basically I'm working on a website, and I want to use an asset I made in photoshop for a navbar that looks like a leather suitcase/belt background. Issue is, if I stretch it too far, it won't fit the screen. Basically if I use the CSS background-size: cover; background-repeat: no-repeat; property, it looks something like this
It fits nicely on the 100% width of the element, but as you can see, the image is clipped because it's not 100px as I want it to be.
If I used background-size: contain; background-repeat: repeat-x; properties my image would obviously fit nicely when it comes to height, but since it's not a seamless texture it doesn't clip properly horizontally. As seen on the image below:
Which looks pretty weird as you can see. Last but not least I tried using the 50% 50% trick - background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;, which kind of worked but i still have a problem with it not fitting vertically (the edges are being cut off), as you can see here:
So I'm asking if there's a way to fit the image properly with CSS that I'm missing. Alternatively the second image i posted with repeat-x, however if there would be a way to check (probably with javascript/jquery) that once the image doesn't fit (ala second image), it needs to be flipped horizontally with scaleX so the edges fit, or should I simply downscale the image in photoshop? Thanks for your advice.
Have you tried :
background-size: (100% 100%);
Try using viewport to give the element width in accordance with the screen width (100vw = 100% browser width).
.nav-belt {
width: 100vw;
height: 100%;
}
Looking for some help.
I'm trying to scale an image (.essentials) proportionately which is set as background in the css and applied to a div.
The image does resize proportionately when the window is made smaller but the problem is that the height to the div is kept the same leaving a huge gap.
I'm using modernizr for fallback to detect if svg is supported to get the svg image and if not to get the png image for IE8 and below.
HTML below
<div class="essentials"></div>
CSS below
.essentials{
margin-bottom: 5em;
height: 505px;
}
.svg .essentials{
background: url("../images/myEssentials.svg") no-repeat;
background-size: contain;
}
.no-svg .essentials{
background: url("../images/myEssentials.png") no-repeat;
}
Assuming the div has no content, use e.g.
padding-bottom: 50%; // 2:1 aspect ratio
To add support for IE6 and IE5, include
height: 0; // IE6 (hasLayout)
(If the div has content, you need an additional wrapper div. This is all taken from http://alistapart.com/article/creating-intrinsic-ratios-for-video).
On this page I have 2 background images:
(1) A blue sunburst that is set as a background image of <html>
html {
background: url("BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg") no-repeat fixed center center / 100% auto transparent;
outline: 0 none !important;
}
(2) An image showing a crowd of arms in the air that appears at the bottom of every page. I use the sticky footer solution to make this stick to the bottom of each page
Everything works fine at normal browser widths, but once the browser width is below about 500px a white space starts appearing at the top:
and at the bottom
of every page. Previously I used
background-size: cover;
for the sunburst image, but this caused the website to crash the browser on iOS 6 (seriously), so I need to find a way to fix this without using this rule.
The white space is due to the browser positioning the image center center as defined in the CSS.
html {
background: url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size: 100%;
outline: 0!important;
}
I thought the solution would be just setting background-size: 100% 100% as the current setting of just background-size: 100%; is 100% width and auto height. But it's bugged in Chrome - background-size:100% 100%; doesn't work properly in Chrome. There is a workaround answer on that question that might help.
However, if the background-size: 100%; is dropped for width < 500px, perhaps in one of your #media rules, then the background fills the page as expected. The rule is still required when the window is greater than the width of the image to stretch the image.
If you're not opposed to a JS solution, you could try using Backstretch.
Set the background-size to something larger than 100%. I think 200-250% will cover that area.
background-size:220%;
One side effect this has is the fact that it causes slight lag due to the size.
Here, Have this solution...
In this file...
http://festivals.ie/static/C5z61WeZeCfyTRbmu6lNPsxXxwhibmxExq6ADwtSPjh.css
On line no 793,
this code is there in the last part of that line...
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;}
Add this property : background-position: 0px 0px;
Making the code:
html{background:url(BEhmxDlyFwihBhnuPwHL8VU1fr59VGeXflJlinXMr5q.svg) no-repeat center center fixed;
background-size:100%;
outline:0!important;
background-position: 0px 0px;}
And fyi, as andyb pointed out the white space is the image leaving its top position to be centered, thereby making it look like a white space starting to appear..
Hope you get the point.
Regards