I'm attempting to have several overlapping divs that are then selectively displayed through scrolling. This can already be accomplished with images using background-attachment: fixed, but I'm looking for a solution that can work with any child element.
A working example of the desired effect with images:
.main {
position: relative;
height: 100vh;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
width: 100vw;
overflow: hidden;
background-size: cover;
background-attachment: fixed;
background-position: center;
}
<html class="overflow-hidden">
<head>
<link rel="stylesheet" href="/public/tailwind.css">
</head>
<body class="main">
<div class="scroll-block" style="background-image: url(http://placekitten.com/500/500)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/400/400)">
</div>
<div class="scroll-block" style="background-image: url(http://placekitten.com/300/300)">
</div>
</body>
</html>
I tried simply putting a fixed/absolute div inside the scrollable blocks and setting overflow: hidden, but the overflow property has no effect on fixed/absolute divs. Is there any way to achieve this with CSS?
clip-path can help you here:
body {
position: relative;
height: 100vh;
margin: 0;
overflow-y: scroll;
}
.scroll-block {
height: 100vh;
clip-path: inset(0);
}
.scroll-block > * {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align:center;
padding:20px;
}
<body class="main">
<div class="scroll-block">
<div>
<img src="http://placekitten.com/500/300">
<h2>title1</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/400/400">
<h2>title 2</h2>
</div>
</div>
<div class="scroll-block">
<div>
<img src="http://placekitten.com/300/300">
<h2>title 2</h2>
</div>
</div>
</body>
Related
How do I add all the texts and buttons to display on the background img not below it?
Using Bootstrap 5.
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="img/Landing.jpg" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
CUSTOM CSS
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
background-image: url('img/Landing.jpg');
min-height : 100%;
min-width : 100%;
background-size: 100% 100%;
background-repeat:no-repeat;
overflow-y: hidden;
overflow-x: hidden;
}
/* BG IMAGE*/
.landingPageBack {
background-image: url('https://images.unsplash.com/photo-1637593755675-c38c18661a86?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1935&q=80');
background-size: cover;
background-repeat: no-repeat;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<section class="landingPageBack">
<div class="vh-100 vw-100 d-flex justify-content-center align-items-center">
<div class="text-center text-white">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</section>
<!-- begin snippet: js hide: false console: true babel: false -->
Please check the code, Hope it will help you.
Here are some links you should go through:
https://getbootstrap.com/docs/5.1/utilities/flex/
https://getbootstrap.com/docs/5.1/utilities/sizing/#relative-to-the-viewport
Make the wrapped container div position: relative. Then you can place the image inside and a text Block element. The text-blockelöement must be position: absolute. With the css attribute top and left, bottom, right you can position the text on the image.
/* Container holding the image and the text */
.container {
position: relative;
text-align: center;
color: red;
font-size: 5rem;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="container">
<img src="https://via.placeholder.com/500/green" alt="Snow" style="width:100%;">
<div class="centered">Centered</div>
</div>
And for your example, you would only have to adjust your two classes a bit.
/* BG IMAGE*/
body html {
margin: 0;
padding: 0;
}
.landingPageBack {
position: relative;
}
.text-center {
position: absolute;
top: 50%;
left: 40%
}
.landingPageBack {
background-image: url('https://via.placeholder.com/500/green');
background-repeat: no-repeat;
background-size: 100%;
}
<div class="container-fluid">
<div class="row landingPageBack img-responsive">
<img src="https://via.placeholder.com/500/green" alt="">
<div class="text-center">
<h1>WELCOME</h1>
<h2>write me a msg</h2>
CONTACT ME
</div>
</div>
</div>
the background image of my web doesn't fill all the height of the window when there isn't enough content, here is a example:
Without content:
With content:
here is the app.component.html:
<body>
<!-- Background -->
<div class="bg">
<!-- nav -->
<app-navbar></app-navbar>
<!-- Logo -->
<div style="text-align:center">
<img width="200" alt="BookCloud Logo" [routerLink]="['/books']" src="../assets/logo3.png">
</div>
<!-- App -->
<div class="container">
<app-alert></app-alert>
<router-outlet></router-outlet>
</div>
</div>
</body>
and here is the app.component.css:
.container {
width:100%;
height:100%;
}
img {
outline: none;
}
html, body{
height: 100%;
}
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: cover;
}
What im doing wrong? Thanks for reading.
You css should be
.bg{
position: relative;
display:block;
background: url('../assets/bg.jpg') no-repeat center center fixed;
background-size: 100% 100%;
}
If that doesn't work, change .bg to body.
I am using Bootstrap and have a layout similar to this:
<div class="container stamp">
<div class="row">
Some header text
</div>
<div class="row" style="background-color:black">
More header text here
</div>
<div class="row">
More text
</div>
</div>
I've set the background image that overlaps all the three rows
.stamp {
background-image: url('img/hugestamp.gif');
background-repeat: no-repeat;
background-position: left top;
}
The hugestamp.gif spans across all the three rows but the second row has the background color of black, so part of the image is cut off. How do I make the image show up on top of the background color (maybe z-index?) on the 2nd row?
EDIT: I cannot make the colored row transparent. I am trying to achieve the styling here:
In the image, you can see the 3 rows and how the image is shown on top of the colored row
Try this code
Image over colored row
.stamp {
background-image: url('http://imgh.us/new-google-logo-knockoff.png');
background-repeat: no-repeat;
background-position: 0 -69px;
background-size: 100% auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.container{
position:relative
}
<div class="container">
<div class="row">
Some header text
</div>
<div class="row" style="background-color:black">
More header text here
</div>
<div class="row">
More text
</div>
<div class="stamp"></div>
</div>
Image over colored row containing text
.stamp {
background-image: url('http://imgh.us/new-google-logo-knockoff.png');
background-repeat: no-repeat;
background-position: 0 -69px;
background-size: 100% auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 15;
}
.container{
position:relative
}
.row:nth-child(2):after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: -20;
}
.row:nth-child(2) {
position: relative;
z-index: 10;
color: #fff;
}
<div class="container">
<div class="row">
Some header text
</div>
<div class="row">
More header text here
</div>
<div class="row">
More text
</div>
<div class="stamp"></div>
</div>
Image over colored row and below text
.stamp {
background-image: url('http://imgh.us/new-google-logo-knockoff.png');
background-repeat: no-repeat;
background-position: 0 -69px;
background-size: 100% auto;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -10;
}
.container{
position:relative
}
.row:nth-child(2):after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: -20;
}
.row:nth-child(2) {
position: relative;
color: #fff;
}
<div class="container">
<div class="row">
Some header text
</div>
<div class="row">
More header text here
</div>
<div class="row">
More text
</div>
<div class="stamp"></div>
</div>
Avoid using inline css. You can do it by using transparent background color.
The transparency can be regulated by changing the last number of background-color property--
background-color: rgba(255, 0, 0, *0.4*);
Example snippet
.stamp {
background-image: url('https://www.w3schools.com/css/trolltunga.jpg');
background-repeat: no-repeat;
background-position: left top;
}
#blck {
background-color: rgba(0, 0, 0, 0.4);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container stamp">
<div class="row">
Some header text
</div>
<div id="blck" class="row">
More header text here
</div>
<div class="row">
More text
</div>
</div>
Try this :
.container {
background: #EBEBEB;
padding: 10px;
}
.row {
background: white;
min-height: 100px;
background-image: url(http://www.clker.com/cliparts/T/j/X/6/y/m/grey-approved-stamp-hi.png);
background-position: left top;
background-repeat: no-repeat;
margin-bottom: 20px;
padding: 10px;
}
#top {
padding: 10px;
}
#second {
background-position: left calc(-180px + 20px + 20px);
/* left (-image height + middle row height + paddings) */
}
#third {
background-position: left calc(-180px - 30px);
/* left (-image height + middle row height + paddings) */
}
<div class="container stamp">
<div id = "first" class="row">
Some header text
</div>
<div id = "second" class="row" style="background-color:#3d3d3d; color: white; min-height: 50px;margin-bottom:0px;">
More header text here
</div>
<div id = "third" class="row">
More text
</div>
</div>
Here is a solution for your issue. Below i have added 2 inline style to your background color
<div class="container stamp">
<div class="row">
Some header text
</div>
<div class="row" style="background-color:black;z-index: -1;position: relative;">
More header text here
</div>
<div class="row">
More text
</div>
If want the text over the image and the background-color below it then its impossible because its a single component.
if want that row transparent just remove the inline css part
explain more the result you want to get please
If you don't want to change your HTML layout and do this just by altering css, you can set background image to pseudo elements :before of .stamp instead.
.stamp:before {
content: "";
position: absolute;
background-image: url(http://placehold.it/300);
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<div class="container stamp">
<div class="row">
Some header text
</div>
<div class="row" style="background-color:black">
More header text here
</div>
<div class="row">
More text
</div>
</div>
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).
I am trying to make a div with google map same as on airbnb page. Div's position with google map inside of it is fixed and gmap div's height and width are 100% and it seems when I open the page that it is that way, but the google logo on the bottom is not showing, even though when I inspect the element it doesnt show that it goes outside of the div.
#gmap {height:100%;
width:100%;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;}
.container {position: relative;
display: table;
min-height: 100%;
height: 100%;
width:100%;}
.container > div {
vertical-align: top;}
.map {position: fixed;
top: 70px;
right: 0;
min-height: 100%;
margin-right: 0px;
height: 100%;
z-index: 99;
overflow: auto;}
HTML code `
<div id="content">
<div class="container">
<div class="col-md-2">
#section('leftsidebar')
#include('layouts.pages.leftsidebar')
#show
</div>
<div class="col-md-6"
<section class="content">
#section('content')
#yield('content')
#show
</section><!-- /.content -->
</div>
<div class="col-md-4 map">
<div id="gmap">
</div><!--/#gmap-->
</div>
</div>
</div><!-- ./wrapper -->`
I have the following HTML source:
<div id="page">
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!--></div>
<div id="footer">
</div>
<!-- end page div -->
</div>
<div id="leftshadow"></div>
<div id="rightshadow"></div>
</body>
And this is the CSS source
/* html selectors ---- */
html, body {
font-family: 'Arial Unicode MS';
margin: 0;
padding: 0;
background-repeat: repeat-x;
background-color: white;
direction: rtl;
font-size: 10.3pt;
}
/*page -----------*/
#page {
width: 900px;
padding: 0px;
margin: 0 auto;
direction: rtl;
position: relative;
z-index: 100;
z-index: 5;
background-image: url("images/bgimage.png");
}
#leftshadow {
width: 100px;
height: 900px;
background-image: url("images/leftshadow.png");
position: absolute;
right: 1220px;
z-index: none;
top: -50px;
}
#rightshadow {
width: 100px;
height: 900px;
background-image: url("images/rightshadow.png");
position: absolute;
right: 345px;
z-index: none;
top: -25px;
}
/* header ---------- */
#header {
height: 110px;
top: 0px;
line-height: 30px;
background-image: url("images/header.png");
background-position-x: center;
background-repeat: repeat-x;
}
/* main -------------- */
#main {
line-height: 21px;
font-family: arial;
width: 625px;
padding: 30px;
position: relative;
right: 205px;
padding-bottom: 80px;
direction: rtl;
top: 42px;
padding-right: 60px;
min-height: 750px;
text-align: justify;
}
Normally I got this result
But in Internet-Explorer I got this result
I know that if I will insert the
<div id="leftshadow"></div>
<div id="rightshadow"></div>
******Live example here! http://lawb.co.il/******
Into the #page Div the problem could be solved, but the only problem is that the shadow than is complatly on the content, und not behund him
Can you pleas help me with this?
wish for help, thanks!
Any reason as to why you are using images to create shadows when you could use CSS3 box-shadow?
If you are going to use this approach I would change your HTML structure like so:
<div id="page">
<div id="leftshadow"></div>
<div id="header">
<!-- end header div -->
</div>
<div id="dropdown">
<!--navigator menu is here!-->
</div>
<div id="main">
<!--main is here!-->
</div>
<div id="sidebar">
<!--sidebar menu is here!-->
</div>
<div id="footer">
<!-- footer -->
</div>
<!-- end page div -->
<div id="rightshadow"></div>
</div>
And then float the right shadow div to the right and the left shadow div to the left. Most likely you are seeing inconsistencies because
you are not using a reset, and stuff is relatively positioned. You really don't need to position everything relative and the shadows if inside the #page container won't need to be positioned absolute.