I want to set background-image to a particular container using Pseudo selector (before) . How can I perfectly set background-image to that particular container?
I want to set background-image to any particular container that i want using pseudo selectors
Suppose you have 2 divs as parent and child. You can add a before pseudo-element on the parent div.
.first { text-align:center; position: relative; background-image: url(https://img.freepik.com/free-photo/abstract-grunge-decorative-relief-navy-blue-stucco-wall-texture-wide-angle-rough-colored-background_1258-28311.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; }
.first:before { position:absolute; top:15px; bottom:15px; left:15px; right:15px; content:''; background-image: url(https://img.freepik.com/free-photo/young-asian-man-with-camera-isolated-white-background-photographer-concept_231208-3767.jpg); background-repeat: no-repeat; background-size: contain; background-position: center; }
.second { height:300px; position:relative; }<div class="first"><div class="second">Top<br>Caption</div></div>Thanks