Full screen width header image

  • Hi,

    I’m running a single page site, as a child theme of Superhero, and I want to insert a full screen width header image just below the banner/nav.

    At the moment the header image I’ve just inserted into the page, and it is contained within the main container, but I’d like it to sit snugly below the banner, and stretch the entire screen, as used in this live demo.

    I’ve seen people say you need to put it into a post as a featured image, but my site is a page – is this possible? If so, how?

    Thanks in advance

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi – just to confirm, do you want this image to be in the fixed navigation part of the page, or in the scrollable container area below, like in the demo?

    Is this the image in question?

    https://documentalfilms.co.uk/wp-content/uploads/2014/01/Divider_1-lo-res.jpeg

    Since your theme is just a page, you could try hard-coding the image into your theme files. I could help you with the code if you need it, let me know.

    Thread Starter Paul

    (@pchild1)

    Hi, thanks for getting back to me.

    I’d like it to be in the scrollable container area below, but outside of the 960px container (stretching to full screen).

    I figured hardcoding could be an option and I would like to know how to do this, so your help would be appreciated on this front! However, since I like this theme and will probably use it again, I’d also like to know how to add it in a way that provides more flexibility. Would this require php, or can it simply be done in the admin?

    Thanks again

    Thread Starter Paul

    (@pchild1)

    …And sorry, yes that was the image in question!

    However, since I like this theme and will probably use it again, I’d also like to know how to add it in a way that provides more flexibility.

    You could add a custom field and then echo out the custom field in your theme files. You’ll also need some accompanying CSS tweaks. These types of customizations are a bit beyond the help we can offer here, so if you’re not comfortable making them yourself you might want to look at hiring someone to lend a hand.

    Thread Starter Paul

    (@pchild1)

    Is there not an easy way to do this in the admin without having to get into the php? I assumed as the example site had it displayed it would have been one of the main options…?

    What you’re looking at in the demo site is a slideshow, which requires posts, but you mentioned yours is a single-page site.

    If you have at least one published post you can set up a slideshow in Superhero by following these steps:

    – Activate the Jetpack plugin to get the Featured Content module working
    – Under Settings > Reading > Featured Content, add a tag you’ll associate with your posts for the slider
    – Create a post with a featured image that’s at least 960px wide
    – Assign the post the same tag you declared earlier
    – Optional: repeat the previous two steps for additional posts as you like

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Full screen width header image’ is closed to new replies.