I'm making a static website on which I have too many parallax images. Basically each section is separated by a parallax image. Now the problem that I'm facing is, as I'm building my website and adding sections and more parallax images, some of the images near the bottom of the website are moving out of the frame. What I mean by this is, that the images are probably starting at the wrong position, and then as I scroll, they end up moving out of their div or frame and I see empty space underneath the image.
This is not happening for all images though; only images near the bottom of the website experience this problem. Furthermore, the lower an image is, the more pronounced this problem is.
Here is my code for inserting the parallax images:
<div class="section parallax light-translucent-bg parallax-bg-5">
<div class="container">
<div class="call-to-action">
</div>
</div>
</div>
Here is the CSS for this div:
.parallax-bg-5 {
background: url("../images/parallax-bg-5.jpg") 50% 0px no-repeat;
}
use background-attachment: fixed
Example
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
h1,
h2 {
color: #fff;
text-align: center;
padding: 25px 0;
margin: 0;
}
.block-parallax {
overflow: hidden;
position: relative;
}
.block-parallax .parallax-bg {
background-attachment: fixed;
background-position: 0px 0px;
background-repeat: repeat;
height: 100%;
position: absolute;
width: 100%;
min-width: 1170px;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.block-parallax .md-box {
padding: 200px 0 200px;
background: rgba(0, 0, 0, 0.75);
position: relative;
height: 100%;
text-align: center;
}
.block-parallax-1 .parallax-bg {
background-image: url('http://healthfitnessrevolution.com/wp-content/uploads/2013/10/Olympic_Boxing-featured-image.jpg');
}
.block-parallax-2 .parallax-bg {
background-image: url('http://www.seankernan.com/data/photos/201_1kampala_boxing_3273.jpg');
}
.block-parallax-3 .parallax-bg {
background-image: url('http://www.omaa.org.uk/sites/default/files/Boxing-008.jpg');
}
.block-parallax-4 .parallax-bg {
background-image: url('https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSw56f8j5e70Gl8gZtH4Qgmq9wTo-aG3u3ZTgx6Uhs1M8ljMoU0Sg');
}
.block-parallax-5 .parallax-bg {
background-image: url('http://www.hdwallpaperscool.com/wp-content/uploads/2014/08/boxing-hd-wallpapers-of-high-resolution-free.jpg');
}
.block-parallax-6 .parallax-bg {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcS65xrl17ug548Rzu04Ahb6oeMAVkg2mGtyNY2t4TllnaMqfCKA');
}
.block-parallax-7 .parallax-bg {
background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSC8mBv8rOCIQ8pg7eaj3-6croM0P75HnbwVJgarkOTpFwSj9U6');
}
.block-parallax-8 .parallax-bg {
background-image: url('http://thumbnails.cbsig.net/CBS_Production_Showtime/CBS_Production_Showtime/2009/09/25/Sports/Boxing/193/694/boxing_supersix_farhood_cbsan.jpg');
}
.block-parallax-9 .parallax-bg {
background-image: url('https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcR2XSMnKMHMD5Rn8LvbfD6hGWGLlIrWwczW433sMgfpuSh3iU1Agw');
}
.block-parallax-10 .parallax-bg {
background-image: url('http://www.mymmainfo.com/wp-content/uploads/2011/12/pay-per-view-boxing.jpg');
}
<section class="block-parallax block-parallax-1">
<div class="parallax-bg"></div>
<div class="md-box">
<h1>background 1</h1>
</div>
</section>
<section class="block-parallax block-parallax-2">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 2</h2>
</div>
</section>
<section class="block-parallax block-parallax-3">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 3</h2>
</div>
</section>
<section class="block-parallax block-parallax-4">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 4</h2>
</div>
</section>
<section class="block-parallax block-parallax-5">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 5</h2>
</div>
</section>
<section class="block-parallax block-parallax-6">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 6</h2>
</div>
</section>
<section class="block-parallax block-parallax-7">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 7</h2>
</div>
</section>
<section class="block-parallax block-parallax-8">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 8</h2>
</div>
</section>
<section class="block-parallax block-parallax-9">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 9</h2>
</div>
</section>
<section class="block-parallax block-parallax-10">
<div class="parallax-bg"></div>
<div class="md-box">
<h2>background 10</h2>
</div>
</section>
fiddle
So I solved this problem by making the images repeat. As I mentioned in the comments, I just discovered the crux of the problem. Each image starts moving as soon as you start scrolling on the website from the very top. This means that by the time you reach the bottom off the website, the images over there have moved too much and are out of the div.
So for example, I changed
.parallax-bg-4 {
background: url("../images/parallax-bg-4.jpg") 50% 0px no-repeat;
}
to
.parallax-bg-4 {
background: url("../images/parallax-bg-4.jpg") 50% 0px;
}
and repeated doing this for every div or image with parallax.
I am concerned a little bit about performance and did notice my laptop heating up when I repeated the images and I have a very powerful machine (rMBP 15"). If anyone has a better solution, please post it here.
Related
enter image description here
Does anyone knows why my background image for the main game looks like this? I would like to set it for the entire screen, because my plan is to have different backgrounds for 2 different screens, for the menu of the game and for the game itself. If you have any idea or some input for easier my work please let me know, thanks.
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Skranji', sans-serif;
}
/* Roots */
:root {
--background-main-game: url('../images/wowWP.jpg');
--background-main-menu: url('../images/gameMenu.jpg');
}
main {
height: 100vh;
}
/* Game backgound */
.mainGameBackground {
background-image: var(--background-main-game);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
height: 100vh;
width: 100vh;
}
<section class="mainGameBackground">
<!-- Game board -->
<div class="gameBoard">
<div class="mainBoard mt-0 mb-5 text-center mx-auto" id="mainGameBoard">
<span id="warriorTurn"></span>
<div class="square square1" style="border-left: 0; border-top: 0; margin-left: 15px;" id="0"></div>
<div class="square square2" style="border-top: 0" id="1"></div>
<div class="square square3" style="border-top: 0; border-right: 0;" id="2"></div>
<div class="square square4" style="border-left: 0; margin-left: 15px;" id="3"></div>
<div class="square square5" id="4"></div>
<div class="square square6" style="border-right: 0;" id="5"></div>
<div class="square square7" style="border-left: 0; border-bottom: 0; margin-left: 15px;" id="6"></div>
<div class="square square8" style="border-bottom: 0;" id="7"></div>
<div class="square square9" style="border-right: 0; border-bottom: 0;" id="8"></div>
</div>
<div class="d-md-flex">
<button class="btn d-block mb-4 m-md-1" id="playAgain">Play Again</button>
<button class="btn d-block ml-md-4 m-md-1" id="menuButton">Menu</button>
</div>
</div>
</section>
Note !!! Your Image contains white background thats why it looks like that also you must change width with 100% example bellow:
.mainGameBackground {
background-image: var(--background-main-game);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
height: 100vh;
width: 100%; /* width must be in percantage */
}
Change Image or remove white background.
This question already has answers here:
Center image using text-align center?
(28 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I have a carousel that is working perfectly fine as I want but I'm having trouble center aligning the image and text properly. It looks fine in small screen but is not aligned in bigger screens or smaller screens.
Also the previous and next button arrows are not aligned in the center of the background circle aswell.
HTML
<div>
<h3 style="text-align:center; padding:30px; padding-bottom:10px;">Trending now</h3>
<!-- Multi Carousel -->
<div class="prod-slider-container">
<div class="inner-container">
<div class="owl-carousel">
<div class="item">
<img src="https://www2.hm.com/content/dam/hm-magazine-2020/featured-fashion/20_13_A_trend_bildspel_1.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Jackets & Coats</span>
</p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F33%2F9e%2F339e3549ec41eef34883a4fbe73e8501c36764fb.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_cardigans%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span>
</p>
</div>
<div class="item">
<img src="https://cdna.lystit.com/photos/56a1-2014/11/06/hm-blue-jumper-in-a-mohair-blend-product-1-25065199-0-150443488-normal.jpeg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Clothes</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/32/00/a8/3200a8617dfbc6139b8251a36d5118de.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Boys 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmprod?hmver=0&set=quality[79],source[/environment/2016/8EZ_0117_008R.jpg],width[4054],height[4740],x[549],y[438],type[FASHION_FRONT]&call=url[file:/product/main]">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Girls 11/2-10<br> years</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/736x/b3/21/bd/b321bd9d618ee5439cd7218f9a543704.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Hoodies &<br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/Ol-YWVWUQnVmpEjhoKL6eZK0Kfo/fit-in/2048xorig/filters:format_auto-!!-:strip_icc-!!-/2014/09/11/879/n/24155406/6877ea140db7a0db_thumb_temp_image22153611410465627/i/HM-Newborn-Clothes.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Newborn 0-9<br>months</span></p>
</div>
<div class="item">
<img src="https://mk0stylisheve1cal1r6.kinstacdn.com/wp-content/uploads/2011/12/HM-Jumpers-and-Cardigans-for-Men_01.jpg">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Cardigans &<br> Sweaters</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2F0e%2F50%2F0e50030ec7575845e95ead7a4046c4522544852d.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bmen_trousers_dressed%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/b7/2a/50/b72a5020325b27dd6c053223703ee04b.jpg">
<p class="carosueltitletxt">
Kids<br>
<span class="carosueltxt">Baby Exclusive <br> 0m-4 years</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=quality%5B79%5D%2Csource%5B%2Fe3%2F6c%2Fe36c9e916fdfa4b3896bfe9992889b7fa4a827ca.jpg%5D%2Corigin%5Bdam%5D%2Ccategory%5Bladies_cardigansjumpers_hoodiessweatshirts%5D%2Ctype%5BLOOKBOOK%5D%2Cres%5Bm%5D%2Chmver%5B1%5D&call=url[file:/product/main]">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Hoodies & <br> Sweatshirts</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/18fWRKJF__pohskeGtu_P3dCSRE/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2020/01/08/883/n/1922564/28a69c26b18fd4bf_netimgaMezvq/i/HM-Paper-bag-Pants.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Pants</span></p>
</div>
<div class="item">
<img src="https://i.pinimg.com/originals/14/ff/b0/14ffb09b1bcef167ed28a9624748e032.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Accessories</span></p>
</div>
<div class="item">
<img src="https://lp2.hm.com/hmgoepprod?set=width[800],quality[80],options[limit]&source=url[https://www2.hm.com/content/dam/men_s02/september_2020/3132b/3132B-1x1-v41-the-casual-edit.jpg]&scale=width[global.width],height[15000],options[global.options]&sink=format[jpg],quality[global.quality]">
<p class="carosueltitletxt">
Men<br>
<span class="carosueltxt">Jackets & <br>Coats</span></p>
</div>
<div class="item">
<img src="https://media1.popsugar-assets.com/files/thumbor/ornsuB5wU0zsOvtIq06LKYZaN0o/fit-in/1024x1024/filters:format_auto-!!-:strip_icc-!!-/2019/06/05/932/n/1922564/201a10c4095b52d1_netimgVaH6Nm/i/HM-Linen-Shirt.jpg">
<p class="carosueltitletxt">
Women<br>
<span class="carosueltxt">Shirts &<br> blouses</span></p>
</div>
<div class="item">
<img src="https://decoholic.org/wp-content/uploads/2020/09/HM-Home-fall-2020-2.jpg">
<p class="carosueltitletxt">
H&M Home<br>
<span class="carosueltxt">New Home &<br> Interior</span></p>
</div>
</div>
</div>
</div>
CSS
/*carousel*/
.prod-slider-container {
position: relative;
font-family: font-awesome;
margin-left: 10%;
margin-right: 10%;
}
.owl-buttons {
background-color: transparent;
border: 0px none transparent;
width: 9%;
}
.owl-prev,
.owl-next {
position: absolute;
top: 37px;
}
i.fa {
cursor: pointer;
font-size: 10px;
padding-top: 0;
height: 0;
width: 0px;
color: rgba(0, 0, 4, 0.5);
}
.owl-perv {
left: -2%;
}
.owl-next {
right: 5.1%;
}
.item img {
margin-left: 10px;
margin-right: 10px;
width: 100px;
height: 100px;
border-radius: 50px;
background: #222222;
object-fit: cover;
}
.carosueltitletxt{
font-family:helvetica;
text-align:center;
color:#555555;
font-size:11px;
font-weight:bold;
}
.carosueltxt{
font-family:helvetica;
text-align:center;
color:#222222;
}
.d4-container img {
position: relative;
margin-left: 10%;
margin-right: 10%;
margin-top: 20px;
display: block;
width: 80%;
height: 400px;
object-fit: cover;
background: gray;
}
JQuery
$(document).ready(function() {
$('.owl-carousel').owlCarousel({
items: 8,
pagination:false,
itemsDesktop: [1199, 5],
itemsDesktopSmall: [979, 5],
navigation: true,
navigationText: [
"<i class='fa fa-chevron-left'></i>",
"<i class='fa fa-chevron-right'></i>"
]
});
});
Hi can you please try with this and let me know thank you.
.prod-slider-container .item a {
display: block;
margin: 0 auto;
float: none;
text-align: center;
}
To center the texts and the images, add text-align: center; to the wrapper element which is .item in this case.
You can add this text-align: center; to the second parent .owl-carousel or the third .inner-container also, that would make all the texts and images inside centered.
And for .owl-next & .owl-prev honestly, if you can't provide the live example of this carousel, I can't be specific about the solution, this is a simple try based on your provided code, hope this would help you find the solution-
.inner-container {
position: relative;
}
.inner-container .owl-prev,
.inner-container .owl-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.owl-prev {left: 15px}
.owl-next {right: 15px}
just use display: flex on .item class and change the value of justify-content and align items to fit your need.
like this:
.item{
display: flex;
justify-content: center;
align-items: space-around;
}
I am making a very simple application where there is a need to implement parallax effect.
Things I have tried as of now,
-> Placed an image inside a div with class parallax.
-> Then placed an overlay div with bootstrap class card item-card card-block with headline, image and some text inside it.
.parallax {
width: 100%;
height: 250px;
border-radius: 0;
}
.item-card {
flex-direction: column;
box-sizing: border-box;
display: flex;
place-content: center flex-start;
align-items: center;
margin: -24px 0 0;
width: 100%;
padding: 0;
border-radius: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="parallax">
<img style="width: 100%" src="https://www.w3schools.com/howto/img_parallax.jpg" />
</div>
<div class="card item-card card-block">
<h1 class="card-title text-center">Some big text here as headline</h1>
<div class="card-body">
<img style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
</div>
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
Tried applying position:fixed to parallax div but that doesn't help.
The image div needs to be position fixed and then the next div card needs to scroll over it.
Changing the given image to background image makes entire div as not a responsive one.
Try it like this
.parallax {
background-image: url("https://www.w3schools.com/howto/img_parallax.jpg");
width: 100%;
height: 250px;
border-radius: 0;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.item-card {
flex-direction: column;
box-sizing: border-box;
display: flex;
place-content: center flex-start;
align-items: center;
margin: -24px 0 0;
width: 100%;
padding: 0;
border-radius: 18px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container mt-2">
<div class="parallax">
</div>
<div class="card item-card card-block">
<h1 class="card-title text-center">Some big text here as headline</h1>
<div class="card-body">
<img style="width: 100%" src="https://static.pexels.com/photos/7357/startup-photos.jpg" alt="Photo of sunset">
</div>
<h5 class="item-card-title mt-3 mb-3">Sierra Web Development • Owner</h5>
<p class="card-text">This is a company that builds websites, web apps and e-commerce solutions.</p>
</div>
</div>
I have a component which has a "sticky" header at the top and list of elements that use blending modes. In this simplified example, it's headers inside divs.
It works fine until I scroll content. If I scroll down, blending mode also applies to blend "sticky" header with elements which is not what I want.
Is there any way to make a "sticky" header to ignore the blending modes of an another element and always just cover the elements behind.
See code below.
<div>
<div style="display: flex; flex-direction: column; height: 700px; max-height: 700px; overflow: auto; text-align: center;">
<div style="position: sticky; top: 0px; background: blue;">Sticky</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
<div style="background: lightblue;">
<h1 style="background: red; mix-blend-mode: multiply;">ABC</h1>
</div>
/* a lot of other elements like 2 above*/
</div>
</div>
you just have to add z-index: 1000; on Sticky style
.class_Parent {
display: flex;
flex-direction: column;
height: 700px;
max-height: 700px;
overflow: auto;
text-align: center;
}
.class_Sticky {
position: sticky;
top: 0px;
background-color: blue;
z-index: 1000;
}
.class_ABC {
background: lightblue;
}
.class_ABC h1 {
background: red;
mix-blend-mode: multiply;
}
<div>
<div class="class_Parent">
<div class="class_Sticky">Sticky</div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
<div class="class_ABC"> <h1>ABC</h1> </div>
</div>
</div>
Setting z-index of the "sticky" header to any value more than 0 solves the problem. I think value should be more than z-index of the elements.
Here is my homepage
I want to extend the height of my image to fit the whole screen. I know that I have to adjust the height attribute, I did that, and nothing seems to work.
CSS
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url('../img/hero-slider/boxfill2sm.jpg');
background-size: cover;
position: relative;
padding-top: 0;
height: auto;
}
Note: I tried height: auto;. It doesn't do anything.
HTML
<section class="hero">
<div class="container-fluid no-margin no-padding">
<div class="col-md-8 col-sm-12 col-xs-12 col-lg-8" id="hero-left">
<div>
<div class="row">
<div class="bx-wrapper" style="max-width: 100%;"><div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 391px;"><div class="hero-slider" style="width: auto; position: relative;">
<div class="slide first-slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 50; display: block;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp fadeInDown">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.ED</h2>
<p>EFFECTIVE DIGITAL LEARNING</p>
<p>Tutti.ed is our educational software platform that empowers education companies to bring state-of-the-art digital learning products to market quickly.</p>
<a class="btn btn-primary" href="/tutti-ed">Learn More</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
<!-- <img class="iphone" src="img/hero-slider/iphone.png" width="649" height="400" alt="Coming Soon Page"/> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:50px;" class="text-left">MEET TUTTI.DEV</h2>
<p>BY DEVELOPERS, FOR DEVELOPERS</p>
<p>Tutti.dev is our cloud application suite that enables software teams to work more effectively and efficiently. Get it together with Tutti!</p>
<a class="btn btn-primary" href="/tutti-dev">Learn more</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<!-- <div class="video"><img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/></div> -->
</div>
</div>
<div class="slide" style="float: none; list-style: none; position: absolute; width: 1067px; z-index: 0; display: none;">
<div class="col-lg-5 col-md-5 col-sm-5 animated fadeInUp">
<h2 style="margin-top:70px;" class="text-left">WHY AVENIROS?</h2>
<p>Our team has been building content delivery platforms for over 20 years. We have experience with development from large scale LMS installations to mobile applications. We can offer full turn-key technical services for your content or help your technical team get to market on time.
</p>
<a class="btn btn-primary" href="#" data-scrollto="#about">About us</a>
</div>
<div class="col-lg-7 col-md-7 col-sm-7 animated fadeInRight">
<div class="video">
<!-- <img class="slider-img pull-right" src="img/hero-slider/tdApp1.jpg" width="689" height="659" alt="Components and Styles"/> -->
<!--
<img src="img/hero-slider/macbook.png" width="782" height="422" alt=""/>
<div class="vide-holder">
<iframe src="//player.vimeo.com/video/79036490?byline=0&portrait=0&color=ffeeac" width="720" height="405"></iframe>
</div>
-->
</div>
</div>
</div>
</div></div><div class="bx-controls bx-has-pager"><div class="bx-pager bx-default-pager"><div class="bx-pager-item">1</div><div class="bx-pager-item">2</div><div class="bx-pager-item">3</div></div></div></div>
</div>
</div>
</div>
<!--Hero Slider-->
<div class=" col-xs-12 col-sm-12 col-md-4 col-lg-3 pull-right" id="hero-right" style="height: 496px;">
<div>
<div>
<div class="animated fadeInLeft">
<h1>Learnosity</h1>
<p>Did you know we are partnered with learnosity?</p>
<p>To learn more click the button below..filler. </p>
<a class="btn btn-primary" href="#">Learnosity</a>
</div>
</div>
</div>
<!--Close Hero Slider-->
</div>
</div>
</section>
This should work
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
.hero {
background: #fff;
border-bottom: 8px solid #7ac9ed;
background: url(j.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
padding-top: 0;
height: 100%;
width: 100%
}
You need to determine screen height for that so its better to use JavaScript
which can be accessed with screen.height. Also if you are using jQuery, you can get this property with $( window ).height();
$(document).ready(function() {
h=$(window).height();
$('.hero').css({'height':h+'px'});
});