The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need a CSS Trick h1 background image: help!

  • This topic is empty.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • #45815

    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.


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


    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.


    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.


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


    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.


    Updated my codepen for left & right text:


    Nice Paulie_D, much appreciated. Thanks.


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

Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘CSS’ is closed to new topics and replies.