Solved

Can I add a background image to my SENSE theme homepage?

acopp
Excursionist
21 0 3

I would like to add a background image to my store - is that possible to use Sense theme?

 

My site is www.thejoyfulrebel.co.uk

Accepted Solutions (2)

GabrielS
Shopify Partner
481 106 114

This is an accepted solution.

Hi there,

 

Sure, adding a background image would be possible through CSS. Below, is an example of how you can add a background image to the entire website:

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
}

 

Replacing the URL and adding the above at the end of your theme.css file should be working as expected.

 

GabrielS_0-1714224886357.png

 

 

 

Cheers!

 

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

View solution in original post

GabrielS
Shopify Partner
481 106 114

This is an accepted solution.

Glad that I could be of help!

There is no optimum image size, but you can test and see how different sizes behave. The bigger the image, the higher the quality - however, it can have a negative impact on your website's loading speed.

 

There is also CSS code with which you can control the image positioning, and size.

 

For example:

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
background-size:cover;
background-repeat:no-repeat;
}

Or

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
background-size:600px;
background-repeat:no-repeat;
}

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.

View solution in original post

Replies 3 (3)

GabrielS
Shopify Partner
481 106 114

This is an accepted solution.

Hi there,

 

Sure, adding a background image would be possible through CSS. Below, is an example of how you can add a background image to the entire website:

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
}

 

Replacing the URL and adding the above at the end of your theme.css file should be working as expected.

 

GabrielS_0-1714224886357.png

 

 

 

Cheers!

 

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.
acopp
Excursionist
21 0 3

Thank you so much - that worked!

I just need to adjust my image. 

Do you happen to know the optimum size image for the background?

GabrielS
Shopify Partner
481 106 114

This is an accepted solution.

Glad that I could be of help!

There is no optimum image size, but you can test and see how different sizes behave. The bigger the image, the higher the quality - however, it can have a negative impact on your website's loading speed.

 

There is also CSS code with which you can control the image positioning, and size.

 

For example:

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
background-size:cover;
background-repeat:no-repeat;
}

Or

main#MainContent {
  background: url(https://fastly.picsum.photos/id/908/536/354.jpg?hmac=M2wuBVxh25vxS5l_a0PNxpE_5rsVtgJVC5lbN4HOreA);
background-size:600px;
background-repeat:no-repeat;
}

 

Cheers!

Gabriel Soare | Web Developer
Are you looking to customize your Shopify or to fix a website bug?
You can reach me through my website gabrielsoare.com, DM, or email hello@gabrielsoare.com.
Have I helped you? Like my post.