I am trying to create a grid layout in conjunction with parallax. I have a div element (in Parallax below) which has a grid layout defined in CSS, containing three sub div elements. The second div has a background style applied to it, but the style is being applied across all divs.
I am basically trying to have a white box displayed in the middle of the page, which scrolls with the help of parallax, while currently I have a white stripe displayed across the entire page.
Is this feasible?
.parallax {
background-image: url('image.jpg');
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.inParallax {
display: grid;
grid-template-columns: auto auto auto;
}
<div class="parallax"></div>
<div class="inParallax">
<div></div>
<div style="height:200px;background-color:white;">
<p>Text</p>
</div>
<div></div>
</div>
Related
So when I try to define the background-image for the below html:
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
like so in css:
#generalButton{
background-image:url(files/gss.png);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
}
nothing shows up.
However, if I keep the css the same and add an image to the html like so:
<div class="generalVideo">
<div id='generalButton'> <img src="files/gss.png" alt="">
</div>
</div>
So you can see the two images overlapping on each other in different positions. If I deleted the background-image from the css, the img in the html also disappears. Why is this happening?
In the first instance there are no dimensions for the background-image to take up so nothing shows.
In the second instance the img is an element within the HTML and in the absence of any other styling it shows at its 'natural' dimensions.
Also, by default, the parent div will take on width and height: auto so essentially the img gives it some width and height. So the background-image also has some dimensions to work with and can be set up at 70% as required.
To get just a background image to show you need to tell the system a width and height. This snippet gives it a square in terms of vmin units:
#generalButton {
background-image: url(https://picsum.photos/id/1015/200/300);
background-position: center center;
background-repeat: no-repeat;
background-size: 70%;
background-color: pink;
width: 50vmin;
height: 50vmin;
}
<p> background-image only, no img element: </p>
<div class="generalVideo">
<div id='generalButton'>
</div>
</div>
Note: the div has been given a background color too so it's size is obvious.
They overlap because the background-image is centered and the img-tag is not.
You need to set a width and height on the div if you only want to use the div.
#generalButton {
background-image:url(https://picsum.photos/200);
background-position:center center;
background-repeat: no-repeat;
background-size: 70%;
height: 200px;
width: 200px;
}
<div class="generalVideo">
<div id='generalButton'>
<img src="https://picsum.photos/150" alt="">
</div>
</div>
I am trying to have a Bootstrap Jumbotron that contains 2 background images. The general idea is as illustrated in the attached image. At the bottom layer is a full width photo (indicated in gray) and on top of it is a transparent PNG (indicated in yellow). The height of the Jumbotron is set at 350px, which is for the full-width photo. Having said that, I would like to top layer to go beyond 350px so it is overlapping the text in the div below the Jumbotron. How would you suggest me to achieve this?
Example
I have some HTML markup as follows:
<body>
<section class="jumbotron">
<h1>Tag line in a Bootstrap Jumbotron</h1>
</section>
<section>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet,...</p>
</section>
</body>
I have the following CSS:
.jumbotron {
background-image: url("top.png"), url("bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
height: 350px;
}
With these codes, I am able to stack the 2 background images properly so that the transparent top layer is sitting nicely on top of the bottom layer. However, I do not know how I can make the top layer go beyond the 350px such that it can overlap the text below.
Any suggestion will be greatly appreciated. Thanks!
* UPDATE *
So I attempted in answering my own question. I made some progress but the solution does not seem complete. Here's what I did...
I added an additional div to only hold the top transparent PNG layer and use negative margin to push it up to cover the jumbotron. But when I did that, the tagline in the jumbotron can no longer be highlighted/selected. It appears as if the top transparent PNG layer is covering it up. I tried playing with z-index but that didn't help. Here's my updated HTML:
<body>
<section class="jumbotron">
<h1>Tag line in a Bootstrap Jumbotron</h1>
</section>
<section class="container-fluid">
<div class="row">
<div class="png-layer"></div>
</div>
<div class="content row">
<div>
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet,...</p>
</div>
</div>
</section>
</body>
Updated CSS:
.jumbotron {
background-image: url("bottom.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
height: 350px;
}
.png-layer {
background-image: url("top.png");
height: 500px;
margin-top: -350px;
}
.content {
margin-top: -200px;
}
Any ideas on how to fine-tune to solution to make it to perfection? Thanks!
The best approach is (in my opinion and as you correctly pointed out in the update to your question) to create a div that exclusively holds the .png you want to overlay on top of the Jumbotron and the text. The CSS of this element should include:
z-index:xxxx; where xxxx is whatever value allows your div to be shown on top of the image you intent to use as a background (i.e. higher than its containing div) but lower than the text you want it to appear under. Also remember that z-index works only on elements for which you have defined the position attribute.
pointer-events: none; so that you can still select the text below it.
Good luck.
I am using bootstrap frame work and using the jumbotron feature to create my header. I have a fixed navigation and want the jumbotron to be the full height and width of screen when scaled. I have content underneath the jumbotron that I want scrollable like regular. Just when someone gets to site its fullscreen jumbotron
html
<div class="jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
css
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
height:100%;
}
purii's answer is perfectly acceptable, however I'd opt for a slightly different approach when targeting the jumbotron BootStrap class:
HTML:
<div class="fullheight jumbotron row">
<header>
<div class='navbar ........
... paragraph content ...
</div>
CSS:
.fullheight.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}
As you can see I placed a new fullheight class (can be any class name of course) within the "jumobtron" <div>. I then used that class name along with the jumbotron class as the selector for CSS styling.
The benefits of doing it this way is that it ensures that if you chose to use <div class="jumobtron"> on another page in the future, you can still use BootStrap's default styling for this class.
There are multiple ways to solve your problem. The most straight forward would be the usage of viewport units to scale your height. They are supported at least by IE >= 9.
.jumbotron {
position: relative;
background: url('../img/pexels-photo.jpeg') no-repeat center center;
background-size: cover;
min-height:100vh;
}
I'm using JSSOR image gallery and currently it is stretching portrait images.
I have made a css class where it is no longer stretching:
However I can't get the imace centered in the div.
<div>
<div class="portrait" u=image style="background-image: url(../img/zachry/1.jpg"> </div>
<div u="thumb"></div>
</div>
Here is the CSS?
.portrait {
position: relative;
width: 850px;
height: 565px;
background-repeat: no-repeat;
text-align: center;
}
How can I get the image centered?
You are using an image as a background from a div.
Almost any element has an attribute called: background-position which can take center as value to center the image given into the middle from the element.
so it could be something like:
.portrait {
...
background-position: center;
}
Using the following code in your CSS should work:
background-position: center;
I think of two possible ways....
div {background-position: center;}
div {margin-left:auto; margin-right:auto;}
as an excercise i decided to delve in to css layout styling and am already failing to see why my layout is not aligning correctly. also why is the container div only appearing when there some text in there. i thought it would display and grow based on the background property in css statement. i have done screengrab to show problem. can someone show my error. thanks
screen grab: http://imageshack.us/photo/my-images/21/containergrabnew.png/
css
#container {
width: 800px;
margin: 0 auto;
background-image: url(../images/container-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerLeft {
width: 475px;
float:left;
background-image: url(../images/container-left-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
#containerRight {
width: 300px;
float:right;
background-image: url(../images/container-right-bg.gif);
background-position: center center;
background-repeat: repeat-y;
}
html
<div id="container">
This is the container
<div id="containerLeft">
This is the left container
<div id="containerRight">
This is the right container
</div></div>
</div>
am already failing to see why my
layout is not aligning correctly
Your HTML is not nested correctly. Change it to this:
<div id="container">
<div id="containerLeft">
This is the left container
</div>
<div id="containerRight">
This is the right container
</div>
</div>
also why is the container div only
appearing when there some text in
there. i thought it would display and
grow based on the background property
in css statement.
You need to clear your floated elements.
You can do this by adding overflow: hidden to #container.
You should read this article for more information: http://css-tricks.com/all-about-floats/
It discusses why this happens, various ways to fix it, and includes useful and relevant information about floats in general.