Full width header and background to Twenty Eleven child theme

  • Hello,

    I’m running the website for my cousin’s campaign and I’ve set him up with a WordPress site based on the Twenty Eleven theme. There are two issues I haven’t been able to resolve though:

    I’d like to have a header image (1920×300) and background image (1920 x 5, repeating vertically) display. I want the images to appear centered on the screen, that way if someone views at a lower screen width, the middle portion of each image will be shown.

    I tried adding the background by adding the background-image and background-size as shown in this tutorial to style.css:

    https://www.css3.info/preview/background-size/

    Unfortunately, it still doesn’t seem to even be picking up the image – I can’t see it anywhere when I view source on the rendered page in IE9. Plus, I haven’t even begun to decipher what I need to change to replace the header image (using the built-in header tool crops it to the page width, whereas I want it to be screen width.

    The website is https://www.lopezforde.net

    Any help would be appreciated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Your website throws this error

    Failed to load resource: the server responded with a status of 404 (Not Found) https://www.lopezforde.net/wp-content/themes/twentyelevenchild/custom_template.css

    Thread Starter mc-paladin

    (@mc-paladin)

    Is it throwing that when you go to the main site, or did you do something to view that page?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    On this page
    https://www.lopezforde.net

    I haven’t tested others.

    Thread Starter mc-paladin

    (@mc-paladin)

    Odd. The page loads normally for me. No background image, but no error.

    Edit: I have removed the background-image and background-size lines from style.css

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    To test this error, try implementing any CSS change in the stylesheet of the Child Theme.

    Thread Starter mc-paladin

    (@mc-paladin)

    I removed the lines for background-image and background-size from style.css. The page is still loading correctly for me in both IE9 and Chrome.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Can you add a border of 10 pixels and red, to any element within the Child Theme stylesheet and see if it appears on the page?

    Thread Starter mc-paladin

    (@mc-paladin)

    Yes. I was able to successfully change the header top border from yellow 3px to red 10px.

    Thread Starter mc-paladin

    (@mc-paladin)

    Anyone else able to offer advice? The child theme is working, but I still am no closer to figuring out the issue in my OP – adding a full screen-width header image and background image to the Twenty Eleven theme. It seems like if I don’t use the header and background image loader in the theme, it won’t display them at all. If I do use the uploader, it crops/scales the image. It seems like there’s a setting someplace limiting the size of the image.

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Full width header and background to Twenty Eleven child theme’ is closed to new replies.