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.
Related
CSS background image is not showing.
This is my html code:
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
</div>
css code
.b-g{
background-image: url(../images/bg/trading.jpg);
width: 100%;
}
add some height to div it'll show
.b-g{
background-image: url(https://pbs.twimg.com/profile_banners/1285511592/1470391779/1500x500);
background-size: contain;
background-repeat: no-repeat;
height: 300px;
}
<div class="container-fluid p-c b-g">
<div class="row">
<div class="col-sm-12 text-infom">
</div>
</div>
</div>
May be your keeping file path is wrong, check file loading or not by inspect in browser.
<style type="text/css">
.b-g {
background-image: url("http://tipsforbeauties.com/gallery_gen//5c5f13b27a80afa16ca4184aec9a26c1_324.7619047619x220.jpg");
width: 100%;
}
</style>
<div class="b-g">
</div>
For fit image to background (element, body or whatelse):
.b-g {
padding: 0px;
background-image: url(../images/bg/trading.jpg);
width: 100%;
height: 100vh;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Or you can add background-size property (remove width property).
background-size: 100% 100%;
And last one you can use like this:
background-image: #000 url('../images/bg/trading.jpg') repeat center center;
I have some simple HTML and CSS code where I want to have a div with class container and this div need to have a img as background. Inside that parent div I have a dive with class row and inside it I have 2 div classes :class="col-md-3" and col-md-9.
The problem is that now the child divs are not showing container div.
In other words I want my container div be the background and everything is displayed on top of it.
Any suggestions?
HTML:
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>here is test for the me</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
CSS:
body, html {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
width: 100%;
height: 100%;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("../images/backg.png");
background-size: contain;
background-repeat: no-repeat;
padding-top: 66.64%;
/* (img-height / img-width * width) */
/* (853 / 1280 * 100) */
}
Actual result:
You mean something like this?
Set your container height: 100vh;
and delete the padding, it pushed the divs to the bottom
#charset "utf-8";
/* CSS Document */
body,hmtl{
background-color: #071a0f;
margin: 0;
}
h1{
color: aqua;
}
.bckgroud{
width: 100%;
height: 100vh;
background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
background-size: contain;
background-repeat: no-repeat;
}
<div class="container bckgroud">
<div class="row">
<div class="col-md-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-md-9"></div>
</div>
</div>
Something like this, perhaps:
body {
background-color: #071a0f;
}
h1 {
color: aqua;
}
.bckgroud {
height: 100vh;
background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
background-repeat: no-repeat;
}
body, html {
color: white !important;
}
.bckgroud{
background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
background-size: cover;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
<div class="row">
<div class="col-3">
<h1>
here is test for the me
</h1>
</div>
<div class="col-9">
Foo
</div>
</div>
</div>
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
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>