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

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


hswaldorf

Question

  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

19 answers to this question

Recommended Posts

  • 0
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?

image.thumb.png.56d48e0256261ab5e091e0688d4cad23.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
5 hours ago, tuanphan said:

Which item in header is blog?

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

image.thumb.png.2bf8e8d7f3d3e97d4c25cd77980b07e0.png

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!

 

Screen Shot 2021-05-19 at 1.15.56 PM.png

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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
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.

Screen Shot 2021-05-19 at 5.03.08 PM.png

Link to comment
  • 0
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? 

Link to comment
  • 0
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.

Screen Shot 2021-05-19 at 5.03.08 PM.png

Add to Design > Custom CSS

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

What is zoom effect?

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/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!

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

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/27/2021 at 2:24 PM, hswaldorf said:

So much thanks for help! It looks perfect now!

Do you want to solve these?

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

1. (Mobile-Homepage)

hswaldorf.squarespace.com-01-min.png

2. (Mobile-Homepage) resize slideshow?

hswaldorf.squarespace.com-02-min.png

3. (Tablet-Homepage) Resize this?

hswaldorf.squarespace.com-03-min.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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

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

image.thumb.png.516fea0c09479463151203f90ef09a23.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

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 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

image.thumb.png.516fea0c09479463151203f90ef09a23.png

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

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...