Black Friday Sale! Get up to $40 off GP Premium!Learn more

[Resolved] Mobile Page Header Customization Background Photo

Home Forums Support Mobile Page Header Customization Background Photo

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #398071
    Rylan Urban

    Hello, on this site:

    http://jbe.allgreenmarketing.com

    I’m currently using this CSS to make the background image fit within the mobile container:

    @media (max-width: 768px) {
        .generate-content-header {
            background: url(http://jbe.allgreenmarketing.com/wp-content/uploads/2016/12/image-1.jpg);
            background-size: 100%;
            background-repeat: no-repeat;
            background-position: centre centre;
        }
    }

    However, I need the image to be ‘bumped’ down below the menu so its viewable, also, I would like the remainder of the space to be black, not gray.

    How can I do this with CSS?

    GeneratePress 1.4
    #398186
    Rylan Urban

    Thoughts? I tried adding padding but it just moves the menu down, not the background image. Not sure what to do here

    #398190
    David
    Staff
    Customer Support

    Try this as for you background position property instead of center center and adjust the px accordingly:
    background-position-y: 100px;

    #398195
    Rylan Urban

    That CSS doesn’t seem to work at all actually. The Simple Custom CSS doesn’t recognize background-position-y

    #398202
    Leo
    Staff
    Customer Support

    Do you have merged turned on? Any reason why you need to do that?

    From your layout doesn’t look like you want it to merge?

    #398211
    Rylan Urban

    No reason at all… That worked!

    Now for the black background – anyway to fill the rest of the mobile header with black without changing sitewide settings?

    #398256
    Leo
    Staff
    Customer Support

    I think using page header is actually complicating things as it’s inserting as background image.

    If you don’t have any page header content to add to the image, I would recommend adding it as a static image using sections since you are already using it below.
    Then you wouldn’t need the CSS to switch it out for mobile as well.

    #398269
    Tom
    Lead Developer
    Lead Developer

    If you do want to continue using Page Header, you could do this:

    @media (max-width: 768px) {
        .page-header-content {
            background-color: #000;
       }
    }
    #398685
    Rylan Urban

    Thanks!

    I like the page header because it automatically adapts to the screen to make it full page. I find when using standard method you have to set a fixed height,

    Thanks!

    Rylan

    #398716
    Leo
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.