Use a large header image (or banner) on Pages based website

  • Resolved cindy c

    (@cindy_conlinyahoocom)


    11 years, 2 months ago

    Hi! I’ve installed Quark and created a child theme for my site – all “Pages” no posts. I have a simple layout – and I want to use a large header or banner all the way across the top, then have a bar with navigation (again, the full width), then the content, then footer. This is my first WordPress site… and I’m better with straight Dreamweaver.

    Here is the preview site: https://djxstation.com.previewdns.com/ and you can see what I mean. I just can’t figure out where to put the image – and how to get it to display. And how to un-float the nav on the right (I commented that out of my stylesheet, yet it’s still on the right). I moved the nav down, not sure to the right spot. I don’t need a “Banner” per se, I use that term to indicate full-width graphic here.

    In the long run, the design includes a movie file (not Flash) for the width of the screen, as here: https://autodjpac.com/ (I did not create that site, but I am using that layout design style and some of the content.) Is that possible?

    I’m stumped, and I’ve tried so many things over the last 2+ weeks – numerous theme templates activated … I am OK with php but having a really hard time following it. I get the header.php and such, just not where these functions are getting the get_header_image() and how it’s working.

    Any help would be so greatly appreciated!
    thank you, Cindy

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    Hi Cindy,

    The easiest thing to do would be to apply a background image to #headercontainer. If you have a look at my demo site, this container goes full across the screen. On your site, it looks like you’ve added a max-width to that style though, so you’d need to remove that.

    After adding you background image, you can then simply use the APPEARANCE > HEADER option to add in a logo (with a transparent background)

    Thread Starter cindy c

    (@cindy_conlinyahoocom)

    Hi Anthony,
    Thank you so much for taking the time to respond to me! I’m sure you are busy so I really appreciate the help.

    I think in the interim I did figure out how to add that image, using the Appearance > Header with an uploaded image. I must have changed the CSS somewhere to get it to be larger than that 300px but I can’t remember where! But, that doesn’t allow me to upload the logo, so now I switched to a background image on #headercontainer. It’s starting to come together better, thank you!

    I have a long way to go in terms of understanding of themes, thanks again for your help!!

    Cindy

    Theme Author Anthony Hortin

    (@ahortin)

    No probs ??

    Thread Starter cindy c

    (@cindy_conlinyahoocom)

    Hi Anthony,

    I did add a background image to #headercontainer. I removed the max-width from it, too. I read on one of your other support posts that background images aren’t responsive, but I need to make this site shrink down nicely like your demo site does. I can’t use a front page header widget because that image (to be replaced with a movie file) is the header for all pages on the site.

    New location for my site: https://djxstation.com
    How can I make this work? I have other styles in my child theme with the max-width set to 1200px, the “banner” class. Otherwise the gray bar extends the full width of the screen, but my header image (background) does not. My content isn’t really responsive, either, so I wonder what I did wrong. How can I remove the full-width-100% display on an element like the banner but allow the nav and main content area to remain responsive?

    My other difficulty in the header is the logo I uploaded. It’s not playing within the constructs of the background header image – it shows up way off to the left on wide screens. Any suggestions?

    Thank you so much for your template – I love the way it works in full but I’m trying to use such a small portion of it at present.

    Cindy

    how to do banner image dynamic please help me its urgent

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Use a large header image (or banner) on Pages based website’ is closed to new replies.