How to customize page title banner size

Dear @Imraz  and Team,

I have a question regarding banner customization. I have tried everything but it didn't work so I am writing here now.

I am able to add image to the banner BUT I want the banner to be a little longer in height so it shows all the image and background should be a little clear. I have attached a screenshot of one page. I have added an image below the banner to show the clarity I want in the banner itself. So I want my banner to look like the image below BUT with full width and the height as per image below the title banner or similar.

banner.PNG
1M

Comments

  • see this image too for better understanding @imraz 

    banner.PNG
    1M

  • Thanks for contacting us!

    Do you want to display like this: http://prntscr.com/mqqc76

    Do you want it for the default page template only coz posts already has this feature?

    Thanks
  • Hi @Imraz,

    I believe you did not understand my point, i want only 1 image in the banner and no image in the content area.

    However, i want the banner size to be big in height so it looks like the height you can see in image i currently have in content area. 
  • edited February 27
    You have used the background image for this page specifically of page-id: 31. So for the same to set use the below custom CSS to paste in the theme's custom CSS box:

    /*CSS for page ID  31: set bg image to full width*/
    .page-id-31 .page-title-section {
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }
    /*CSS for page ID  31: set bg image to full width*/

    /*Overlay need to set for bg image of for page ID  31*/
    .page-id-31 .page-title-section .overlay{
    padding: 366px 0 48px;
    background-color: rgba(183, 170, 170, 0.38);
    }
    /*Overlay need to set for bg image of for page ID  31*/

    *You need to set the value of padding 366px to set high of the image height. For the clarity, purpose change the overlay color i.e. rgba(183, 170, 170, 0.38) to yor own

    Let me know did it work!
  • Dear @Imraz

    That is my point. I want to use different images. Can you advise if 2000 x 600 is a good dimension? If not ,please advise what image i should use?. First I will add different images for each page with its page ID, so  i just want the banner size to be full width and height to fit the image
  • Also,, i dont know how to write CSS so please help me with CSS so i can just copy paste it. (for banner size and for overlay colour too
  • In case if you want an image of different height for different pages, you just need to use the same above CSS code for each page. Only you need to change the value 31 with the page ID of another page. To know ID use Reveal IDs plugin.

    If using the same height for all pages replace the above and just use single CSS for all the pages. i.e:

    /*page banner set bg image to full width*/
    .page .page-title-section {
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }
    /*page banner set bg image to full width*/

    /*Page Overlay need to set for bg image*/
    .page .page-title-section .overlay{
     padding: 366px 0 48px;
     background-color: rgba(183, 170, 170, 0.38);
    }
    /*Page Overlay need to set for bg image*/

    Let me know if any confusion!

    Thanks
  • Dear @Imraz

    This is great. I have successfully setup the images as i wanted. just 2 more questions:

    1- Can you give me a CSS to keep the overlay transparent so the image comes as it is?

    2- Can you give me a CSS to highlight the text that is coming in the banner so it is easily readable/?
  • edited February 27
    1) Overlay to be transparent, add one more line below the line padding: 366px 0 48px; in the previous CSS:

    ie.    background-color: transparent !important;

    2) To change color use the below CSS:

    /*page title text*/
    .page .page-title-section .page-title h1,.page .page-title-section .page-breadcrumb *{
    color:#6d2425 !important;
    }
    /*page title text*/


    Let me know again!
  • Dear @Imraz,

    The first part is done.  in second part, i need to highlight the title text (not change colour). Like this 


  • Use this one:

    /*page title text*/
    .page .page-title-section .page-title h1,.page .page-title-section .page-breadcrumb *{
     text-shadow: 0px -0px 35px #008000,0px 0px 35px #008000;
    }
    /*page title text*/
  • Is it possible to put it as TEXT BACKGROUND in the CSS but CSS should put background ONLY behind the text and not the full length line?

    The code you have given is for SHADOW and the shadow is very light even when i try dark colour code. 
  • You can also try this one:

    /*title bg color*/
    .page .page-title-section .page-title h1,
    .page-breadcrumb {
       background-color: rgba(109, 36, 37, 0.7);
       padding: 3px 10px 5px;
       display: inline-block;
    }
    .page-breadcrumb {
        float: right;
    }
    /*title bg color*/
  • This is solved, could you please give me a CSS so my images look normal on mobile? for example www.pangeaworldwide.sa/services the image look very big in height when opening on mobile. I need CSS for the 2 following:

    1- to make the image size of page title banner look normal in mobile.
    2- To remove breadcrumb from all page title banners 

    Thanks
  • @imraz 

    This is solved, could you please give me a CSS so my images look normal on mobile? for example www.pangeaworldwide.sa/services the image look very big in height when opening on mobile. I need CSS for the 2 following:

    1- to make the image size of page title banner look normal in mobile.
    2- To remove breadcrumb from all page title banners 

    Thanks

  • You can try:

    /*hide breadcrumb: set image on mobile */
    @media only screen and (max-width: 480px) {
        .page-id-31 .page-title-section .overlay {
            padding: 45px 0 45px !important;
        }
        .page-title-section .page-title h1 {
            font-size: 24px !important;
        }
        .col-md-6 {
            width: 100% !important;
        }
        .page-breadcrumb {
            display: none !important;
        }
    }
    /*hide breadcrumb: set image on mobile */

    Let me know did it work!

    Thanks
  • Hello Imraz,

    It worked, thanks a lot. 
This discussion has been closed.