How to add the background image of all my blog pages in Squarespace 7.1?

How to add the background image of all my blog pages in Squarespace 7.1?

Hi. Same background image? Background image for blog content or both blog content, header, footer? Can you share link to blog page on your site?

On 5/14/2021 at 7:33 PM, tuanphan said:

Hi. Same background image? Background image for blog content or both blog content, header, footer? Can you share link to blog page on your site?

Hello~I would like to add the same background image for both blog content, header, footer. Please help, thank you!

Site URL: https://hswaldorf.squarespace.com/config/pages

On 5/15/2021 at 10:32 PM, hswaldorf said:

Hello~I would like to add the same background image for both blog content, header, footer. Please help, thank you!

Site URL: https://hswaldorf.squarespace.com/config/pages

What is password?

6 hours ago, tuanphan said:

What is password?

Password: 26565711
Thank you so much!

15 hours ago, hswaldorf said:

Password: 26565711
Thank you so much!

Which item in header is blog?

item 1, 2, 3, 4, 5, 6, or 7?

5 hours ago, tuanphan said:

Which item in header is blog?

item 1, 2, 3, 4, 5, 6, or 7?

When you click on item 1 "海之聲", there are many hyperlinks in that page. All of them are blogs.
I would like to add the same background image to all these blogs. please help! thank you!

Try adding to Design > Custom CSS

/* blog background */
.blog-side-by-side.collection-content-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6038eb3…/1621244632437-UDR0EUC0QG5K4VOKGG6N/ke17ZwdGBToddI8pDm48kNFo9oxv5Hwi5Jyc-uxa8SJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmAveEbYu85FauSu4e5fzPjXLSLPB6qNiWs2a6iZdCVQUOp8ZF4mRRo4nOWKx1v4vE/Cover+Bg.png?format=1500w);
padding-top: 100px;
}
body.collection-type-blog-side-by-side .header-announcement-bar-wrapper {
    background: transparent;
    position: absolute !important;
}

2 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* blog background */
.blog-side-by-side.collection-content-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6038eb3…/1621244632437-UDR0EUC0QG5K4VOKGG6N/ke17ZwdGBToddI8pDm48kNFo9oxv5Hwi5Jyc-uxa8SJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmAveEbYu85FauSu4e5fzPjXLSLPB6qNiWs2a6iZdCVQUOp8ZF4mRRo4nOWKx1v4vE/Cover+Bg.png?format=1500w);
padding-top: 100px;
}
body.collection-type-blog-side-by-side .header-announcement-bar-wrapper {
    background: transparent;
    position: absolute !important;
}

 

Thanks! That worked.
How can i add zoom effect to the background image?
And I'd also like to remove the thumbnail image.

7 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* blog background */
.blog-side-by-side.collection-content-wrapper {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6038eb3…/1621244632437-UDR0EUC0QG5K4VOKGG6N/ke17ZwdGBToddI8pDm48kNFo9oxv5Hwi5Jyc-uxa8SJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmAveEbYu85FauSu4e5fzPjXLSLPB6qNiWs2a6iZdCVQUOp8ZF4mRRo4nOWKx1v4vE/Cover+Bg.png?format=1500w);
padding-top: 100px;
}
body.collection-type-blog-side-by-side .header-announcement-bar-wrapper {
    background: transparent;
    position: absolute !important;
}

 

Is it possible to add background image of the blog post? 

On 5/19/2021 at 4:03 PM, hswaldorf said:

Thanks! That worked.
How can i add zoom effect to the background image?
And I'd also like to remove the thumbnail image.

Add to Design > Custom CSS

/* hide thumbnail */
section.blog-image-wrapper {
    visibility: hidden;
}

What is zoom effect?

On 5/19/2021 at 8:23 PM, hswaldorf said:

Is it possible to add background image of the blog post? 

Add to Design > Custom CSS

/* blog detail background */
body.collection-type-blog-side-by-side.view-item {
.section-background, .page-section {
    background: transparent !important;
}
& {
   background-image: url(https://images.squarespace-cdn.com/content/v1/6038eb3…/1621244632437-UDR0EUC0QG5K4VOKGG6N/ke17ZwdGBToddI8pDm48kNFo9oxv5Hwi5Jyc-uxa8SJ7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z5QHyNOqBUUEtDDsRWrJLTmAveEbYu85FauSu4e5fzPjXLSLPB6qNiWs2a6iZdCVQUOp8ZF4mRRo4nOWKx1v4vE/Cover+Bg.png?format=1500w);
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center center;
   background-color: transparent !important;
}}

On 5/20/2021 at 11:03 PM, tuanphan said:

Add to Design > Custom CSS

/* hide thumbnail */
section.blog-image-wrapper {
    visibility: hidden;
}

What is zoom effect?

Thank you for your help! It looks good in desktop view, but in mobile view, the hidden thumbnails still occupy the space. Is it possible to remove those thumbnails, so that only a list of blog title display in this page? 

For the zoom effect, I just wanna add some motion to the background. Just like the background of my home page. I set "Image Effect - Zoom" for home page background, and looking for the same effect for my blog background. Thank you!

On 5/25/2021 at 9:59 AM, hswaldorf said:

Thank you for your help! It looks good in desktop view, but in mobile view, the hidden thumbnails still occupy the space. Is it possible to remove those thumbnails, so that only a list of blog title display in this page? 

For the zoom effect, I just wanna add some motion to the background. Just like the background of my home page. I set "Image Effect - Zoom" for home page background, and looking for the same effect for my blog background. Thank you!

use this code

/* hide thumbnail */
section.blog-image-wrapper {
    display: none;
}

22 hours ago, tuanphan said:

use this code

/* hide thumbnail */
section.blog-image-wrapper {
    display: none;
}

 

So much thanks for help! It looks perfect now!

On 6/1/2021 at 11:36 PM, tuanphan said:

Do you want to solve these?

Site URL – https://hswaldorf.squarespace.com/

1. (Mobile-Homepage)

2. (Mobile-Homepage) resize slideshow?

3. (Tablet-Homepage) Resize this?

Sure!! Definitely need your help!! Thank you so much! 

On 6/1/2021 at 11:36 PM, tuanphan said:

Do you want to solve these?

Site URL – https://hswaldorf.squarespace.com/

1. (Mobile-Homepage)

2. (Mobile-Homepage) resize slideshow?

3. (Tablet-Homepage) Resize this?

Hello～Could you help to resize them? thank you~

Site url:

Password: 26565711

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* resize home slideshow */
html, body {
    overflow-x: hidden;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

If resize GG Sheet, it will be like this...doesn't look good

On 6/7/2021 at 8:11 PM, tuanphan said:

Site url:

Password: 26565711

Add to Design > Custom CSS

/* Mobile */
@media screen and (max-width:767px) {
/* resize home slideshow */
html, body {
    overflow-x: hidden;
}
body.homepage .gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

If resize GG Sheet, it will be like this...doesn't look good

Yes, I got your point. Let's keep the original size.
Anyway, thank you! You help a lot.