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

Replace background image on mobile

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!

Share this post


Link to post

22 answers to this question

Recommended Posts

  • 0
Posted (edited)

Thanks for the quick reply!

But I'm not sure how to upload 2 images. Right now I have one image set as the block background. I'd like to replace it with a media query.

If I could upload 2 background images, it should be easy to hide them as needed, but I don't see an option to load second image.

Edited by AFDesign

Share this post


Link to post
  • 0
2 hours ago, djm said:

@tuanphan

I would like to do the same. Your code snippet: what does it do?

My site: https://thermodynamx.squarespace.com (public)

> Klick on »Kontakt« on top right. On mobile it looks like this:

 

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

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
2 hours ago, tuanphan said:

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

Thanks @tuanphan

I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile:

Screenshot 2020-04-29 at 17.05.05.png

Share this post


Link to post
  • 0
On 4/29/2020 at 10:06 PM, djm said:

Thanks @tuanphan

I see what you are doing here. But is there no way of changing the picture entirely? There’s just no way to display a portrait photo on mobile:

Screenshot 2020-04-29 at 17.05.05.png

You can set new image on mobile. If you like this ideal, please let me know, I will give the code


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0
On 5/2/2020 at 4:25 PM, tuanphan said:

You can set new image on mobile. If you like this ideal, please let me know, I will give the code

@tuanphan Yes, that would be great.

Share this post


Link to post
  • 0
1 hour ago, djm said:

@tuanphan no, not yet. Any ideas?

@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;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

Is there a way to do this same concept, but with an image placed on your page, not a background image in your banner? 

IMG_2351.PNG

Share this post


Link to post
  • 0
On 7/16/2020 at 11:22 PM, LizzyJo said:

@tuanphanThank you! The website is www.weareloudcommunity.com

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1594858759957_4467 {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/06/twitter-292994_640.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
div#block-yui_3_17_2_1_1594858759957_4467 img {
    visibility: hidden;
}
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post
  • 0

@tuanphan Awesome! Thank you! I uploaded and replaced my own gif, but now the top and bottom get cut off, I changed the new image shape to square. How can I get it to fit correctly?

Share this post


Link to post
  • 0
Posted (edited)

Hi Tuan! 

Is there any way you can help me with 2 things?

1) hide a banner image for a specific index page 

2) resize the vh of the banner image

I can't seem to target the banner image.

Currently, I have the code. The adding of the image is fine, but the original banner image is still there and sticks out from underneath.

https://lauren-soto-wjl8.squarespace.com/ PW: hello

Thank you! @tuanphan

Quote

@mobile:  ~"only screen and (max-width: 640px)";
@tablet:  ~"only screen and (min-width: 641px) and (max-width: 949px)";

@media @mobile {
#picture-1 img {
display: none;
}

#picture-1 .sqs-block-image img {
display: block;
}

#picture-1 {
background: url('https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+%283%29.png');
background-repeat: no-repeat;
background-size: 100%;
}
}

https://static1.squarespace.com/static/59074252f5e2319ca143b4c0/t/5f239323bcdb807c8a87030a/1596166951242/About+(3).png

Screen Shot 2020-07-31 at 1.39.34 AM.png

Edited by vvc

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...