I have a webpage with a navigation div (class="top-section") at the top followed by some other div (class="display"). I want that the scroll bar on the right starts below the top-section class so that the full width is taken by the div in the top-section.
Here is the image
The CSS for the two divs is here
.top-section{
background-image: url('images/landscape-image.jpg');
background-size: cover;
position: fixed;
top: 0;
z-index: 2;
}
.display{
background-size: 100% 100%;
padding-bottom: 5vh;
margin-top: 7.5vh;
margin-bottom: 5vh;
min-height: 100vh;
}
The body is structured as
<body>
<div>
<div class="col-12 top-section">
</div>
<div className="display col-11 col-md-9 col-lg-7 mx-auto">
</div>
</div>
</body>
Thank You
One possible solution is to have a parent and child heirarchy.
Solution
Make a parent div having
background-image: url('images/landscape-image.jpg');
background-size: cover;
top: 0;
Make two children divs, first one with header having the
position: fixed;
z-index: 2;
top: 0;
height: 2vh;
The second one with class display having
height: 98vh;
overflow-y: scroll;
Related
Hi guys i am trying to create this effect with bootstrap 3 :
The black color being a random image and then just a white strip on were I can put my text etc.
So far I have this :
HTML:
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
CSS
.parallax {
background-image: url("../img/c.jpg");
min-height: 1000px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
width: 800px;
}
However no matter what I change the width to for the container , it does not become smaller just the text inside of it does.
So again I am just looking to have a background image cover the whole browser and then just a white strip coming down but the width to be around 800px; so it leaves gaps on the side to see the image in the background
You can make use of min-width and max-width on container class. This ensures that when your browser is resized the sides are still visible by setting the width of the container to a relative (%) value. And the max-width limits it from extending beyond that. You can position the container using transform property in CSS and make an animation for the container to come from top and set its position to the vertical center of the webpage.
As far as the background is concerned, you can set the width or height to 100vw, 100vh or even % as you find suitable. This is just a demonstration.
.parallax {
background-image: url("http://via.placeholder.com/300x100");
height: 100vh;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: -300px;
background: white;
color: black;
min-width: 70%;
max-width: 800px;
height: 100px;
text-align: center;
animation: expand 2s linear forwards;
}
#keyframes expand {
0% {}
100% {
top: 50%;
transform: translate(-50%, -50%);
}
}
<div class="parallax">
<div class="container">
<h1> Testing </h1>
</div>
</div>
html
<div class="parallax">
<div class="cont">
hellowold
</div>
</div>
css
.parallax {
width: 100%;
height: 500px;
position: relative; // this is necessary
background: #000;
}
.cont {
position: absolute;
width: 100%; // for responsive it will take 100% width
max-width: 800px; // for bigger screen it will be max 800px
padding: 15px; // just for decoration
background: #fff;
box-sizing: border-box;
margin: 0 auto; // absoluted element center purpose
bottom: 0; // positioning at the bottom as per your image
left: 0; // absoluted element center purpose
right: 0;// absoluted element center purpose
text-align: center; // just for decoration
}
Im trying to center a profile picture-like image over my parallax background img, but it is staying in the top left corner of the background img. I want to get it in the center
.natecontain {
text-align: center;
}
.ohwow {
width: 30%;
display: block;
margin: 0px auto;
position: absolute;
z-index: 10;
}
.parallax {
/* The image used */
background-image: url("https://placehold.it/1500x1000");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="natecontain">
<img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>
<div class="parallax"></div>
your image with class 'ohwow' has position:absolute. margin: 0 auto; will not work with absolute positioned element. So please remove position:absolute and i hope it will work.
second option with position: absolute.
Apply left and top offsets 50%. and add margin-top: "-half height of image" and margin-left: "-half width of image". for example if the image size is 200w X 100h, then the margin can be margin: -50px 0 0 -100px;
try below code
.natecontain
{
text-align: center;
}
.ohwow
{
background-color: red;
width: 200px;
height: 100px;
display: block;
position: absolute;
z-index: 10;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
}
.parallax {
/* The image used */
background-image: url("nban.jpg");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="natecontain">
<img src="me.jpg" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow"/>
</div>
<div class="parallax"></div>
please use
background-position: center center; instead of background-position: center; also add some content in your container so that some result can be seen
If you want to center align any absolutely positioned element you whould be offsetting its position using left and right properties (for horizontal alignment) and top and bottom properties (for vertical alignment).
NOTE: for vertical center alignment, you must declare display: block; margin: auto; in addition to top: 0; bottom: 0;
To scale your elements more gracefully (with the viewport), you should nest your absolutely positioned element within the relatively positioned parallax element. This will also make the vertical & horizontal alignment precise as these values are now offset relative to the containing parent element (which is positioned relative).
In other words absolute elements are positioned relative to its closest/nearest relative containing parent element.
html, body {
height: 100%; /* So we can see what's happening here */
}
.natecontain { /* This element is now redundant for the purposes of this demonstration and can be removed */
text-align: center;
}
.ohwow {
width: 30%;
display: block;
margin: auto; /* adjusted for veritcal center alignment */
position: absolute;
z-index: 10;
border: 1px dashed #868686; /* just so we can see the image better */
/* center horizontally */
right: 0;
left: 0;
/* center vertically */
top: 0;
bottom: 0;
}
.parallax {
/* The image used */
background-image: url("https://placehold.it/1500x1000");
/* Set a specific height */
min-height: 60%;
max-height: 60%;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
z-index: 1;
}
<div class="parallax">
<!-- Nest your absolute element within a relative positioned parent element so that the offset properties for left, right, top and bottom are relative to this containing element -->
<img src="https://placehold.it/500x300" alt="Oh Wow (Owen Wilson Voice) Its Nate" title="Look at this doooood." class="ohwow" />
</div>
here's the site. If you resize the window to a smaller size. You'll notice there's a bottom margin/padding caused by
.carousel-inner {
background-color: #03324c;
}
I could remove that but the indicators won't be visible and there will be an empty gap at the bottom . I know that that the images have different size, I tried resizing, same issue. I have tried many things for 2 days, nothing worked.
.carousel-inner {
background-color: #03324c;
}
.carousel-inner img {
margin-left: auto;
margin-right: auto;
margin-top: auto;
opacity: 0.7;
width: 100vw;
height: auto;
max-height: 100vh;
bottom: 0;
}
.carousel-caption h3 {
color: #fff !important;
}
You'd be better off using a background-image combined with background-size:cover on the .item elements.
For example, your first item would change to this (just remove the img tag):
<div class="item" style="min-height: 710px;">
<div class="carousel-caption">
<h3>New York</h3>
<p>The atmosphere in New York is lorem ipsum.</p>
</div>
</div>
And the styling for the corresponding .item element would be this:
.item {
background-image: url(images/medium/quote.png);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}
#feihcism, I immediately agree with your comment, then I had to make the image 100% whatever its parent is and believe me. it works
.carousel-item img {
position: absolute;
object-fit:cover;
top: 0;
left: 0;
min-height: 100%; // I mean this!
}
I´m a CSS beginner. I´ve got two separate containers which should have one background image. I'm using z-index but I don´t know how to make it work.
<!-- Background Image -->
<div class="bg-img"><img class="img-responsive" src="images/bg/bgtriangle.png">
<!-- First Container -->
<div class="container-main">
<p class="font-relative">Headline 1</p>
</div>
<!-- Second Container -->
<div class="container-fluid" style="background-color: #574c5d; border-top: 2px solid #e57e22;">
<h4 class="text-center" style="padding: 5px;">Headline 2</h4>
</div>
</div>
The CSS is:
.container-main {
width: 100%;
height: 100%;
padding-top: 70px;
padding-bottom: 15px;
background: #453a4b;
background-size: cover;
z-index: 1;
}
.container-fluid {
width: 100%;
height: 100%;
position: absolute;
z-index: 2;
}
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
z-index: 0;
}
How can I use this one bg-image in full width for two containers? Is that possible?
You need to set your image to the background-image of your bg-img instead of adding it as an HTML img element. Also, you do not need z-index at all for this - they can be removed from your CSS.
.bg-img {
position: fixed;
width: 100%;
height: 100%;
background-size: cover;
background-image: url('images/bg/bgtriangle.png'); /* This */
}
EDIT:
If you want to move the background of the divs behind the background image, while keeping the content above it, you are going to get into a bit of a messy situation. You can do this by removing the contents from the divs, and then positioning all of them as absolute and using z-index (-1 behind image and 1 in-front of image). However, this means that you have to use top/left/etc. to position the contents back into their divs.
Here is a demo of what I accomplished tinkering a bit, maybe it will be helpful to you.
I have managed to get the button image in place correctly but now the positioning is all off.
I want it to be centered as this image shows:
What I have so far is here: http://codepen.io/anon/pen/snjCu.
I am trying to position the image inside the center of its column so that it is correctly in place when the screen is larger.
Any help is appreciated.
<footer>
<div class="banner">
<div class="container-fluid">
<div id="footer-controls" class="text-center">
<div class="col-xs-4"><i class="fa fa-picture-o"></i>
<span>GALLERY</span>
</div>
<div class="col-xs-4">
</div>
<div class="col-xs-4"><i class="fa fa-file-text-o"></i>
<span>LEGAL</span>
</div>
</div>
</div>
</div>
</footer>
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;;
top: -50px
}
You can adjust the position of the image with a CSS transform
Codepen Demo
footer #footer-controls .orange-button {
background: url('http://i.imgur.com/lmB72tf.png') no-repeat;
width: 215px;
height: 210px;
background-size: 100%;
position: absolute;
top: -50px;
left:50%; /* push the image half-way over */
transform:translateX(-50%); /* bring it back half its own width */
/* or margin-left: -50% of image width */
}
Although not desirable, I've found that giving the column and the orange-button fixed width styles will solve this issue.
.orange-button {
background-image: url('http://i.imgur.com/lmB72tf.png');
background-repeat: no-repeat;
background-size: 215px 210px;
display:inline-block;
width: 215px;
height: 210px;
Usually you can center background images with:
background-position: center center;
This is actually the default value.
However your container with the image is not centered.
You may wanna consider repositioning the container and trying somthing else than position: absolute;