I have a problem with my site. I am using Skrollr to display one image and a text on this image. The text fades out and the image has some nice effect. First I used Foundations as a framework, but this doesn't work for me. So I switched to Bootstrap. Now I have the issue that my body height is set to 2157px. I don't know why, but on pages without Skrollr this doesn't occur. For me it seems like Skrollr is the problem. I used the following code:
<section id="slide-1" class="homeSlide">
<div class="bcg"
data-0="background-position: 0px 0px;"
data-300="background-position:0px -200px;"
>
<div class="hsContainer">
<div class="hsContent container"
data-0="opacity:1;"
data-500="opacity:0;"
>
Lorem ipsum
</div>
</div>
</div></section>
My Css is:
.hsContainer {
display: table;
table-layout: fixed;
width: 100%;
max-height: 50%;
overflow: hidden;
position: relative;
opacity: 1;
}
.hsContent {
font-size:5vw;
max-width: 450px;
margin: -150px auto 0 auto;
display: table-cell;
vertical-align: middle;
color: #ebebeb;
padding: 13% 8%;
text-align: center;
text-shadow: 0 0 5px #333;
}
.bcg {
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 45vw;
width: 100%;
}
I don't see, where the problem comes from. Does anybody have an idea?
Yes, it is skrollr that is causing that issue as an effect of its parallax calculations. You can pass in forceHeight=false as an option when you initialize skrollr, like so:
var s = skrollr.init({
forceHeight: false
});
And it will then leave your <body> height alone.
Related
I am trying to accomplish placing two parallax background-images side by side while keeping their aspect ratio. The issue I am running into is that each image appears to be getting cut in half vertically. I have tried using different values in both background-attachment and background-size to no avail. Removing background-attachment: fixed; from the code below fixes the aspect-ratio issue but loses the parallax effect. Does anyone know how to accomplish both simultaneously?
.image-left {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
width: 50%;
float: left;
height: 500px;
background-attachment: fixed;
background-position: center;
background-repeat: none;
background-size: cover;
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="image-left"></div>
<div class="image-right"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
Fiddle for above code here.
I have also attempted to use the jQuery function from this post but was unable to get it to work with side by side images. (see fiddle)
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('#container').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
As others pointed out, I don't think you can achieve your goal via background images...
So I tried another approach that consists basically on:
- Having two sections: one for the images, another for the content.
- As for the images, wrap them into an element and use position fixed. They are positioned at the very top of the element, should you want to change this, you can play with top property.
- As for the content, both regions are also wrapped in a container with position absolute.
- The content at the bottom will be responsible for the 'breathing' space in the images, so, you need to play with margin-top to achieve desired results.
Some considerations:
- The given example works at the moment only on desktop, tested on fulls screen laptop (around 1680px width).
- If you shrink the screen, everything goes really bad, thus, you will need to adjust all measures for mobile via media queries.
- The bottom element have a min-height attribute just for demonstration purposes.
All given, I'm not quite sure if this is something I would recommend.
Can you actually merge both images into one? This way, you can just use the background approach, and this development would not be needed.
What I don't like about my approach, is that it contains a lot of fixed values on positions, and eventually, this would introduce maintainability issues.
I hope it helps!
.image-wrapper {
position: fixed;
top: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
}
.image {
width: 100%;
}
.content-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.content-bottom {
margin-top: 300px;
min-height: 1000px;
}
<div class="image-wrapper">
<img class="image" src="https://www.gstatic.com/webp/gallery/1.webp">
<img class="image" src="https://www.gstatic.com/webp/gallery/2.webp">
</div>
<div class="content-wrapper">
<div class="content">
<h1>Lorem</h1>
</div>
<div class="content content-bottom">
<h2>Ipsum</h2>
</div>
</div>
As avcajaraville pointed out, the best approach is to have a container for the images with position fixed.
Here is my solution, using this idea, but working without needing size adjustments
Note that since now the images cover only half the width of the screen, they will cover also half the height. This could be fixed having images in portrait mode. To get a more nice result with the current images, I have added another row of images, now with the order reversed (visible only for some screen ratios)
.images {
position: fixed;
width: 100%;
z-index: -1;
}
.images div {
display: inline-block;
width: 49%;
margin: 0;
height: 500px;
background-position: center;
background-size: cover;
}
.image-left {
background-image: url('https://www.gstatic.com/webp/gallery/1.webp');
}
.image-right {
background-image: url('https://www.gstatic.com/webp/gallery/2.webp');
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
.filler {
height: 500px;
}
<div class="images">
<div class="image-left"></div>
<div class="image-right"></div>
<div class="image-right"></div>
<div class="image-left"></div>
</div>
<div class="content">
<h1>Lorem</h1>
</div>
<div class="filler"></div>
<div class="content">
<h1>Ipsum</h1>
</div>
.flexrow {
display: flex;
flex-flow: row wrap;
}
.flexrow > .image {
flex: 0 1 50%;
min-height: 350px;
background-size: 100%;
}
.img1 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/1.webp') no-repeat center center fixed; ;
}
.img2 {
background-size: cover;
background: url('https://www.gstatic.com/webp/gallery/2.webp') no-repeat center center fixed; ;
}
.content {
text-align: center;
padding: 100px 30px;
font-size: 1.25rem;
color: #fff;
background-color: orange;
}
<div class="content">
<h1>Lorem</h1>
</div>
<div class="flexrow">
<div class="image img1"></div>
<div class="image img2"></div>
</div>
<div class="content">
<h1>Ipsum</h1>
</div>
think this is what you're looking for, remember that min-height property on images may break this aspect ratio when no space are available (on resize, low res).
Most likely a css problem, the images I'm using as backgrounds for each page are repeating & varying in size. The homepage is the only completely functional section.
Here's a live example: http://athenatestingwebsite.tumblr.com/
And here's my html:
<div id="PROJECTSP">
<a id="projects" class="smooth"></a>
</div>
<div id="CONTACTP">
<a id="contact" class="smooth"></a>
</div>
and here's some of my css:
body {
height: 1000px;
}
#projectsp {
height: 1000px;
width: 100%;
background-color: #0a0b38;
display: inline-block;
text-align: center;
background: url("http://i.imgur.com/rrmPP7E.png");
}
#contactp {
height: 1000px;
width: 100%;
height: 100%;
background-color: #0a0b38;
display: inline-block;
background: url("http://i.imgur.com/s9gGzHO.png");
}
background-repeat-y: no-repeat;
add this line after every background image you set. remove
body height,width remove all #id height 1000px or 2000px you set..set height auto.
add this class
div.slogan h1 {
margin: auto;
}
hope all will be fix. without the nav overlay.
Happy Coding . Good luck
I recently have created this banner for my website, but I realized that I only want the main part of my site to be 900px long. However, I want the banner to run off the page, but have the part where it runs off be darkened (through opacity). So, this means, I need to make the image of my site positioned in the middle. Here is what I developed so far:
https://jsfiddle.net/h3w89t9y/4/
As you can see, this doesn't really get what I need. Here's the issue:
.banner {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
The banner isn't 800px. If I add in a width of 800px, it will go to the middle just like I wanted. However, the image will be limited to only be 800px long rather than overflowing off of 800px.
This is what I'm trying to get it to look like:
https://i.gyazo.com/c38cae7bd34379477a6fcc8eeb160c22.png
How do I make it to where my banner is centered to the middle, but has the sides overlapped with opacities?
You can achieve what you want using pseudo like this:
body {
margin: 0;
}
.wrapper {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat center;
width: 100%;
}
.wrapper:before, .wrapper:after {
content:'';
width: calc((100% - 900px) / 2); /*setting the width to the 100% minus your desired header's width / 2 so it will occupy the rest of your content*/
height:185px;
position: absolute;
top: 0;
background: rgba(0, 0, 0, 0.3); /*set the desired opacity*/
}
.wrapper:before {
left: 0;
}
.wrapper:after {
right: 0;
}
.banner {
width: 900px;
height:185px;
margin: 0 auto;
}
<div class="wrapper" style="">
<div class="banner"></div>
</div>
So the idea is your pseudo elements occupy the rest of the content and setting them your desired transparency, notice that in this way you also can set them blur or whatever filter that you want.
Here a working jsfiddle to play with
You can't control opacity of a single background like that, you need another element. For example:
.banner, .bannert {
background:url(https://i.gyazo.com/74f0fa6b9d9ed6652f3e220ceae113cf.png) no-repeat;
background-position: center;
margin: 0 auto;
height:185px;
}
.banner {
max-width: 800px;
position: absolute;
left: 0;
right: 0;
top: 0;
}
.bannert {
background-repeat: repeat-x;
opacity: 0.5;
}
<div style="width: 100%; background: black; padding: 1px;position: relative;">
<div class="bannert"></div>
<div class="banner"></div>
</div>
https://jsfiddle.net/h3w89t9y/6/
Try this; add two divs first, one for the left side, and one for the right,hence you can apply your desired opacity to them and make the banner sides filtered, look at the snippets below;
HTML
<div style="width: 100%; padding: 1px;">
<div class="banner">
<div class="trans_right"></div>
<div class="trans_left"></div>
</div>
</div>
CSS
.trans_right {
padding: 2rem;
width: 13%;
float: right;
background: rgba(71,67,255,0.9);
height: 65%;
}
.trans_left {
padding: 2rem;
width: 13%;
float: left;
background: rgba(71,67,255,0.9);
height: 65%;
}
I'm really not sure if there is a better way to do this, but it gives you what you're looking for, checkout the link:
Transparent Sides
I am trying to make following image and text responsive so that when it scale it looks similar to the following.
http://i58.tinypic.com/6q9kpe.png
However when I scale it down it looks scale to this.
http://i57.tinypic.com/s60mjm.png
I have found one solution here.
However it is not compatible with all the browsers. It is using vw for font which is not yet even released as a standard.
The other solution is this. But for some reason it does not work for me.
My HTML looks like this.
<div class="red-arrow-bg">
<div class="text-left">
<h1>Step 1</h1>
</div>
</div>
And the CSS
.red-arrow-bg{
background: #EEE url("../img/step-bg-arrow-red.png") no-repeat;
width: 100%;
background-position: left -71% center;
cackground-size: contain;
padding: 2% 0;
position: relative;
overflow: hidden;
width: 100%;
}
.text-left {
padding: 30px 0;
}
.text-left h1{
line-height: 150%;
position: absolute;
bottom: 8px;
color: #FFF;
margin-left: 26%;
}
The vertical repetition of the background image in both sidebars on each side of the page stops where the computer screen ends, not where the page ends. As you can see, I have already tried to make all parents height: 100% in CSS, but it doesn't work. How do I make the image repeat itself till the bottom of the page?
HTML:
<body>
<div class="sidebar" id="sidebar1"></div>
<div id="content">
</div>
<div class="sidebar" id="sidebar2"></div>
</body>
CSS:
html, body {
min-height: 100%;
min-width: 100%;
}
#content {
min-height: 100%;
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.sidebar {
min-height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
#sidebar1 {
background: url(image.png) repeat-y bottom left;
background-size: 125px 125px;
}
#sidebar2 {
background: url(image.png) repeat-y bottom right;
background-size: 125px 125px;
}
Here's a similar question with a very detailed answer which suggest to use a css3 feature called Viewport Percentage Length as in :
height:100vh;
Please refer to that answer which includes explanations on when this can be used and what browsers support it, to see if it can help to you. There are other answers worth a look to achieve the same kind of effect without setting the height.
you can solve it with javascript (jQuery). resize your sidebars after page loaded. for example:
$(document).ready(function(){
if($('#content').height()>$('#sidebar1').height()){
$('#sidebar1').height($('#content').height());
$('#sidebar2').height($('#content').height());
}
});
(I didn't try it, but I think it works.)