I'm trying to add a fade effect to a banner but I can't properly calc the size of image to adjust the fade properly.
For example. if I have an image 1000x400 I need to adjust the calc to be calc(100% - 1010px); but if the image is 1200x400 I can't change dynamically the size to calc(100% - 1210px);
.container {
width: 100%;
min-height: 25rem;
background-color: coral;
display: block;
overflow: hidden;
position: relative;
}
.background-image {
width: 100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
background-image: url("https://placeimg.com/1000/400/any");
background-repeat: no-repeat;
background-position: right;
background-size: auto 100%;
}
.background-image:after {
content: "";
width: calc(100% - 1000px);
height: 120%;
position: absolute;
top: -30px;
left: 0;
overflow: hidden;
box-shadow: 50px 0 100px 100px coral;
}
<div class="container">
<div class="background-image"></div>
</div>
You can try it on codepen: https://codepen.io/Gabrielr472/pen/jONKNdO
If you can use css variables you can try this solution:
<div class="container">
<div class="background-image" style="--width: 1220px"></div>
</div>
and in css
width: calc(100% - var(--width));
and if you need to modify it in js:
elem.style.setProperty('--width', '1220px');
https://codepen.io/Xesenix/pen/qBWKoPY
I am trying to achieve below layout using bootstrap. I am able to do it otherwise but problem occurs on small screens where the middle most box(smallest one) will not appear where it should be, it goes up. so want to try using bootstrap.enter image description here
how about this solution. I have made few changes in your code.
please have look carefully
DEMO
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0.5px solid black;
}
.top-cover {
width: 100%;
height: 300px;
background-image: url('IMG_0044.JPG');
background-size: cover;
background-position: center;
}
.main-cover {
width: 90%;
position: relative;
height: 700px;
left: 5%;
top: -60px;
z-index: 1;
background-color: brown;
border: solid 5px green;
}
#dp {
width: 20%;
position: absolute;
left: 40%;
top: -10%;
z-index: 2;
display: none;
}
.dp-pic {
width: 20vw;
min-width: 75px;
max-width: 150px;
position: absolute;
left: 40%;
top: -8%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp"></div>
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
Following should generate your desired layout. Add borders or other fancy styles as you want.
body {
margin: 0;
padding: 0;
}
.top-cover {
width: 100%;
height: 300px;
background: #eee;
}
.main-cover {
width: 90%;
height: 700px;
position: relative;
margin: -60px auto 0;
z-index: 1;
background-color: brown;
}
#dp {
width: 20%;
position: absolute;
left: 50%;
margin: -10% 0 0 -10%;
z-index: 2;
}
.dp-pic {
width: 100%;
}
<div class="top-cover">
</div>
<div class="main-cover">
<div id="dp">
<img class="dp-pic" src="https://camo.githubusercontent.com/9e39276ad39fe3cda7ac61dd0f1560dc5ad1ab95/68747470733a2f2f646c2e64726f70626f7875736572636f6e74656e742e636f6d2f752f3737343835392f4769744875622d5265706f732f7465737464756d6d792f63726173687465737464756d6d792e6a7067">
</div>
</div>
When I apply the blur filter to my markup the edges are not being blurred. I would like the entire region to be blurred.
HTML
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
CSS
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: 0;
right: 0;
bottom: 0px;
content: "text";
position: absolute;
height: 20%;
width: 100%;
background: url(/images/400x300.jpg) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(12px);
filter: blur(12px);
}
Codepen:
http://codepen.io/aaronbalthaser/pen/qNOYdE
The Codepen shows the blurred region. It is kind of like a footer but as you can see the edges are not blurred. Any ideas?
Thanks
You can set overflow: hidden and stretch a little bit the blurred image. I have set width to 110%, height to 35%, left, right and bottom to -5% (the added percentage to width and height). Hope this is what you want.
html,
body{
width: 100%;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
.container {
width: 300px;
height: 250px;
}
.inner {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.image {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
}
.image:before {
left: -5%;
right: -5%;
bottom: -5%;
content: "";
position: absolute;
height: 35%;
width: 110%;
background: url(http://attic24.typepad.com/.a/6a00e551101c548834017d3d4fde82970c-500wi) no-repeat center center fixed;
background-size: fill;
-webkit-filter: blur(8px);
filter: blur(8px);
overflow: hidden;
}
<div class="container">
<div class="inner">
<div class="image">
</div>
</div>
</div>
I am using css-sprites on a few pages of a website as navigation buttons, with a part of the image darkening when hovered over. All these buttons have text on them. Before I had just written the text onto the image and things worked fine, but I wanted to add the text to my html so that it renders better for anyone that zooms in to the page. Doing this however has now caused the images for the sprites not to appear in Firefox, Chrome and IE (still works fine in Safari).
Obviously I assumed that adding the text to the code had caused this but now even when I remove the text, the images still don't show up. I'm really having trouble figuring out why this is, especially as I have 2 other pages that use sprites and they are still working fine. The only difference is that i hadn't attempted to move the text into my code on those pages.
Any suggestions are really appreciated
Code for the broken sprites:
.row5
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1215px;
}
.box1
{
background: url(http://www.sungblue.com/Images/box1sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.boxtext
{
font-family: elron;
color: rgba(255,255,255,1.00);
font-size: 18px;
width: 306px;
height: 18px;
position: absolute;
top: 175px;
left: 0px;
text-align: center;
}
.box1:hover
{
background-position: 0 -201px;
}
.box2
{
background: url(http://www.sungblue.com/Images/box2sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box2:hover
{
background-position: 0 -201px;
}
.box3
{
background: url(http://www.sungblue.com/Images/box3sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box3:hover
{
background-position: 0 -201px;
}
.row6
{
width: 940px;
height: 220px;
position: absolute;
left: 10px;
top: 1425px;
}
.box4
{
background: url(http://www.sungblue.com/Images/box4sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
}
.box4:hover
{
background-position: 0 -201px;
}
.box5
{
background: url(http://www.sungblue.com/Images/box5sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 317px;
}
.box5:hover
{
background-position: 0 -201px;
}
.box6
{
background: url(http://www.sungblue.com/Images/box6sprite.jpg) 0 0;
background-repeat: no-repeat;
width: 306px;
height: 200px;
position: absolute;
top: 10px;
left: 634px;
}
.box6:hover
{
background-position: 0 -201px;
}
<div class='row5'>
<a href='http://www.sungblue.com/weddings.html'>
<div class='box1'>
<div class='boxtext'>WEDDINGS</div>
</div>
</a>
<a href='http://www.sungblue.com/prewedding.html'>
<div class='box2'>
<div class='boxtext'>ENGAGEMENT SHOOTS</div>
</div>
</a>
<a href='http://www.sungblue.com/contact.html'>
<div class='box3'>
<div class='boxtext'>CONTACT</div>
</div>
</a>
</div>
<div class='row6'>
<a href='http://sungbluephotography.zenfolio.com'>
<div class='box4'>
<div class='boxtext'>CLIENT AREA</div>
</div>
</a>
<a href='http://www.sungblue.com/prices.html'>
<div class='box5'>
<div class='boxtext'>PRICING</div>
</div>
</a>
<a href='http://sungbluephotography.zenfolio.com/blog/'>
<div class='box6'>
<div class='boxtext'>BLOG</div>
</div>
</a>
</div>
And here's the code from my other page where my sprites are working:
.row3
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 335px;
text-align: center;
}
.box1
{
background-image: url(http://www.sungblue.com/Images/weddingbox1sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.boxtext
{
width: 465px;
height: 18px;
position: absolute;
left: 0px;
top: 260px;
font-family: elron;
font-size: 18px;
color: rgba(255,255,255,1.00);
text-align: center;
}
.box1:hover
{
background-position: 0 -289px;
}
.box2
{
background-image: url(http://www.sungblue.com/Images/weddingbox2sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box2:hover
{
background-position: 0 -289px;
}
.row4
{
width: 940px;
height: 288px;
position: absolute;
left: 10px;
top: 633px;
text-align: center;
}
.box3
{
background-image: url(http://www.sungblue.com/Images/weddingbox3sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 0px;
}
.box3:hover
{
background-position: 0 -289px;
}
.box4
{
background-image: url(http://www.sungblue.com/Images/weddingbox4sprite.jpg);
width: 465px;
height: 288px;
position: absolute;
top: 0px;
left: 475px;
}
.box4:hover
{
background-position: 0 -289px;
}
The problem is with the images themselves. Since they have .jpg extensions, the browsers try to treat them as JPEG files, which they are not. They are PNG files.
Solution: rename them to .png, or convert them to actual JPEG files.
I am trying to keep a background video centered regardless of how big the user drags the video. It's currently cutting off the right side of the videos when i scroll smaller. Here's what I have:
<section id="home">
<div class="video_shader"></div>
<div class="video_contain">
<video autoplay="" loop="" poster="img/still.jpg" id="bgvid">
<source src="/realWebm.webm" type="video/webm" />
<source src="/realdeal.mp4" type="video/mp4">
<source src="/reaOg.ogv" type="video/ogg" />
</video>
</div>
</section>
.video_contain{
display: block;
position: absolute;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
video {
min-width: 100%;
min-height: 100%;
z-index: -100;
background-position: center;
background-size: cover;
}
#home {
width: 100vw;
height: 100vh;
display:block;
position: relative;
}
I would like the center of the video to be the center of the page always, even if the sides get cut off - that's actually ideal if it happens that way. Would appreciate any help. Thanks for reading!
here's how I typically do background video, and how I did it for the stre.am landing page:
.video_contain {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
This is much shorter and worked for me.
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
transform: translateX(calc((100% - 100vw) / 2));
}
In my use case where I always wanted the video to cover the entire viewport (no matter if the viewport aspect ratio was bigger or lower than the videos), the above solution didn't work exactly how i intended. Instead, the following worked much better:
.video-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}
.video-container > video {
display: block;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
#media screen and (max-aspect-ratio: 1920/1080) {
.video-container > video {
height: 100%;
}
}
#media screen and (min-aspect-ratio: 1920/1080) {
.video-container > video {
width: 100%;
}
}
My video was 1920x1080, and this works in IE11 (didnt test lower) and beyond.
.bg-video-wrap {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.bg-video-wrap > video,
.bg-video-wrap > iframe {
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
Late to the party but I wanted to give a 2020 answer. Here's a simple solution that lets you have an HTML video both centered and responsive without being "fixed" positioned. It lets you start with a fullscreen intro and add some text right when you start scrolling. No scrollbars, no annoying things. As simple as that.
https://codepen.io/LuBre/pen/GRJVMqE?editors=1100
CSS
* {
box-sizing: border-box;
}
body, html {
margin: 0;
height: 100%;
font-Family: Arial;
}
.video-container {
display: grid;
justify-items: center;
align-items: center;
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
position: absolute;
z-index: 1;
top: 50%;
left:50%;
min-width: 100%;
min-height: 100%;
transform: translateX(-50%) translateY(-50%);
}
.video-text {
z-index: 2;
color: #fff;
text-align: center;
}
.video-container h1, .video-container h2 {
margin: 0;
font-size: 3rem;
}
.video-container h2 {
font-size: 1.4rem;
font-weight: normal;
opacity: 0.6;
}
.page-content {
line-height: 1.4rem;
padding: 2rem;
}
HTML
<div class="video-container">
<video autoplay muted loop>
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<div class="video-text">
<h1>Catchy title</h1>
<h2>Everyone loves catchy titles</h2>
</div>
</div>
<div class="page-content">
<h1>New paragaph</h1>
Some random text goes here...
Use object-fit: cover;
video {
position: absolute;
right: 0;
bottom: 0;
height: 100vh;
width: 100vw;
object-fit: cover;
}
just center it like any other element with position absolute
.video_contain {
position: absolute;
width: auto;
min-height: 100%;
min-width: 100%;
left: 50%;
transform: translate(-50%);
}
This worked for me
.video_contain {
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
background-image: none;
}
#bgvid {
margin: auto;
position: absolute;
z-index: -1;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
visibility: visible;
width: 1267px;
height: auto;
}
This did the trick for me, keeping the video centered all the time and not worrying about the actual dimensions of the video
.video_contain {
position: absolute;
top: 0;
left: 0;
/** could be any size **/
width: 100%;
height: 100%;
overflow: hidden;
z-index: 0;
}
video {
display: block;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
So I tested above solutions and couldn't find that one, so here is mine:
video {
position: fixed;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
transform: translate(50%, -50%);
}