Support » Theme: Twenty Eleven » Would like to overlay header text and picture

  • Resolved gilbert.houtekamer


    I am new to WordPress and php. I use the twenty eleven template

    I would like to overlay the blog title, subtitle and search bar with the picture. Right now I commented the <h1> and <h2> out in the header.php file, and put the text in the graphics, see

    I would like the <h1> and <h2> content to come from the header.php code, however.

    Any advice will be appreciated.


Viewing 8 replies - 1 through 8 (of 8 total)
  • esmi


    Forum Moderator

    Do not edit the Twenty Eleven theme. It is the default WordPress theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. First create a child theme for your changes. Or use a custom CSS plugin.

    I did create a child theme, and I am experimenting on the child.



    Forum Moderator

    Not entirely sure what you mean, but perhaps using “display: none;” in the CSS code for the header elements (h1, h2, etc.) would solve the problem? It hides them from view on the page, but leaves the code intact in header.php.

    thanks, actually I would the text to appear overlayd with the chart. When I keep the H1/H2, they are shown on the top of the page, with the picture below it. I would like the H1/H2 text to overlay the chart, such that I can use a picture without, and custom Site Title and tagline with the wordpress GUI.

    .. sorry, too many words missing ..
    … such that I can use a picture withou text, and customize the Site Title and tagline with the wordpress GUI.



    Forum Moderator

    Ah, okay, well you can do that in a few ways — one is to use the image as a background (done in the CSS) or you can do overlay using z-index (if needed) and/or margin settings (negative margins may be relevant).

    I’d suggest using Firebug for working with CSS and looking up CSS on this site:

    Or if you post a link to your site, someone may be able to give you more specific help.

    Thanks, Firebug is helpful.

    This does the trick for me

    #branding hgroup {
    	margin: 0 7.6%;
    	z-index: 1;
    	top: 0px;
    	left: 0px;

    thankyou gilbert, i just tried it on my site and it works a dream

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Would like to overlay header text and picture’ is closed to new replies.