[Resolved] Mobile Page Header Customization Background Photo

[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?

[Rylan Urban]

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

[David]

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

[Rylan Urban]

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

[Leo]

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?

[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?

[Leo]

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.

[Tom]

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

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

[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

[Leo]

Glad we could help!

[Author]

Posts