How to overlap a text with an image (text in front of the image) and center them while keeping both responsive (without using position fixed or background-image) in Bootstrap?
<pre>
<!--jumbotron-->
<div class="jumbotron">
<div class="container">
<div class="brand">
<h1 id="success">Alexandra</h1>
<img class="img-responsive" src="lavrente.jpg" width="300" height="52" >
</div>
</div>
</div>
</pre>
<pre>#success {
color: #000;
font-family: "Chopin Script";
position:relative;
z-index: 1;
}
.img-responsive {
position:relative;
z-index: 0;}
</pre>
Use position: absolute on the text.
h1{
position: absolute;
}
Here is another solution with full responsive:
<div class="jumbotron">
<div class="container">
<div class="brand">
<img src="http://via.placeholder.com/350x150" alt="" class="img-responsive" width="300" height="52">
<h1 id="success">Alexandra</h1>
</div>
</div>
</div>
CSS:
.brand {
position: relative;
text-align: center;
}
#success {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, -50%);
}
live preview: https://codepen.io/mesapkota/pen/QryREB
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>
I have a site that is a 1 page with different sections. On the first section I am adding a blue overlay over the first section using the below code:
<header class="text-center" name="home">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</header>
Here is the css for .cover.blue:
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.blue{
background-color: rgba(5, 31, 60, 0.6);
In the 2nd section I want to use an orange overlay but when I apply the div for the overlay the overlay on the 1st section is going in front of my text, buttons, etc and the color is changing to orange.
2nd section html:
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
</div>
Css for .cover.orange
.cover{
position: fixed;
opacity: 1;
background-color: rgba(0,0,0,.6);
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 0;}
.cover.orange{
background-color: rgba(37, 28, 5, 0.6);}
What am I doing wrong?
Thanks for any input.
If i corectly understand what you want to do, you try to add 1 overlay by section, which you want to cover only his own section.
To do taht, I would choose to add a container for each section (to help standardize behaviour with classes) a use "absolute" positionning rather than "fixed".
.container {
position: relative;
z-index: 1;
}
.cover{
position: absolute;
opacity: 0.5;
background-color: grey;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 3;
}
.cover.blue{
background-color: blue;
}
.cover.orange{
background-color: orange;
}
<header class="text-center" name="home">
<div class="container">
<div class="cover blue" data-color="blue"></div>
<div class="intro-text">
<h1 class="wow fadeInDown">Site Header</h1>
</div>
</div>
</header>
<div id="about-section">
<div class="container">
<div class="cover orange" data-color="orange"></div>
<div class="section-title text-center wow fadeInDown">
<h2>Section 2</h2>
<hr>
<div class="clearfix"></div>
<h4>Choose</h4>
</div>
</div>
</div>
Note: your HTML snippets have issues : in the first, you forgot to close div, and in the second you close the last div twice.
I have a series of images each with his own overlay. How can I have them aligned like inline-blocks? I tried adding adding display: inline-block;to .image-wrapper but the images are always all positioned in the top left corner of the div.container (Here is a jsfiddle).
Here are the html and css
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
position: absolute;
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
</div>
EDIT:
revised css with dfsq suggestion to remove position:absolute; from .tweetty.
Quoting dfsq comment:
"Elements with position absolute don't contribute to the width and height of their parent container. So the image-wrapper divs just collapse as if they were empty if all children have position:absolute; "
.container {
position: relative;
}
.image-wrapper {
position: relative;
display: inline-block;
}
.tweetty {
overflow: auto;
top: 0;
left: 0;
}
.image-vest {
position: absolute;
top: 0;
left: 0;
background-color: #00f;
width: 220px;
height: 300px;
opacity: 0.4;
color: #fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
I fiddled with the fiddle, and this seems to work. removed all the positioning from all but the vest. Used the inline-block display mode. Set top to -300px, and also the bottom-margin, otherwise you get a gap below the images.
.container {
/* position:relative;*/
}
.image-wrapper {
/* position: relative;*/
display: inline-block;
}
.tweetty {
/* position:absolute;
overflow:auto;
top:0;
left:0;*/
}
.image-vest {
position:relative;
top:-300px;
margin-bottom: -300px;
left:0;
background-color:#00f;
width:220px;
height:300px;
opacity:0.4;
color:#fff;
}
<div class="container">
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-one</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-two</div>
</div>
<div class="image-wrapper">
<div class="tweetty">
<img src="http://www.picgifs.com/clip-art/cartoons/tweety/clip-art-tweety-191375.jpg" />
</div>
<div class="image-vest">Tweetty-three</div>
</div>
</div>
(here's the JSFiddle version)
I am working on this demo. Why am I not able to position the #box-wrap and its child element (#box-1, #box-2, #box-3) properly inside the Bootstrap 3 .well?
#box-wrap {
position: relative;
width:100%;
background-color:#fff;
}
#box-1 {
position: absolute;
width:100%;
height:120px;
top: 0;
left: 0;
background:khaki;
}
#box-2 {
position: absolute;
top: 5px;
left: 5px;
}
#box-3 {
position: absolute;
top: 44px;
left: 5px;
}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="container">
<div class="well">
<div id="box-wrap">
<div id="box-1"></div>
<div id="box-2"><button class="btn btn-success">></button></div>
<div id="box-3"><button class="btn btn-success"><</button></div>
</div>
</div>
</div>
</div>
If I understood your layout correctly, here's my solution.
I removed position: absolute; and changed the box-2, box-3 from divs to spans (since divs have a display:block by default.
HTML
<div class="row">
<div class="container">
<div class="well">
<div id="box-wrap">
<div id="box-1"></div>
<span id="box-3"><button class="btn btn-success"><</button></span>
<span id="box-2"><button class="btn btn-success">></button></span>
</div>
</div>
</div>
</div>
CSS
#box-wrap {
position: relative;
width:100%;
}
#box-1 {
width:100%;
height:120px;
top: 0;
left: 0;
background:khaki;
}
#box-2,
#box-3 {
background:khaki;
}
DEMO
UPDATE (Thx #ckuijjer)
Thanks to #ckuijjer for the comment. Here's his simpler version that accomplishes the same thing:
Simplified HTML
<div class="container">
<div class="row">
<div class="well">
<div id="box-1"></div>
<button class="btn btn-success"><</button>
<button class="btn btn-success">></button>
</div>
</div>
</div>
Simplified CSS
#box-1 {
height:120px;
background:khaki;
}
Simplified DEMO
Just change your css as
#box-2 {
position: absolute;
top: 45px;
float:right;
right: 5px;
}
Working Demo
Using
#box-1{
position:relative;
}
will solve the issue.
I think as none of the parent element of box-1 has fixed height this is somehow affecting using position:absolute for a child div.
enter link description hereI have a set 8 floated divs, each taking 25% width (and having another div and img inside), so they line up in two rows.
<div class="galleryboard" id="gallery3">
<div class="view view-first">
<img src="img/galleries/3/thumb/1.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/2.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/3.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/4.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/5.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/6.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/7.jpg">
<div class="mask">
Enlarge
</div>
</div>
<div class="view view-first">
<img src="img/galleries/3/thumb/8.jpg">
<div class="mask">
Enlarge
</div>
</div>
</div>
I want to add only the inner borders to all floats by manually picking each float by css, like so:
.view:nth-child(1) {
border-left:none
}
.view:nth-child(5) {
border-left:none
}
.view:nth-child(4) {
border-right:none
}
.view:nth-child(8) {
border-right:none
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-top:none;
}
.view:nth-child(5), .view:nth-child(6), .view:nth-child(7), .view:nth-child(8) {
border-bottom:none;
}
but somehow, I'm getting the borders of 2nd, 3rd, 6th and 7th float all wrong - see it here
jsfiddle
the divs are styled here
.view {
width: 25%;
box-sizing:border-box;
float: left;
overflow: hidden;
position: relative;
text-align: center;
border:3px solid blue
}
.view .mask, .view .content {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
width:100%;
height:auto;
}
and apparently the problem is caused by the img having its width set to 100%. Can you find a solution to have my inner borders all the same size? Thanks
Try
Remove all child styling and apply following
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(5), .view:nth-child(6), .view:nth-child(7) {
border-right: medium none;
}
.view:nth-child(1), .view:nth-child(2), .view:nth-child(3), .view:nth-child(4) {
border-bottom: medium none;
}
In the .view i have just added height or pass the height dynamicaly
.view {
border: 3px solid blue;
box-sizing: border-box;
float: left;
**height: 240px;**
overflow: hidden;
position: relative;
text-align: center;
width: 25%;
}