Adding responsive background behind elements
I would like to add a decorative background behind a particular section on my website. Please refer to the visual attached.
We have an image on the left and some text on the right. Somehow I need to add a decorative div "behind" the text, as you can see it should stretch behind the 2 main elements, overlapping onto the left side where the image is. Ideally, this background would be responsive.
Just looking for general/useful pointers on how to approach this challenge as I am struggling to figure it out.
I can use CSS/HTML/JS and Bootstrap framework if needed.
I tried using Bootstrap columns to create a separate row for the background and then positioning it with
position absolute; and z-inde: -1; but the result was messy.
11 Replies
so the div is the background which should partially overlap the image
now u want the whole thing to be responsive aka change size corresponding to the viewport
If you're implying that I'm contradicting myself, then all I meant was that the background div should appear like on the visual - i.e. stretching over to side of the image
but if the viewport is resized and image reduces in size to adjust to it
so should the background (or it should have some kinda of response), otherwise the image gets smaller, but the background div remains huge - this wouldn't look good I think!
hmm i think i got what u mean..u want it to remain it's appearance regardless of the screen size
they just scale up or down based on how the screen size changes
is it?
Yes, that would be ideal.
k
so the first thing that came to my mind is,
since everything here will change accordingly to the viewport
((responsiveness would be a huge bonus, but the crux of my question is asking for help on how to create such a background to begin with!))
put everything inside a div
set height and width of that div using
vh and vw
so it's always based on the viewport
wait
@naks3614 u want it to be both the same for mobile and pc?
Not necesarrily, I was thinking of hiding the background on mobile as both elements are going to collapse on top of eachother
@ʙᴏᴏʙ 2.0 thanks for your feedback so far, I am experimenting with VH/VW
well then lemme proceed on what I was saying
so, make the div containing everything responsive to the viewport using vh and vw
then size all the things inside that div, the background, image, text everything responsive to THAT div aka their parent using % unit
by doing that, when screensize will change, the div will change accordingly and since everything inside the div is sized based on their parent or the div,, they'll change accordingly as well
Sounds good, I will give it a try 👍
Thanks for your help
welcome