From a website theme, I have the following which cuts off the top of my video. I want to be able to re-size the video, even if it means not stretching across the full screen -
<section class="home-section bg-dark-30" id="home" data-background="assets/images/section-5.jpg">
<div class="video-player" data-property="{videoURL:'https://www.youtube.com/watch?v=MY_VIDEO_URL', containment:'.home-section', startAt:2, mute:true, autoPlay:true, loop:true, opacity:1, showControls:false, showYTLogo:false, vol:0}"></div>
<div class="video-controls-box">
<div class="container">
<div class="video-controls"><a class="fa fa-volume-up" id="video-volume" href="#"> </a><a class="fa fa-pause" id="video-play" href="#"> </a></div>
</div>
</div>
<div class="titan-caption">
<div class="caption-content">
<div class="font-alt mb-30 titan-title-size-1">Hello & welcome</div>
<div class="font-alt mb-40 titan-title-size-4">asdf</div><a class="section-scroll btn btn-border-w btn-round" href="#about">Learn More</a>
</div>
</div>
</section>
Here is the CSS of home-section:
.home-section {
position: relative;
background-color: #FFF;
background-repeat: no-repeat;
background-position: center center;
width: 100%;
z-index: 0;
background-size: cover;
}
How can I do this?
Link to template html page that I'm modifying:
http://markup.themewagon.com/titan/index_mp_classic_video_background.html
The area on my browser measures to be 1900 x 800 pixels. My video is 1280 x 720. So the proportions don't work out properly, and video gets cut off. Thus I Want to resize.
Hope that makes sense, thankful for any help. Any questions or anything not clear let me know.
You can try changing to background-size: contain;, so it scales the video so it fills the screen size
Related
I am noticing an interesting problem with my site. I have a section that has a static background image and as you scroll there's a quote and button (eventually will link to a store) over the top of it. To my knowledge, it was working in the past, but yesterday I noticed after a few seconds the background image is gone, replaced with just a gray background. The image will flicker in and out a bit before permanently being replaced with the gray background.
Here is my HTML:
<section class="bar background-image-fixed-2 no-mb color-white text-center">
<div class="dark-mask"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icon icon-lg"><i class="fa fa-leaf"></i>
</div>
<h3><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
Get Some
</p>
</div>
</div>
</div>
</section>
Here is my CSS:
.bar.background-image-fixed-2 {
background-image: url('../img/fixed-background-2.jpg');
background-position: center center;
background-repeat no-repeat;
background-attachment: fixed;
background-size: cover;
}
The image URL is correct because it initially loads for a couple of seconds. Originally, this was written short hand but some suggestions I've seen recommended doing the long form for the CSS. I split it out, but that doesn't seem to make a difference.
Actual look (incorrect):
Expected look (which I get for a few seconds before it changes automatically):
Edit:
Here is a fiddle (though it's missing some javascript so it'll look funny).
please check your url is not proper loading :
.bar.background-image-fixed-2 {
background-image: url('https://images.unsplash.com/photo-1490810277975-e64342ceecf0?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=88e69bf894f334456f8ae269752556e1&auto=format&fit=crop&w=1650&q=80');
background-position: center center;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: cover;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<section class="bar background-image-fixed-2 no-mb color-white text-center">
<div class="dark-mask"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="icon icon-lg"><i class="fa fa-leaf"></i>
</div>
<h3 class="text-white"><em>"Herb is the healing of a nation" - Bob Marley</em></h3>
<p class="text-center">
Get Some
</p>
</div>
</div>
</div>
</section>
Hi I have searched in previous questions and tried multiple ways but I still have trouble setting up opacity of my background image without effecting opacity of font.
this is my html:
<main>
<div class="background">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="center">
<h1>My name</h1>
<h3>this is my website</h3>
<hr>
<button id = "mainButton" type="button" class="btn btn-default btn-lg">Get Started!</button>
</div>
</div>
</div>
</div>
</div>
</main>
and this is css:
.background{
background-image: url("xxx.jpg");
width: 100%;
height:100%;
position:fixed;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
opacity:0.5;
}
*I tried to use rgba(0,0,0,0.5);
*I tried to set up another css rule just for h1, or the div with the text but still the same.
Please can anyone help?
Make the markup like this:
<main>
<div class="background">
</div>
<div class="container">
</div>
</main>
Give to main position: relative;
Give to background div position: absolute;
Fix the rest. You're done.
About background size
You can modify the image background size by background-size and using values like cover, contain, 100%, 100% 100% etc.
If you want to cover all the page, use value 100vh, meaning 100% of the viewport height.
I have a responsive image which is leaving white space under the image when resizing the browser. I tried cover but the image doesn't resize at all only setting the background to 100% gives perfect responsiveness. I tried multiple other solutions from stack overflow and none seem to work.
error here :https://drive.google.com/open?id=0BxHtDrLLi2x5ckJNMVVNblRSSWc
css:
#jumbotron{
text-align:center;
background-color:#71706e;
padding-top:80px;
width:100%;
background: url(images/showcase5.jpg) no-repeat;
background-size: 100%;
}
html:
<section id = "jumbotron">
<div class="text">
<h1 class="animated slideInDown">Now now now!</h1>
<h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
<a href="#" class="learnMore " >Get Started</a>
</div>
</section>
<div id="recent">
<h3>Recent Projects</h3>
</div>
The general concept is to set the height of the container to 0 and use a vertical padding that matches the background image aspect ratio. To get that padding, divide the image height by the width and multiply by 100 to get a percentage. Then the div will scale the same as the background image. And just set the background size to 100%, contain, or cover.
#jumbotron {
background: url('http://placehold.it/1920x1265') 0 0 no-repeat / cover;
padding-bottom: 65.89%;
height: 0;
text-align: center;
}
<section id = "jumbotron">
<div class="text">
<h1 class="animated slideInDown">Now now now!</h1>
<h2 class="animated slideInDown">Now now now now<br> before your now do!</h2>
<a href="#" class="learnMore " >Get Started</a>
</div>
</section>
<div id="recent">
<h3>Recent Projects</h3>
</div>
I am creating a web app using angularjs. I have added the navigation, content and footer in index.html. so ui-view will change the route accordingly. I want to show full screen background image for main page and the rest of the page will only show according to their content.
<!-- Navigation -->
<div ng-include="'views/common/navigation.html'"></div>
<!-- Main view -->
<div ui-view></div>
<!-- Footer -->
<div ng-include="'views/common/footer.html'"></div>
Here is the HTML will show in ui-view and want to show 100% height. It does not show 100% height. If I up it in index.html it is showing 100% background image width. May I know which one is causing the issue.
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1 class="brand-heading">Grayscale</h1>
<p class="intro-text">A free, responsive, one page Bootstrap theme.<br>Created by Start Bootstrap.</p>
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
.intro {
display: table;
width: 100%;
height: 100%;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/intro-bg.jpg) no-repeat center center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
you need to set the height to 100% on the body (and possibly all parent elements too)
alternatively, try the new viewport height CSS unit ...
height: 100vh
see https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
supports looks good ...
http://caniuse.com/#feat=viewport-units
This is where the background is in my css. The picture fits perfectly like this, and I don't want to change the position or size or anything in normal browser. I just want the image to resize itself when viewed on phone devices or tablets.
.intro {
display: table;
width: 100%;
height: auto;
padding: 100px 0;
text-align: center;
color: #fff;
background: url(../img/mee.JPG) no-repeat bottom center scroll;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: 0px 1px;
}
This is the html part:
<!-- Intro Header -->
<header class="intro">
<div class="intro-body">
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-1">
<h1 class="brand-heading">Welcome</h1>
</div>
<div class="col-md-8 col-md-offset-4">
<font size= "6"><marquee behavior="slide" scrollamount ="22"><b>ENGINEER</font></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="20"><b>DEVELOPER</b></font></b></marquee>
<font size= "6"><marquee behavior="slide" scrollamount ="18"><b>COFFEE ADDICT</b></font></b></marquee>
</div>
<div class="buttonn">
<a href="#about" class="btn btn-circle page-scroll">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</div>
</div>
</header>
You need to create additional css for different screen size, essentially making it responsive.
This is a great link explaining that and how to go about it: https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en#a-note-on-min-device-width
The CSS used most often for responsive web design are min-width, max-width, min-height and max-height.
Hope that was helpful :)