Need a CSS Trick h1 background image: help!

[Historical Forums User]

Hello all, can anyone please give me hand. I am struggling trying to get an h1 to have a background image that flows from the right of the text and expands the width of the container. I left a link with a photoshop quick sketch of what I need. The site is responsive and the image should flow with the width of the container. Thanks for any help.

http://www.designersites.org

[bablucolno]

@aaronbalthaser
please try this….
h1 { background: url (yourimg) right top no-repeat; }

[surajnaikin]

if you’re to use background, just background position it right, should that not work? shouldn’t that be easy or there is something else?

besides put a robots.txt with access denied to search engines crawling your site, until you go live.

[CodeGraphics]

Something like this: http://codepen.io/codegraphics/pen/BpLsz

[bablucolno]

http://cdpn.io/oGFIj

[Paulie_D]

Guys, none of the offered solutions are what the OP is looking for.

He only wants the image AFTER the text inside the h1 has finished, and to take up the remaining space.

I seem to recall something on this a little while ago which was solved using a pseudo element…but I’m having trouble finding it.

[Paulie_D]

No sure if this is exactly it but by adding a span it is doable.

http://codepen.io/Paulie-D/pen/hBbtn

[Historical Forums User]

Thanks Paulie_D, that is exactly what I was trying to do. I was experimenting with the span but never thought of using the after sudo element. God willing when I get home from work tonight I will play with around with your code and try to get it to work. It is a necessity that it will be fluid so it conforms to the media queries. I realized my description was not so good so I posted a new jpg to show what I am doing. It is basically a header. If you have any advice to offer in light of the new image I appreciate it. Thank you.

http://www.designersites.org

[Paulie_D]

Updated my codepen for left & right text: http://codepen.io/Paulie-D/pen/hBbtn

[Historical Forums User]

Nice Paulie_D, much appreciated. Thanks.

[Historical Forums User]

Thanks to everyone for your input. Also, surajnaikin I appreciate the advice about robots.txt, although this url is only for testing.

[Author]

Posts