Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Replace background image on mobile


AFDesign

Question

I'd like to replace the background header image with one that is designed to fit a vertical layout when site is viewed on mobile. Ideally text and icon sit above the person in the image, rather than to the side like they do for larger displays.

site is https://icosahedron-rust-5y3f.squarespace.com/
password: 2020

The image below is the one I'd like to use for mobile. I can adjust image size/dimensions if needed.
header-physician-smiling-vert.jpg

Any help greatly appreciated!

Link to comment

Recommended Posts

  • 0

Hi! I'm having the same issue with the banner picture, I have tried using one of the codes provided: 

@media screen and (max-width:767px) {
[data-section-id= "5ed96c308cdea2622e3ee6ac"] .section-background img {
    object-position: 60% 100%!important;
}
}

 

For the home banner works since it's a vertical picture but for other areas it doesn't. I'm trying for the image to not be cropped on mobile, so I guess what I need is a way of maybe get a code that readjusts the image to mobile? Anyone can help? I would greatly appreciate it! 

Website address: sarahorganica.com

 

image.thumb.png.fdddb22b5ec33e667926342f2020bd3a.png

image.thumb.png.247a9a0432ecd93b4dc9a2e2a6650a64.png

Link to comment
  • 0
On 12/18/2020 at 7:16 AM, ErikaArevalo said:

Hi! I'm having the same issue with the banner picture, I have tried using one of the codes provided: 

@media screen and (max-width:767px) {
[data-section-id= "5ed96c308cdea2622e3ee6ac"] .section-background img {
    object-position: 60% 100%!important;
}
}

 

For the home banner works since it's a vertical picture but for other areas it doesn't. I'm trying for the image to not be cropped on mobile, so I guess what I need is a way of maybe get a code that readjusts the image to mobile? Anyone can help? I would greatly appreciate it! 

Website address: sarahorganica.com

 

image.thumb.png.fdddb22b5ec33e667926342f2020bd3a.png

image.thumb.png.247a9a0432ecd93b4dc9a2e2a6650a64.png

Add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5ed96c2f8cdea2622e3ee67e #page section:first-child {
    min-height: 30vh;
    margin-top: 10vh;
}
}

Also, I see pricing images look small on Tablet. Do you want to resize it?

https://www.sarahorganica.com/entrena-conmigo

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/19/2020 at 5:21 AM, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

I have been trying to make this work on my site multiple times but I can not make it stick. I even just tried hiding the initial background image but it won't work. Any help appreciated!

Preston-wealth-advisors.squarespace.com / Preston

 

Link to comment
  • 0
On 12/21/2020 at 4:36 PM, tuanphan said:

Add this to Home > Design > Custom CSS


@media screen and (max-width:767px) {
body#collection-5ed96c2f8cdea2622e3ee67e #page section:first-child {
    min-height: 30vh;
    margin-top: 10vh;
}
}

 

Hi!

I am trying to do the same thing for 2 images on my welcome page:

1203553956_ScreenShot2021-03-16at2_43_30PM.thumb.png.bcf966ecdbf889ff43e8d49ef1010044.png

In mobile it looks like this:

1523953978_ScreenShot2021-03-16at2_44_00PM.png.31d4676b917f25e109cc599a83e89a4b.png

 

I would like for the words to be in the blue part. Image can be longer vertically if needed. I don't mind uploading an alternate image for mobile version but I am not sure how to do that.

Second Image:

1873132374_ScreenShot2021-03-16at2_44_49PM.thumb.png.a9cef47b5796ddd78e3a4713dc932b10.png

In the mobile version, only the string can be seen:

1698993297_ScreenShot2021-03-16at2_44_17PM.thumb.png.d6180430cedb407a7369dce565adf360.png

Is there a way to make the whole image be seen on mobile? if not, I don't mind the image being below the words on mobile.


Thank you so much for your help! You are so helpful in this forum!

Link to comment
  • 0
On 3/17/2021 at 4:50 AM, vna said:

forgot to include website details:

www.dearfamilies.com

pw: Welcome

Hi. Have you solved it yet?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 8/20/2021 at 7:16 AM, leyrose said:

Hi there,

 

