Jump to content

Background Image on Blog Index Page

Recommended Posts

Site URL: https://cinnamon-guitar-2zdw.squarespace.com/blog

 

Hello, I need help with adding a background image to my blog index page with css. 

...or,  adding a background image to to the wrapper of each blog post.

I've been playing around with this code, but nothing is working:

 

.tweak-blog-list-style-stacked .BlogList-item-image {
      background-image: url(IMAGE URL HERE)
    width: 100%;
    max-width: 500px;
}

 

If anyone can please advise, I'd really appreciate it!

Site Password: 7512 

Link to comment
  • Replies 6
  • Views 1.5k
  • Created
  • Last Reply
.collection-type-blog.view-item .Content-outer .Main {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

image.thumb.png.fb994d39330fabcfbe660a4b2c9fae51.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 2/5/2020 at 1:47 AM, tuanphan said:

.collection-type-blog.view-item .Content-outer .Main {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

image.thumb.png.fb994d39330fabcfbe660a4b2c9fae51.png

 

It didn't work for me. 

Link to comment
On 2/5/2020 at 1:47 AM, tuanphan said:

.collection-type-blog.view-item .Content-outer .Main {
    background-image: url(https://beaverhero.com/wp-content/uploads/2019/06/trees-3464777_640-min.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

image.thumb.png.fb994d39330fabcfbe660a4b2c9fae51.png

Hi, I also tried putting this code into the actual page in the page header injection, but that didn't work either. I would like to add a background on the blog index page: 

https://cinnamon-guitar-2zdw.squarespace.com/blog

Password: 7512

Link to comment
8 hours ago, tweezy said:

Hi, I also tried putting this code into the actual page in the page header injection, but that didn't work either. I would like to add a background on the blog index page: 

https://cinnamon-guitar-2zdw.squarespace.com/blog

Password: 7512

I see you fixed?

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
  • 1 year later...
On 2/8/2020 at 1:45 PM, tweezy said:

I was able to figure out how to add a background to the blog index, but not the individual blog post like your screenshot above.

Would you mind sharing how you did it? I've been trying to get a background image to appear and it's driving me crazy. I almost managed it in inspect tools by setting the background for any .section-background div to transparent, but it didn't work on the actual website and even in the inspector, I could only show the body element background colour, not the image. It's very frustrating!

If anyone else would be able to help, the website in question is: https://www.bcaexhibits.org/objects-revealed-1, password: ObjectsRevealed_21

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.