I'm using Bootstrap to create my animation portfolio and currently have my sticky header working, but don't know how to fix two issues with it. You can see a working example [here].
Center the header exactly above the content div (right now it has a small offset to it)
Scale header to always take up 10% of the browser vertical size
(optional) Would like the content div to start exactly where the header stops so nothing gets cut off
Here is what my code looks like:
HTML
<div class="container">
<div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
<div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
<img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
</div>
<div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;">
</div>
</div>
</div>
CSS
.header-resize {
height: 10%;
}
Thank you for your help! I'm pretty new to Bootstrap and responsive design, so all this is purely me experimenting and following tutorials. Let me know if I need to explain anything further! :)
Thank you,
Jesse
You forgot to add bootstrap's own ROW div. This will re-center your header:
<div class="container">
<div class="row">
<div class="affix affix-top header-resize" style="position: top; margin: 0 auto; clear: left; height: auto; z-index: 5; text-align: center; background-size: cover; background-color: clear;">
<div class="container" style="background-image: url('img/header-bg.png'); background-size: cover; height: auto;">
<img src="img/logo.png" class="col-xs-8" alt="Jesse J. Jones - Animator/Illustrator/Designer">
</div>
<div class="container" style="background-image: url('img/header-gradient.png'); background-repeat:repeat-x; background-size: cover; height: 20%;"></div>
</div>
</div>
</div>
Related
Seems like this issue is known for few years already.
I tried to apply blurred background to inside elements with class ".blurred-bg" as per this example https://codepen.io/ariona/pen/geFIK . It has one clear-version image applied as background of body element and blurred-version of same image is applied to elements with class .blurred-bg.
Here is my code do you know, what can I try to make it work?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>blurred background sablona</title>
<style>
body {
margin: 0px;
padding: 0px;
background-image: url("https://lh4.googleusercontent.com/-3eBjuQpOGFw/U47yh_-OycI/AAAAAAAAI2U/uaU5pK49N1w/s1600/normal.jpg");
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.blurred-bg {
background-image: url("https://lh3.googleusercontent.com/-m8TxQMObg6c/U474EWu7Y9I/AAAAAAAAI2k/xkRGoIEC1iU/s1600/blur.jpg");
background-repeat: no-repeat;
background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
background-attachment: fixed;
border-radius: 10px;
}
#centered_div {background: red;padding: 10px; text-align: center;color: white}
.LISTS_CONTAINER{
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-x: auto;
justify-content: center;
}
.LIST_WRAPPER {
margin: 20px;
box-shadow:
0 2px 2px 0 rgba(0,0,0,0.14),
0 3px 1px -2px rgba(0,0,0,0.12),
0 1px 5px 0 rgba(0,0,0,0.2);
box-sizing: border-box;
width:; /* width cannot be set, because this div needs to adjust to its content*/
height:; /* height cannot be set, because this div needs to adjust to its content*/
}
.LIST{
grid-gap: 0px;
width: 400px;
height: 305px;
position: relative; /* this needs to stay relative */
background: rgba(0,0,0,); /*change opacity to make div darker*/
border-radius: 10px;
color: white;
font-size: 30px;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="centered_div">
DIVs with blurred background while you scroll.<br>On desktop Safari & Chrome it works, but on mobile the background is no more fixed.
</div>
<div class="LISTS_CONTAINER">
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
<div class="LIST_WRAPPER blurred-bg">
<div class="LIST">scroll down</div>
</div>
</div>
</body>
</html>
Have already tried:
1. attempt: using javascript by adding:
$ (window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.blurred-bg').css('background-position', 'left' + ((scrolledY)) + 'px');
});
and also had to apply background-position: left top to styles for class .blurred-bg .
Tested on tablet and mobile - no success.
2. attempt:
Wrapped all content which is in the body in one parent wrapper, set height to 500px and overflow to auto.
Tested on tablet and mobile - no success.
3. attempt: changing property from backgroundAttachment='fixed'; to backgroundAttachment='scroll'; also did not help.
On desktop it works nicely but on mobile browsers the effect is broken since background-attachment: fixed; is not supported anymore. It demands higher performance which is not good for mobile devices according to what I found online. I have found various workarounds and also many ideas on stack-overflow posts but none of them worked for me. Its already morning and i didn't make it work so maybe you guys have idea.
I too had the same issue. Well sadly, mobile browsers have that feature disabled because it can be too much costly for them. It works on Firefox though.
I thought making my parallax CSS only would make things less laggy, but seems not. If you wanna check out the code and tell me if there's something done poorly, I'd be thankful.
the html:
<div class="parallax">
<div id="up">
<div class="spacer"></div>
<div id="intro">
<h1>A studio made up of </h1>
<h2 class="future-animate"> 1</h2>
<div class="animate"></div>
<h1> person,</h1>
</div>
<div class="spacer"></div>
</div>
the css:
.parallax {
/* The image used */
background: url('bgintro.jpg');
/*sizing height */
height: 799px;
width: 100%;
/* Creating the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
float: left;
display: inline-block;
z-index: -1;
}
#media only screen and (max-device-width:1024px) {
.parallax{
background-attachment: scroll;
}
}
and the fiddle:
https://jsfiddle.net/ovyhttgw/
Thanks in advance.
I have made a website in bootstrap but struggling with a height issue, on two columns.
On the contact page there is two columns below the map. The left is an image and right is some text, would love it if someone could help me get it so they respond at the same height. So the left and right column resize the same way before snapping to full width.
http://reraisedesign.com/contact-us.php
<div class="container-fluid" style="padding: 0; background: #fff;">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 con-img">
<img src="img/contact-us.jpg" width="100%"/>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 con-blurb">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<h1>Say Hello</h1>
<span class="line-left"></span>
<p>We would like to just thank you for taking the time to visit our site, if you would like hear more about ReRaise feel free to give us a call or drop us an email. We would love to hear about any potential projects or queries you may have and will always aim to respond the same day.</p>
<p class="con-dets">0151 705 3414</br>
Send us an Email</p>
</div>
</div>
</div>
</div>
Here is the CSS to accompany the HTML
.con-blurb{
padding-top:100px;
padding-bottom:100px;
}
.con-img{
size:cover;
-webkit-size: cover;
-moz-size: cover;
-o-size: cover;
height: 100%;
}
.con-blurb h1{
text-align: left;
}
Try out this code:
.con-img img{
height: 100%;
max-width: 100%;
width: auto;
}
set the top margin property in .con-img class to margin-top:27px and set div including "say hello" margin-top:-106px
//code
.con-img{
margin-top:27px;
}
//div incluing say hello
.div{
margin-top:-106px;
}
Found a solution that didn't distort:
.con-blurb{
padding-top:100px;
}
.con-img img{
display: block;
max-width: 100vw;
background-size: cover;
height: 50vh;
object-fit: cover;
}
I have a page in which I am using bootstrap for designing. Now I am using grids; I want to keep 8 columns for my image and 4 columns for the text. So i have following code:-
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="bg"></div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
Following is the css for class bg :
.bg {
background-image: url('../images/2.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:690px;
}
Now everything works fine, but I am facing a small problem here where i am checking this in extra small screen, the picture occupies almost the entire screen and for text i have to scroll way to the bottom.
Is there any way to adjust image height(width works perfectly fine) for extra small screens so that image and text can be seen together without much scrolling?
Try using viewport-height in CSS3:
.bg {
height:100vh;
}
do like this.give div class name as img-responsive and set width and height as your need.and put your image inside it and set its width and height like this.
<div class="img-responsive" style="width: 300px;height: 300px;">
<img style="width: 100%;height: 100%" src="http://www.intrawallpaper.com/static/images/1250654-for-laptop-nature.jpg"/>
</div>
if you want text over picture, you can do this:
#media (max-width: 480px) {
.bg {
position: absolute;
left: 0;
width: 100%;
}
}
if you want half top is picture, half bottom is text, you can do this:
html
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="wrap">
<div class="bg"></div>
</div>
</div>
<div class="col-md-4">
hi how are you
</div>
</div>
</div>
css
#media (max-width: 480px) {
.wrap {
position: relative;
padding-bottom: 50%;
}
.bg {
position: absolute;
left: 0;
width: 100%;
height: 100%;
}
}
hope it can help
I am using Twitter Bootstrap and have placed a number of fullscreen background images that were working perfectly. Tonight I added Scrollr to the site and now the background images are all blown up and I can't figure out why?
html
<header id="top" class="header">
<div class="container text-vertical-center">
<div class="row">
<div class="center-block">
<div class="padded" style="border: 1px solid white">
<h1 class="title text-uppercase"><font color="#FFFFFF">Language</font></h1>
</div>
</div>
</div>
<div class="row">
<div class="scroll">
<i class="icon-double-angle-down icon-large"></i>
</div>
</div>
</div>
</header>
css
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/test.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
I have also added height and width to the html and body tags at the top of my css.
html,
body
#skrollr-body {
width: 100%;
height: 100%;
}
Any ideas...?
Sorry, can't to add comment. Can you describe how it looks now? At first look it seems all is well. Maybe try ro change your position for absolute or fixed