What is the best way to overlay an image on two divs/containers simultaneously?

I've been tasked with creating a web mockup featuring a transparent PNG image overlaying two divs in multiple rotations. I've used Bootstrap 4.1 to structure the site, utilizing containers, rows, and cols.

<section class="one">
    <!-- .container, .row, .col for content -->
</section>
  <img src="flowers.png">
<section class="two">
    <!-- .container, .row, .col for content -->
</section>

View the Codepen here: https://codepen.io/anon/pen/odPZqN

I'm currently exploring options for positioning the image on top of the two containers. While using the Tether JS library provides a solution, it isn't the most lightweight option. Additionally, absolute positioning is not feasible for an adaptive/responsive site.

Check out the Codepen with relative/absolute positioning: https://codepen.io/anon/pen/jxvmMX

I also experimented with floating the image left, but it caused unwanted interactions with the content, impacting the layout negatively.

Take a look at the Codepen using float: https://codepen.io/anon/pen/QrVpor

What are your thoughts on potential solutions for this layout challenge?

Mockup image: https://i.sstatic.net/Mm1zj.png

htmlcsstwitter-bootstrapbootstrap-4sticky

Answer №1

Here is a suggestion on how to use media queries to position an image at different breakpoints:

.outer {
  position: relative;
}

#flower {
  position: absolute;
  top: 0;
  left: 0;
  max-width: 100%;
  height: auto;
}

// Feel free to experiment with different values.
@media screen and (max-width: 990px) {
    #flower {
        left: 10px;
        top: 30px;
    }
}
<div class="outer">
  <section class="one">
      <!-- .container, .row, .col for content -->
  </section>
    <img src="flowers.png" id="flower">
  <section class="two">
      <!-- .container, .row, .col for content -->
  </section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The website is not optimized for mobile viewing

I have recently made an existing website responsive using Twitter Bootstrap. Everything seemed to work fine when I tested it by resizing the browser window, as it perfectly fit in the viewport. However, upon checking the site on mobile and tablet devices, ...

csstwitter-bootstrapresponsive-design

Navigating through pages in React using Pagination Animations

Attempting to style an active button with a small transition when it receives that attribute has been a challenge. The same issue occurs with the paragraph rendered from the data file. function Pagination() { const [selected, setSelected] = useState(0) ...

javascriptcssreactjspaginationcss-transitions

Emails are not responsive to media queries

I've experimented with multiple media queries in an attempt to make this work on both iPhone (landscape/portrait) and desktop, but I'm struggling to achieve the desired outcome on both simultaneously. While some of my classes are functioning cor ...

cssresponsive-designmedia-queries

Explore the hidden route of the input components

HTML: <div id="quiz"> <div id="question"> <p id="quiz-txt">What is your favorite color?</p> <ul id="quiz-opt"> <div id="ans"> <input type="checkbox" id="Red" value="Red" class="options"> ...

javascriptjqueryhtmlcheckbox

What are the best ways to ensure that my side menu, bottom buttons, and content are all responsive

I have been struggling with creating a responsive side menu in my HTML code. Despite my efforts, the side menu contents, buttons, and layout do not adjust properly when resizing the browser window. When I drag the browser size from bottom to top, the butto ...

cssresponsive-designresponsive

Easily toggle between different content within the same space using Twitter Bootstrap Tabs feature. Display the tabs

I made a modification to the bootstrab.js file by changing 'click' to 'hover': $(function () { $('body').on('hover.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) { e.p ...

javascriptjquerycsshovertwitter-bootstrap

Tips for automatically displaying user text based on its natural direction

Looking for a way to properly display user inputted text in Unicode based on its general direction, rather than defaulting to left-to-right. An issue arises when dealing with Arabic text as shown below, where the English word (4th) is split apart: اُر ...

csshtmlunicodebidi

Blip of an image then vanishes

Within my web application, I have implemented code to display images and allow users to navigate through them using Next and Previous buttons. The functionality works as expected, but there is an issue where the image briefly flashes and then disappears wh ...

javascripthtml

Tips for inverting the z-index order of stacked divs

On my webpage, I have set up multiple columns enclosed in divs like this: <div class="first column" style="width:33%; float: left;"></div> <div class="column" style="width:33%; float: left;"></div> <div class="last column" style ...

jquerycssz-index

Selecting dynamic attributes in VueJS - clearing out previous selections

The data attributes are pulled from an API and the names of the attributes are dynamic. However, for the sake of simplicity, I have included an example with an object containing Colour and Size. My main goal was to map the data to an object named selectedA ...

javascripthtmlvue.jsvuejs2

JavaScript not properly rendering CSS styles

If I insert the following HTML statically, the CSS style is correctly applied. HTML: <li class="connector"> <a href="#"> <img src="css/images/temp/connector2.png" alt="" width="192" height="192"> <span class="sr-only"& ...

javascriptjqueryhtmlcss

Switching Tabs When a Button is Clicked

I am currently using a guide from the link provided to learn how to create tabs: http://www.w3schools.com/howto/howto_js_tabs.asp. function openTab(evt, tabName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClass ...

javascripthtml

Tips for triggering jquery code when a variable containing a CSS attribute is modified

I have a specific requirement where I need to reset the scrollleft value to 0 on my wrapper whenever a particular CSS property changes. Although I am new to using jQuery and haven't worked with variables much, I believe I need to create a variable to ...

javascriptjqueryhtmlcss

Showing off the latest products at the top of the list

Typically, when utilizing ngFor, the most recent item is displayed underneath the initial element. For instance, a list containing: [Apple, Orange, Banana] If we use ngFor to display this list: Apple Orange Banana I am interested in learning a method t ...

htmlcssarraysangulartypescript

The mobile site is extending beyond the width of the device screen

After creating this single web page and testing it on my mobile device, I noticed an issue. When I swipe to the left, the website's width shifts slightly, as if the edges are not fully contained within the screen. This problem only occurs on Safari, n ...

csswidthbootstrap-5column-width

How can I modify the parent form element to only evaluate the expression at the text node, without affecting Angular interpolation?

Currently, I am in the process of developing an eCommerce platform and utilizing angular to construct a widget on product detail pages. Unfortunately, my control over the initial HTML rendered for the browser is quite limited. While most tasks related to m ...

javascripthtmlformstemplatesangularjs

Don't forget to expand or collapse

I'm struggling to make this work. My goal is to initially display 50 characters and show the rest when the "read more" button is clicked, and vice versa with "read less." Another problem I've noticed is that when I click the back browser button, ...

javascriptjqueryhtml

Problem with JavaScript and Basic HTML5 Canvas

I'm trying to dive into learning about using a canvas, but I just can't seem to get this basic code to work. Does anyone know what I might be doing wrong? Link to jsfiddle <canvas id="ctx" width="500" height="500" style="border:1px solid #00 ...

javascripthtmlcanvas

React Navigation Error: navigateTo must be used within a valid router configuration

When attempting to utilize useNavigation() from react-router-dom, I encounter the following error: Error: useNavigation must be used within a data router. See https://reactrouter.com/en/main/routers/picking-a-router. NavBar src/components/NavBar.js:6 3 ...

javascripthtmlreactjsreact-router-dom

What is the reason that setting the margin of 0 on the body does not eliminate the margin on an h1 element?

I believe the body element should apply styles to all elements contained within it. In this scenario, I am attempting to give my h1 element a margin of 0. body { font: 15px/1.5 Arial, Helvetica, sans-serif; padding: 0; margin: 0; background ...

htmlcss