Archived topic
Mobile Page Header Customization Background Photo
9 replies · Started by Rylan Urban on October 5, 2017
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?
Thoughts? I tried adding padding but it just moves the menu down, not the background image. Not sure what to do here
Try this as for you background position property instead of center center and adjust the px accordingly:
background-position-y: 100px;
That CSS doesn't seem to work at all actually. The Simple Custom CSS doesn't recognize background-position-y
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?
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?
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.
If you do want to continue using Page Header, you could do this:
@media (max-width: 768px) {
.page-header-content {
background-color: #000;
}
}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
Glad we could help!
