Large independent images floating in a divs background using CSS

user_5859663 0
Viewed 164

Currently i am trying to add large PNG images on the background of a website (im also using Bootstrap 4). When a user resizes the screen the image will stay in place and so these independent images will stay a part of the background (except still being affected by CSS media queries)

An example of the kind of images i'm trying to put floating in the background:

png phones no background

An example of this effect can be scene on the Stripe payment website: stripe.com

  • when resizing the page all the little graphics stay fixed on the page (even if being off-screened) and are affected by media queries.
  • The globe also stays relatively fixed.

I know this seems to be a simple problem but everything ive tried has been in vain.

I am looking for preferably a simple structure like this:

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 problem is that if the image is position: absolute;, then it will scale with the entire view width and not the inner container, but if it is position: relative; then it will be better position but it now affects the page flow.

Therefore: what is the best way to put a large independent image on the page floating on the background of a div without it affecting the flow of the page?

bootstrap-4 background css image
1 Answers

:after is what you are looking for. You could try something like this.

<div id="media-section" class="container"></div>

#media-section:after {
 content: url('imgs/bCamera.png');
}
user_41012100
Related