Jump to content

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

Recommended Posts

  • Replies 18
  • Views 1.6k
  • Created
  • Last Reply
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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
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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.