Problem in different page title

Hello for all. Now, I’am creating a new web site for my company, but I got a problem with the title that I created in my design project on Photoshop. The page title use a background color in the text with a tint texture above my text, that is a transparent PNG. With my code, I got the result, but, the texture stay below my text. How can I do this?

Code and example that I created wrong:

Wrong result:

Ideal result:


  1. If that’s a title, it should be a HEADING tag.

  2. you want the dotted image over the text, it needs to be a separate element AFTER the text you place over it.

  3. what you are TRYING to do - have the background only appear over the text when it wraps, is not actually possible. The wrap will enlarge the box, and the background will be applied to the ENTIRE box… which is the result shown in this picture:

Welcome to why designing a ‘layout’ in photoshop is a miserable pile of /FAIL/. The people advocating the “draw a pretty picture” approach needing to be drawn and quartered.

Write your content with semantic markup, bend that markup to your will using CSS, THEN boot up photoshop to create the graphics to hang on your layout. Starting out in photoshop usually results in pictures that are not practical to implement in one’s code, usually is an accessibility /FAIL/ - and a whole host of other problems since there’s a LOT of things you can do in photoshop that violate the WCAG, and are impractical to implement in HTML/CSS.

If you REALLY have your heart set on that behavior when wrapping, My advice is to pre-composite the text to the image ahead of time. Removes the possibility of having real text in the markup and you’d have to make a image each and every time you want to change that heading, but that’s the reality of designing graphics in photoshop without taking the limitations of HTML/CSS into consideration.