This question already has answers here:
How to overlay images
(11 answers)
Closed 3 years ago.
I am trying to to center text over multiple images using bootstrap and css. Most googling says i need to use position: absolute;
However the most i am able to do is center the text in the middle of the screen but not over the image. I believe its something with bootstrap but i cannot find what is blocking it
The goal is for the text to have animation over the image moving forward like fading in and such
I have already checked multiple post about this but they all seem to only work if its one image. Trying to do with with multiple images seems to require a different approach
EDIT:
Since this got marked as a duplicate i would like to point out that the other post only show this working with ONE image. The other post do not work when it comes to multiple images
The portion of the code in question:
.imgText {
position: absolute;
z-index: -1;
}
.imgList {
z-index: -2;
}
<div class="row justify-content-center mt-3">
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
</div>
You can see the live results here
https://jsfiddle.net/nicholascox2/o29n78dL/61/
Here you go
JSFiddle
You need to set the parent element to be position: relative, so it's relative to the absolute positioned element, in this case the text.
This centers the element horizontally and vertically:
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
Also you need to apply z-index in order for the text to appear above the image.
.ml-4 {
position: relative;
}
.imgText.m-auto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nerd Arcadia</title>
<meta name="description" content="">
<meta name="author" content="">
<style>
/* The side navigation menu */
.sidenav {
height: 100%; /* 100% Full-height */
width: 0; /* 0 width - change this with JavaScript */
position: fixed; /* Stay in place */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black*/
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 60px; /* Place content 60px from the top */
transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* SPACING FOR PICTURES ON SMALLER SCREENS */
#media screen and (max-width: 420px) {
.imgList {margin-top: 25px;}
}
.imgText {
position: absolute;
z-index: -1;
}
.imgList {
z-index: -2;
}
</style>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="mySidenav" class="sidenav">
×
About
Services
Clients
Contact
</div>
<div class="nav">
<span id="navButton" style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
<img id="logo" class="justify-content-center m-auto" src="https://via.placeholder.com/200x100">
</div>
<div class="row justify-content-center mt-3">
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
<div class="ml-4 imgList">
<img src="https://via.placeholder.com/200x200">
<div class="imgText justify-content-center m-auto">
test text
</div>
</div>
</div>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
</script>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
try this
.imgText {
position: absolute;
transform:translate(-50%,-50%);
top:50%;
left:50%;
z-index: 22;
}
Related
I'm laying out the layout Figma Layout. This page has a background image and additional
Background
Additional - logo
and a hamburger
There is html code of the page
:root {
--my-screenwidth: 1366px;
--my-screenheight: 768px;
--layout-screenwidth: 1441px;
--layout-screenheight: 811px;
}
._container {
--layout-containerwidth: 1111px;
--layout-containerheight: 43px;
max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth));
margin: 0px auto;
box-sizing: content-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<title>Webovio</title>
</head>
<body>
<div class="wrapper">
<main class="page">
<div class="page__main-block main-block">
<div class="main-block__container _container">
<div class="margin-block__header">
<div class="main-block__nav">
<!--
<img src="img/triangles/white-triangle.png" class="main-block__logo_white_triangle" alt="logoheader">
<img src="img/triangles/yellow-triangle.png" class="main-block__logo_yellow_triangle" alt="logoheader">
-->
<!--<div class="main-block__header_image_1">-->
<img src="https://i.stack.imgur.com/oB0ua.png" class="main-block__logo_name" alt="logoname">
<!--</div>-->
<!--<div class="main-block__header_image_2"></div>-->
<img src="https://i.stack.imgur.com/hO056.png" class="main-block__logo_hamburger_icon" alt="menulogo">
<!--</div>-->
</div>
</div>
<div class="main-block__body">
<div class="main-block__smalltitle">A place where</div>
<div class="main-block__title">A creative agency for redemptive brands</div>
<!--
<div class="main-block__text">
Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.
</div>
-->
<div class="main-block__items">
<!--Get in touch link-->
</div>
</div>
</div>
<div class="main-block__image _ibg">
<img src="https://i.stack.imgur.com/Tju6g.png" alt="cover">
</div>
</div>
</main>
</div>
</body>
</html>
The css contains the dimensions of the header containing the logo and the hamburger. Here is the max-width: calc((var(--layout-containerwidth)/var(--layout-screenwidth))*var(--my-screenwidth)); which calculates the maximum width of the header given the width values my screen and the layout screen, as well as the width of the header on the layout, taken from the figma layout (the header consists of a logo and a hamburger).
Tell me how to layout the layout so that so that the logo and the hamburger in the header take their places on the background image, and so that the text (headings A place where and A creative agency for redemptive brands) becomes left horizontally and in the middle vertically of the image, and also to be able to proportionally scale the background image as in Proportional scaling tools. It should be like on Layout from Figma. I tried to style but couldn't get the text, logo and hamburger on the background image.
P.S. Exact indents are not needed. Tell me how to layout so that the background image has the content of the page, including text, logo and hamburger.
Section is set to be height: 100vh; width: 100vw and then display: grid.
The background image will always fill it's container and you can control the image cropping by adding style="--imgPosition: <X> <Y>", which is just laying out to object-position so you can check MDN for potential values.
Content in the main block is using display: grid as well and all set to occupy the same space. The links have an explicit z-index set so they will be above the content. The content will always be vertically centered unless it has more content than screen height, at which point padding: 6rem 0 will add 6rem above and below the section
*, *::before, *::after { box-sizing: border-box } body { color: white; font: 16px "Poppins", sans-serif; margin: 0 }
section.custom {
display: grid;
height: 100vh; width: 100vw;
place-items: center;
}
section.custom > * {
grid-area: 1/1/-1/-1;
height: 100%; width: 100%;
}
section.custom .back { position: relative }
section.custom .back > * {
display: block;
height: 100%; width: 100%;
object-fit: cover;
object-position: var(--imgPosition, center center);
position: absolute;
}
section.custom .fore {
display: grid;
gap: 1rem;
max-width: 1200px;
padding: 1rem;
place-items: center;
z-index: 1;
}
section.custom .fore > * { grid-area: 1/1/-1/-1 }
section.custom .fore .navLink { align-self: start; z-index: 1 }
section.custom .fore #logo { justify-self: start }
section.custom .fore #menuToggle { justify-self: end }
section.custom .fore .block { padding: 6rem 0; width: 100% }
<link href="https://fonts.googleapis.com/css?family=Poppins:regular,700&display=swap" rel="stylesheet" />
<section class="custom">
<div class="back" style="--imgPosition: top left"><img src="https://i.stack.imgur.com/Tju6g.png"></div>
<div class="fore">
<a class="navLink" id="logo" href="#"><img src="https://i.stack.imgur.com/oB0ua.png"></a>
<a class="navLink" id="menuToggle" href="#"><img src="https://i.stack.imgur.com/hO056.png"></a>
<div class="block">
<p>A place where</p>
<h1>A creative agency for redemptive brands</h1>
<p>Anteelo is a leading strategic design firm that builds powerful digital solutions for startups and enterprises.</p>
</div>
</div>
</section>
I'm trying to make a layout like on the picture but I'm struggling with canvas positioning. How can I put h1 forward?
Also, whats better for the black and white skewed rectangles? To do them with CSS or another Canvas on top of the first one?
Also I would appreciate some advice on responsiveness of this layout.
body {
font-family: 'Roboto', sans-serif;
background-color: #181818;
padding:0;
margin:0;
}
p{
color: #f0f0f0;
}
h1 {
text-align: center;
text-align: left;
font-size: 10em;
}
h2 {
text-align: center;
margin: 40px 0px;
color: #f0f0f0;
}
td{
width: 50%;
text-align: center;
}
canvas{
width:100%; height:100%;
position:absolute; top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
z-index: 0;
}
.homepage .portfolioPage{
position: absolute;
z-index: 1;
}
/* .mainWrapper {
position: relative;
} */
.mainPage{
margin-top: 50px;
display: inline-block;
align-content: center;
}
.rightbox{
padding: 0 40%;
width: 600px
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Font -->
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght#700&family=Roboto&display=swap" rel="stylesheet">
<!-- CSS -->
<link rel="stylesheet" href="style.css">
<title> </title>
</head>
<body>
<div class="mainWrapper">
<canvas id="#particles-js" width="1000" height="500"></canvas>
<!-- Homepage -->
<div class='homepage'>
<table style="width:100%">
<tr>
<!-- Left Side -->
<td>
<div class='mainPage'>
<div class="blk-box">
<div class="block">
<h1>Barqawi</h1>
</div>
<div class="block">
<h1>Maroun</h1>
</div>
<div class="block">
<h1>Grey</h1>
</div>
</div>
</div>
</td>
<!-- Right Side -->
<td>
<div class='mainPage'>
<div class="rightbox">
<p id="jrdev">Jr Software Developer</p>
<div class="portfolioBtn">
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
I figured out. Just in case someone need it, here is the code.
canvas {
width:100%; height:50%;
top:0px; left:0px;
background-image: linear-gradient(to bottom right, red, #380000);
position: absolute;
z-index: -1;
}
.mainWrapper {
position: relative;
}
.homepage {
position: relative;
}
The tag
<h1>
is normally reserved for SEO keywords. Anyway, you can do the following:
.block { transform: skewX(-10deg);}
If you don't want the text to be skewed along, you should define another element outside to contain the text and then use negative margin or absolute positioning to fix the position of the text.
As for mobile reponsiveness, I would advise converting all absolute lengths to relative lengths, eg. 100%, 100vh, 100vw etc.
You can also use media queries to specify separate layouts for portrait and landscape orientations:
#media only screen and (orientation: portrait) {
body {
...
}
...
}
#media only screen and (orientation: landscape) {
body {
...
}
...
}
I'm using Ant Design for my website frontend, a similar framework like Bootstrap for React JS, but not really relevant here, since this is a pure CSS question.
The framework uses rows and columns that are relative. Now I want to overlay the parent element with an absolute element that is nested deep inside in it. I don't want to change the CSS of the rows or columns and I don't want to move the absolute container outside of my nested elements.
Is this possible, if so, how?
.row { /* copied from Antd */
position: relative;
height: auto;
margin-right: 0;
margin-left: 0;
zoom: 1;
display: block;
}
.col { /* copied from Antd */
flex: 0 0 auto;
float: left;
position: relative;
min-height: 1px;
padding-right: 0;
padding-left: 0;
}
.test {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div>This line should stay visible.</div>
<div class="row">
<div class="col">
<div>Right below this line it should be darken:
<div class="row">
<div class="col">
<div class="test"></div>
</div>
</div>
</div>
</div>
</body>
</html>
The desired effect looks like this, but I'm unsure if this is really possible:
The test container should start where its parent column starts, but be greedy. Is this even possible? I have no problems to add more divs around the test container, though.
Make the absolute element big enough and hide the overflow where you want:
.row {
/* copied from Antd */
position: relative;
}
.col {
/* copied from Antd */
position: relative;
}
.test {
position: absolute;
top: -100vh;
right: -100vw;
bottom: -100vh;
left: -100vw;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
}
<div>This line should stay visible.</div>
<div class="row">
<div class="col">
<div>Right below this line it should be darken:
<div class="row" style="overflow:hidden"> <!-- hide here -->
dark content here
<div class="col">
dark content here
<div class="test"></div>
</div>
</div>
</div>
</div>
I've been working on a personal website and am trying to get a particular scrolling effect, where the page is separated into sections and each section overlaps the next section. Meanwhile, the content of each section stays fixed so that the content for each section never moves, but rather is revealed by each section scrolling into place.
My issue is that with the code I have now, I have achieved this effect in Safari, but when I open the same file in Chrome, it doesn't work at all. I isolated the particular effect I am going for in the following code:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.section {
height: 100vh;
overflow: hidden;
position: -webkit-sticky;
/* position: -moz-sticky;*/
/* position: -ms-sticky;*/
/* position: -o-sticky;*/
top: 0;
}
.fixed {
position: fixed;
top: 50%;
left: 50%;
}
#first {
background-color: lightgrey;
z-index: 1;
}
#second {
background-color: lightblue;
z-index: 2;
}
#third {
background-color: black;
color: white;
z-index: 3;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="Vishal Cherian" description="Vishal's personal and professional website">
<title>Vishal | Welcome</title>
</head>
<body>
<div class="section" id="first">
<div class="fixed">
<h1>Hello</h1>
</div>
</div>
<div class="section" id="second">
<div class="fixed">
<h1>Goodbye</h1>
</div>
</div>
<div class="section" id="third">
<div class="fixed">
<h1>Hello Again</h1>
</div>
</div>
</body>
</html>
If you open this code in Safari, you will see the effect, but if you open it in Chrome, it is completely different.
I am assuming the problem lies in my CSS file, but from the research I have done, I cannot find any disparity in the way Chrome treats any of the individual CSS properties I used compared to how Safari treats them. Is there something I am missing?
I'm using wordpress with a custom template and I want to display a div the width of the window. This is my html code:
<section id="calltoaction" class="calltoaction " style="background-position: 50% 15px;">
<div class="blacklayer"></div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Title Text</h2>
<p>Test Text</p>
</div>
<div class="col-md-12 text-center">
Download
</div>
</div>
</div>
</section>
This is my css code:
.calltoaction {
background-position: unset !important;
position: absolute;
left: 0;
right: 0;
background-image: url(http://roguelevels.com/wp-content/uploads/2018/04/DSC6507-683x1024.jpg);
background-size: cover;
padding: 80px 0 90px 0;
}
The problem is, everything I create gets placed within this div class:
.row {
margin-right: -15px;
margin-left: -15px;
}
So i'm trying to write custom css to create a div that displays over the top of this class as I don't have access to the template's code directly.
At the moment the result is this. I want that image to fit the width of the page.
Any help would be greatly appreciated.
See attached code-snippet for how to stack divs ontop of each other, assuming one div has setting: position: absolute; . I moved the lowest div slightly so it is visible.
.div-1 {
position: absolute;
z-index: 1;
background-color: red;
height: 100px;
width: 100px;
margin: 10px 0px 0px 10px;
}
.div-2 {
position: relative;
z-index: 2;
background-color: green;
height: 100px;
width: 100px;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="index.css">
<body>
<div class="div-1"></div>
<div class="div-2"></div>
</body>
</html>