Hello there!
I hope everybody is having a great week so far.
I just started switching over a website in the past week from another service to Shopify. It’s my first time using Shopify, so I’ve been learning as I go.
I currently have an issue where I have a Header image that shows and displays on the Desktop side right now as it should (mostly), but when I switch it to look at it on the Mobile side, the Header Image isn’t displayed at all and the site just shows the Header Logo which is nice and centered.
I have been reading and googling for different solutions, and have added some different codes into the CSS, but haven’t found a solution yet to fix this issue.
I’m attaching an image that shows what I’m seeing:
Hi @CaffeinatedDiab ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
Hey @CaffeinatedDiab , the reason the header image disappeared is that it was designed to be responsive for desktop only. You can solve the problem by adding the following code to the last part of the base.css file:
@media screen and (max-width: 990px) {
header.header.header--mobile-center {
background: url(/cdn/shop/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956) no-repeat;
background-position: center;
object-fit: cover;
background-size: cover;
}
}
Result:
So, this works only if I remove some of the other code I already had going:
@media screen and (min-width: 990px) {
header.header {
background: url(“https://cdn.shopify.com/s/files/1/0639/4599/8535/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956”) no-repeat;
background-size: 100%;
}
:root{
–page-width:100% !important
header.header.header–mobile-center {
background: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956) no-repeat;
background-position: center;
object-fit: cover;
background-size: cover;
}
If I remove that code, it allows the mobile to display right. But it then doesn’t display the Desktop side right.
I’m messing around with the CSS now, trying to figure it out. I know my Star Background image I already set site wide with CSS, I’m just not sure what I’m doing yet on the Header image.
Your code so far has got me partially in the right direction, so I appreciate it!
Okay, so it’s being weird the more I remove/add CSS that was already there.
Here’s my current CSS I have at the end of the base section:
“}
.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/12000x4000_Star_background.jpg) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
@media screen and (max-width: 990px) {
header.header.header–mobile-center {
background: url(/cdn/shop/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956) no-repeat;
background-position: center;
object-fit: cover;
background-size: cover;
}
}”
Figured out how to use the coding block to insert it.
Here’s the code that I have at the end of the base.css section right now, and the Header Image is only showing up on the mobile side right now.
.gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/12000x4000_Star_background.jpg) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
@media screen and (max-width: 990px) {
header.header.header--mobile-center {
background: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956) no-repeat;
background-position: center;
object-fit: cover;
background-size: cover;
}
}
Still working on this, the desktop and the mobile side are displaying differently. I can get it to display on either the desktop side, or the mobile side, but not both right now.
I’m still looking for the solution here. Desktop doesn’t show the banner image now (as seen in first images), but mobile now does.
I’m trying to get the hyperspace banner to appear in both the desktop and mobile side.
Here’s the current code I have at the end of my base.css section:
}
.gradient {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/12000x4000_Star_background.jpg) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
@media screen and (max-width: 990px) {
header.header.header--mobile-center {
background: url(https://cdn.shopify.com/s/files/1/0639/4599/8535/files/72_x_16_Brighter_Hyperspace_Coffee_Header_Banner_RocketBean.png?v=1701883956) no-repeat;
background-position: center;
object-fit: cover;
background-size: cover;
}
}
Here’s some code I think I entered in the header-group section early on trying to solve it (this might have already been there, I can’t remember now):
"header": {
"type": "header",
"settings": {
"logo_position": "middle-left",
"menu": "main-menu",
"menu_type_desktop": "dropdown",
"sticky_header_type": "on-scroll-up",
"show_line_separator": true,
"color_scheme": "background-1",
"menu_color_scheme": "background-1",
"enable_country_selector": true,
"enable_language_selector": true,
"mobile_logo_position": "center",
"margin_bottom": 0,
"padding_top": 36,
"padding_bottom": 36
}
}
},
"order": [
"announcement-bar",
"header"
]
}
If you need the website link
https://hyperspacecoffee.com/
Password is still:
coffee1
