I have been struggling to place an image on top of another image using bootstrap, but I can't seem to find a responsive solution. My goal is to achieve a design similar to this: https://i.sstatic.net/U3fqx.png
I have noticed that all the answers provided by users involve using CSS positioning, but none of them are mobile-friendly. Can anyone offer assistance with this?
To achieve the desired layout, incorporating media queries is essential. Another alternative approach would be using negative margin instead of positioning.
<div class="container">
<div class="fb-profile">
<img align="left" class="fb-image-lg" src="http://lorempixel.com/850/280/nightlife/5/" alt="Profile image example"/>
<img align="left" class="fb-image-profile thumbnail" src="http://lorempixel.com/180/180/people/9/" alt="Profile image example"/>
</div>
</div> <!-- /container -->
.fb-profile img.fb-image-lg {
z-index: 0;
width: 100%;
margin-bottom: 10px;
}
.fb-image-profile {
margin: -90px 10px 0px 50px;
z-index: 9;
width: 20%;
}
@media (max-width:768px) {
.fb-image-profile {
margin: -45px 10px 0px 25px;
z-index: 9;
width: 20%;
}
}
Positioning is an essential aspect of web design. Fiddle
.container {
width: auto;
float: left;
position: relative;
}
.small-round, .big-round {
border-radius: 50%;
position: absolute;
}
.big-round {
left: 10%;
bottom: -60%;
}
.small-round {
right: 0;
bottom: -50%
}<div class='container'>
<img class='top' src='http://placehold.it/400x200' />
<img class='big-round' src='http://placehold.it/200/999' />
<img class='small-round' src='http://placehold.it/100/000' />
</div>If you're looking to place an image between two sections, here's the solution:
body { margin: 0;}
section {
box-sizing: border-box;
padding: 1rem;
}
.has-image-after {
position: relative;
background: url(https://unsplash.it/800/400) no-repeat 50% 50% /cover;
padding-bottom: calc(100px + 1rem);
color: white;
}
.has-image-after + section {
padding-top: calc(100px + 1rem);
}
.has-image-after .image-after {
position: absolute;
text-align: center;
width: 200px;
height: 200px;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);
border-radius: 50%;
overflow: hidden;
}
.image-after img {
width: 100%;
min-height: 100%;
object-fit: cover;
}
@media(max-width: 600px) {
.has-image-after .image-after {
width: 33.3333vw;
height: 33.3333vw;
}
.has-image-after {
padding-bottom: calc(16.6667vw + 1rem);
}
.has-image-after + section {
padding-top: calc(16.6667vw + 1rem);
}
}<section class="has-image-after">
<div class="content">
<h2>Section 1</h2>
<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?
</div>
<div class="image-after">
<img class="between-sections" src="http://via.placeholder.com/400x200" />
</div>
</section>
<section><h2>Section 2</h2>
<p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled...)) - #{$bottom});
}
This method ensures that the image is cropped into a circle without distortion, regardless of its size or aspect ratio. Customization options are available within the SCSS code provided for further adaptability.
To better suit your needs, here's the SCSS code for you to adjust as needed:
$sectionPadding: 1rem;
$imageWidth: 200px;
$imageResponsiveWidth: 33.3333vw;
$breakPoint: 600px;
$left: 20%;
$bottom: -40px;
body { margin: 0;}
section {
box-sizing: border-box;
padding: $sectionPadding;
}
.has-image-after {
position: relative;
background-color: #fff;
padding-bottom: calc((#{$imageWidth/2} + #{$sectionPadding}) + #{$bottom});
}
.has-image-after + section {
padding-top: calc((#{$imageWidth/2} + #{$sectionPadding}) - #{$bottom});
}
.has-image-after .image-after {
position: absolute;
text-align: center;
width: $imageWidth;
height: $imageWidth;
left: $left;
bottom: $bottom;
transform: translate(-50%, 50%);
border-radius: 50%;
overflow: hidden;
}
.image-after img {
width: 100%;
min-height: 100%;
object-fit: cover;
}
@media(max-width: $breakPoint) {
.has-image-after .image-after {
width: $imageResponsiveWidth;
height: $imageResponsiveWidth;
}
.has-image-after {
padding-bottom: calc((#{$imageResponsiveWidth/2} + #{$sectionPadding}) + #{$bottom});
}
.has-image-after + section {
padding-top: calc((#{$imageResponsiveWidth/2} + #{$sectionPadding}) - #{$bottom});
}
}
In my opinion, Gerard's solution stood out as the most effective. The key is to utilize positioning by setting the parent container to position: relative; and then placing the images within it using absolute positioning.
I personally find this method preferable to the suggestion of using negative top margins, as proposed by vijayscode. However, vijayscode makes a valid point that utilizing CSS media queries will likely be necessary to adjust the size and position of these elements on different screen sizes.
My recommendation would be to follow Gerard's code example while also incorporating media queries for optimal responsiveness. A more tailored response could have been provided if your code had been included.
I have created a custom directive that displays two divs, Div1 and Div2, with a splitter in the middle: Splitter Image Now, I am looking for a way to swap the positions of these two divs dynamically using an Angular directive. I thought about using ng-swi ...
I am trying to achieve a button border effect similar to the one in the image provided. I want to create a div with a white background color, and inside that div, I need to add a button with a 15px margin or padding while making it transparent. <div cl ...
My website is on Wordpress and the page widths seem to be too wide. I have tried looking for the culprit in the code, but so far no luck... ...
Currently, I am facing a challenge while customizing Doxygen's output and my main roadblock is the menu bar. To address this issue, I decided to generate custom CSS and HTML files provided by Doxygen by executing the command: doxygen -w html header. ...
While browsing a webpage, I discovered a <div> element with the class .plainMail and I want to find a way to easily select all its text by simply pressing Ctrl+A. Currently using Firefox 22, I am considering converting the div.plainMail into a texta ...
I am currently working with bootstrap, php, and ajax. I'm facing some issues that I can't seem to resolve. Additionally, I've noticed that the mysqli_connect function is not highlighting in blue when I type it in Notepad++. Is this normal? ...
When making an AJAX call to a Flask function to retrieve data using a token, the code looks like this: @app.route("/questgen/results", methods = ['POST', 'GET']) def fetch_results(): token = request.form.get('token&a ...
I am setting up a vbox and inserting hyperlinks into it. Hyperlink clickableString; clickableString = new Hyperlink(); clickableString.setStyle("-fx-text-fill: black;-fx-padding: 0; -fx-line-spacing: 0em;"); //setting the hyperlink color to black. clicka ...
I'm attempting to add HTML elements inside a <circle> and then utilize CSS-Sprites for styling, but I'm having trouble getting them to display! This is my current approach: //Creating the node for use in Force Layout var node = svg.sele ...
When attempting to load a map on my page, I encountered a problem when including the jquery.min.js file in the head tag. If it is included, I receive an initMap : no such method error. However, if I reverse the order of inclusion, with maps first and then ...
Having trouble configuring Tailwind to use a custom font without it overriding the tailwind.css file and not displaying the changes? https://i.stack.imgur.com/ExDCL.png Check out my files below. // tailwind.config.js const defaultTheme = require('ta ...
As I delve into front-end web development, my current learning focus is on mastering Bootstrap. An element of my project includes a jumbotron with a blurred image background under the navigation bar. While I have successfully blurred the image without affe ...
I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...
Whenever I tap on the navbar icon on my mobile or tablet, the navbar opens briefly before disappearing. Even though the navbar closes visually, it still indicates that it is open. When I tap the navbar icon again to close it (without seeing it actually clo ...
Currently, I am utilizing the VMenu component from Vuetify which contains another Vuetify component called VDatePicker. The issue arises when clicking on a text field triggers the appearance of the calendar (VDatePicker). Normally, the VDatePicker componen ...
For Angular 7, I am looking to restrict users to only upload PDF files. When the "Select File" button is clicked on the page, it brings up options for "PDF Files" as well as "All Files". I am seeking help in enforcing this using a JavaScript or TypeScript ...
Hello, I am currently attempting to dynamically change the color of a p tag. However, I am facing issues with IE-11 not supporting this functionality. How can I resolve this problem? <p style="color:{{userData.color}} !important;">{{userData.someTex ...
@import url('https://fonts.googleapis.com/css?family=Dosis'); * { box-sizing: border-box; } /*Xtra Small */ body { font-family: 'Dosis', sans-serif; line-height: 1.618em; font-size: 18px; background: #383231; c ...
Recently, I encountered an issue with customizing a select menu using CSS and jQuery. After some work, I was able to achieve a result that I am quite pleased with: So far, the styling works perfectly in Mozilla, Opera, Chrome, and IE7+. Below is the curr ...
Is it feasible to include a "position:fixed" style to the <header> in the app that showcases website pages using a WebBrowser control? This adjustment can be made via inline styling or by utilizing an external stylesheet saved within the resources ...