CSS를 사용하여 div 배경에 떠 다니는 큰 독립 이미지

질문

현재 웹 사이트 배경에 큰 PNG 이미지를 추가하려고합니다 (Bootstrap 4도 사용 중입니다). 사용자가 화면의 크기를 조정할 때 이미지는 그대로 유지되므로 이러한 독립 이미지는 배경의 일부로 유지됩니다 (CSS 미디어 쿼리의 영향을받는 경우 제외).

배경에 떠있는 이미지의 예 :

이 효과의 예는 Stripe 결제 웹 사이트의 장면 일 수 있습니다. 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.

나는 이것이 간단한 문제인 것처럼 보이지만 시도한 모든 것이 헛된 것임을 알고 있습니다.

나는 바람직하게는 다음과 같은 간단한 구조를 찾고 있습니다.

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%;
}

문제는 이미지가 position : absolute; 인 경우 내부 컨테이너가 아닌 전체 뷰 width로 크기가 조정되지만 position : relative; 인 경우에는 크기가 조정된다는 것입니다. 그러면 더 나은 위치가 될 것이지만 이제 페이지 흐름에 영향을 미칩니다.

그러므로 : 페이지 흐름에 영향을주지 않고 div의 배경에 떠있는 페이지에 큰 독립 이미지를 배치하는 가장 좋은 방법은 무엇입니까?

답변1

: after 는 당신이 찾고있는 것입니다. 이런 식으로 시도해 볼 수 있습니다.

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

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

 

 

 

 

출처 : https://stackoverflow.com/questions/63186518/large-independent-images-floating-in-a-divs-background-using-css