I am currently faced with the challenge of incorporating large PNG images into the background of a website, all while utilizing Bootstrap 4. My goal is to ensure that when a user resizes the screen, these images remain fixed in place as part of the background, while still being responsive to CSS media queries.
One example of the type of floating background images I am attempting to integrate can be found here:
https://i.sstatic.net/YTQoJ.jpg
You can see a similar effect on the Stripe payment website: stripe.com
- Regardless of the screen size, the smaller graphics stay anchored on the page and adjust based on media queries.
- The globe image also remains relatively fixed.
Although this may appear to be a straightforward task, my attempts so far have proven unsuccessful.
I am seeking a simple structure like this to address the issue:
HTML
<div id="media-section" class="container">
<img id="bCamera" src="{{ asset('imgs/bCamera.png') }}" width="500px", height="500px"/>
</div>
CSS
#bCamera{
position: relative;
right: -70%;
}
The issue arises when the image is set to position: absolute;, causing it to scale according to the entire view width instead of the inner container. However, setting it to position: relative; improves positioning but disrupts the flow of the page.
Therefore: What is the most effective method for placing a large independent image on a page as a floating background within a div without impacting the overall page layout?