Header Image Size / Cropping
-
Hello,
I have tried using the Header Image and the Banner Image to get my site to display correctly, but in both cases the image I am using does not fit and gets cropped.
The image is 1920 x 600 as stated in the theme.
How do I get it to display the whole image as intended?
Here is a link to the site in progress: http://flbplaygroundproject.com/
-
I have sent the email as requested. For some reason the image now has a grey filter over it too.
To remove the overlay – try this custom CSS:
.frontpage-banner.frontpage-banner-parallax-bg:before { content: none; }I’ve responded to you with a new parallax.min.js file that may help with the banner.
That worked to remove the grey filter.
However, the js file you sent has not resolved the header size image.
I still cannot get the header/banner image to display correctly. No matter what size I upload it gets cut off. Very frustrating.
I am sorry for the trouble you’re facing.
I looked into this in more detail. The issue has more to do with the way we’re using the image as a background along with this library http://pixelcog.github.io/parallax.js/ to create the parallax effect.
I would suggest you install a child theme and make the following modification.
The child theme can be a theme with an empty style.css and this functions.php:
https://gist.github.com/lyrathemes/c83a7b7a3a1f0563e095b456c00045a0
Then add this file to the child theme.
parts/frontpage-banner.php
<?php /** * The template part for displaying the banner for the front page (static) * * @package vega */ ?> <!-- ========== Front Page - Image Banner ========== --> <?php global $vega_wp_defaults; ?> <?php $vega_wp_frontpage_banner = vega_wp_get_option('vega_wp_frontpage_banner'); $vega_wp_frontpage_banner_image = vega_wp_get_option('vega_wp_frontpage_banner_image'); $vega_wp_frontpage_banner_heading = vega_wp_get_option('vega_wp_frontpage_banner_heading'); $vega_wp_frontpage_banner_text = vega_wp_get_option('vega_wp_frontpage_banner_text'); $header_image = get_header_image(); if($vega_wp_frontpage_banner_image != '' || $header_image != '') { #header image uploaded, no frontpage banner uploaded if($vega_wp_frontpage_banner_image == $vega_wp_defaults['vega_wp_frontpage_banner_image'] && $header_image != '') $frontpage_banner = $header_image; else #header image uploaded, frontpage banner uploaded then removed if($vega_wp_frontpage_banner_image == '' && $header_image != '') $frontpage_banner = $header_image; #no header image uploaded, no frontpage banner uploaded else if($header_image == '' && $vega_wp_frontpage_banner_image == $vega_wp_defaults['vega_wp_frontpage_banner_image']) $frontpage_banner = $vega_wp_frontpage_banner_image; #frontpage banner uploaded else if ($vega_wp_frontpage_banner_image != '') $frontpage_banner = $vega_wp_frontpage_banner_image; ?> <div class="image-banner frontpage-banner frontpage-banner-parallax-bg" style="background-repeat:no-repeat;background-image:url('<?php echo esc_url($frontpage_banner) ?>'); background-size:contain"> <div class="container"> <?php if( display_header_text() ) { ?> <div class="inner"> <h1 class="block-title wow zoomIn"><?php echo esc_html($vega_wp_frontpage_banner_heading) ?></h1> <div class="text-center hidden-xs wow zoomIn description"><?php echo wp_kses_post($vega_wp_frontpage_banner_text) ?></div> </div><div class="helper"></div> <?php } else { ?> <?php } ?> </div> </div> <?php } ?> <!-- ========== /Front Page - Image Banner ========== -->Let me know how it goes.
I really have no experience with child themes. What exactly do I need to install, and how?
For now I have just replaced the frontpage-banner.php file in the theme and it is working well.
-
This reply was modified 9 years, 4 months ago by
dadislotroguides.
Download this zip file: https://we.tl/V6bg7gJ1nH
Go to Appearance > Themes > Add New. Upload and then activate it.
Let me know how it goes.It works well, TY !
However, now the header and footer colours are now different.
They are both exactly the same color: #5e9f00. You can try using the “inspect element” color picker to confirm.
This is so odd, they are in fact the same today. Next time I will take a SS. This has happened twice … the header was much darker.
-
This reply was modified 9 years, 4 months ago by
The topic ‘Header Image Size / Cropping’ is closed to new replies.
