[Solved] Responsive title with different background images on each side

[dc006]

Hello,

i have some css challenge here. To describe what Iam after is challenge as well :)

I need text title that will align in the middle of DIV container. The title needs to have a background image that will apply to its left side and different background image that will apply to its right side. The background behind the TITLE text must be transparent.

~~~~bg image1~~~~ TITLE ~~~~bg image2~~~~

The width of DIV container varies as well as the TITLE text length.

I’ve tried to apply content with :before and :after markup h1 {margin: 0 auto;display: table;} h1:before {content: url(‘image_left.png’);} h1:after {content: url(‘image_right.png’);}

however this does not work for me as the width of content :before and :after equals to the width of image and I can not figure out how to make it responsive.

Any hints appreciated :)

[Soren]

I’m not sure if this helps in any way but I had a little play

http://codepen.io/soren-tree/pen/LsciH

[dc006]

Hey Soren, thank you for suggested approach.

I’ve already played with :before and :after statement this way, however as you pointed the problem with this approach is that the width must be defined.
I need the background on each side to take up all remaining width and keep it responsive as well. Here is the link with some images of what Iam trying to achieve:

See my notes…

[dc006]

I’ve put my code on CodePen for better idea on what Iam after. http://codepen.io/dc006/pen/BupmF

[chrisburton]

Closest that I could get

http://codepen.io/chrisburton/pen/okHrF

[dc006]

chrisburton good work however the width of container is not fluid in your code. Further more the text withinn h1 will will change dynamically on the site (this will hold the page title and we never know the length of title text) so I can not define width of h1 and negative position of h1:before … and so on.

[Soren]

good luck with this one, dc006 :)

Could you post the solution when you find it, please? I’m intrigued.

[dc006]

Whohoo wolfcry911 you are the King! Thank you for posting this solution.
Have a good day.

[chrisburton]

Nice work, @wolfcry911

[Soren]

Agreed.

[Author]

Posts