I think this should work well: https://codepen.io/tomliv/pen/ZELBrYN
with some tweaks On Tue, Mar 30, 2021 at 3:22 PM Wade Smart <wadesm...@gmail.com> wrote: > > What do you have so far in terms of code? > > -- > Registered Linux User: #480675 > Registered Linux Machine: #408606 > Linux since June 2005 > > On Tue, Mar 30, 2021 at 1:57 PM Tom Livingston <tom...@gmail.com> wrote: > > > > Hi listers, > > > > Long time no speak. > > > > At the link below is an image of a layout I am trying to do. I come > > across this frequently. A parent container with a bg image and a child > > content container. > > > > horizontally, this is pretty easy, however as a responsive component, > > mobile gets tricky. > > > > MOBILE: Content is 50% height of the parent. Parent's BG image is > > visible in the other 50% (top, lets say) but the image runs behind the > > content which has a translucent bg color. > > > > DESKTOP: Content is 50% width of the parent. Parent's BG image is > > visible in the other 50% (left) but the image runs behind the content > > which has a translucent bg color. > > > > How would you handle this in CSS only? I'd like it to not rely on a > > fixed height for mobile. > > > > https://cln.sh/a4nZxt > > > > > > Thanks in advance. > > > > -- > > > > Tom Livingston | Senior Front End Developer | Media Logic | > > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com > > > > > > #663399 > > ______________________________________________________________________ > > css-discuss [css-d@css-discuss.org] > > http://www.css-discuss.org/mailman/listinfo/css-d > > List wiki/FAQ -- http://css-discuss.incutio.com/ > > List policies -- http://css-discuss.org/policies.html > > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > ______________________________________________________________________ > css-discuss [css-d@css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ -- Tom Livingston | Senior Front End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com #663399 ______________________________________________________________________ css-discuss [css-d@css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