Can you please help me with having a different background image on the homepage on this site?
https://conscious.org.au

 

Thanks

Hi, On mobile?

Resize it or add new image?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/19/2020 at 12:21 PM, tuanphan said:
@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

 

Hello!

 

I'm trying to just hide the background image (don't need to replace), but it seems the section is just not getting picked up by the code 😞 Can you help?

 

https://bird-apricots-y5tt.squarespace.com/

password: squarespace123

 

thanks!

Anele

Link to comment
  • 0
15 hours ago, Anele0610 said:

Hello!

 

I'm trying to just hide the background image (don't need to replace), but it seems the section is just not getting picked up by the code 😞 Can you help?

 

https://bird-apricots-y5tt.squarespace.com/

password: squarespace123

 

thanks!

Anele

Hi,

Which section? I see video only, no image

https://bird-apricots-y5tt.squarespace.com/home

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 9/10/2021 at 1:56 PM, Anele0610 said:

Hey @tuanphan!

 

Page example: https://bird-apricots-y5tt.squarespace.com/elon-musk

 

Thanks

Anele

Hide Elon Musk Image on mobile?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/19/2020 at 5:21 AM, tuanphan said:
On 5/19/2020 at 5:21 AM, tuanphan said:
@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

 

Hi @tuanphan. I am attempting to hide a landscape oriented scrolling gallery on mobile and replace with a single portrait oriented image on mobile only. I believe this is close to what I would need, but I can't seem to change the code target the gallery. Any help would be appreciated. 

site url: https://bellflower-swan-fhe9.squarespace.com/

pass: deena1

Thank you in advance. 

 

Edited by zacht
Link to comment
  • 0
On 3/10/2022 at 2:01 AM, tuanphan said:

Hi,

Which gallery are you referring to? Can you take a screenshot? Thank you.

Hello @tuanphan thanks so much for the reply. Sorry for the confusion. I am referring to the top of the home page. I've attached a screenshot below. 

Screen Shot 2022-03-11 at 12.28.00 PM.png

Link to comment
  • 0
On 3/12/2022 at 12:30 AM, zacht said:

Hello @tuanphan thanks so much for the reply. Sorry for the confusion. I am referring to the top of the home page. I've attached a screenshot below. 

Screen Shot 2022-03-11 at 12.28.00 PM.png

It looks like you solved by reduce slide height on mobile with this code?

@media screen and (max-width: 767px) {
    [data-section-id="62194590a808f0248c742cc1"] {
        min-height:unset !important;
        height: 86vh;
        margin-top: 0vh
    }
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 3/13/2022 at 7:27 PM, tuanphan said:

It looks like you solved by reduce slide height on mobile with this code?

@media screen and (max-width: 767px) {
    [data-section-id="62194590a808f0248c742cc1"] {
        min-height:unset !important;
        height: 86vh;
        margin-top: 0vh
    }
}

 

@tuanphan yes I was able to find a workaround, thank you. My original plan was to hide the entire gallery and replace it with a single image on mobile only. 

Link to comment
  • 0
On 5/11/2022 at 2:35 AM, NeedHelp123 said:

@tuanphan You are amazing for helping everyone thus far! I tried used the code to make the banner images (I believe it's called headlines) not crop vertically on mobile but it doesn't seem to work... The banner I'm referring to is... https://www.estherypak.com/soulcycleeqx the first image that appears. 

Thank you so much for your help in advance! 

Add to Design > Custom CSS

/* Mobile - Soulcycleeqx */
@media screen and (max-width:767px) {
[data-section-id="6262bac5befc10189ab372cf"] {
    min-height: unset !important;
    height: 35vh;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Can someone help me do this with my background images on mobile only? Specifically for the top portion of my "work page", the way the images are alligned under My Work, and  the images in "about me".

 

https://www.paigerusselldesign.com/

 

Since I imported files from figma as backgrounds, these are rendering super weirdly alligned on mobile. I am just wanting to make sure the images are not overlapping with the wordings.

 

Thank you for reading! I would be eternally grateful for any help.

Screenshot 2022-06-20 183910.png

Screenshot 2022-06-20 183947.png

Screenshot 2022-06-20 184012.png

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...