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

[acopp]

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

[GabrielS · 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.

Cheers!

[GabrielS · 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.

Cheers!

[acopp]

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