how to use a background picture

Highlighted
New Member
3 0 0

I have been looking all over the internet and I can not get anything to work.

I want to use a background image instead of the plain white for my site.   www.hellofrogsshop.com

I am using the classic theme. I read I need to put stuff in a style.css but that isnt an asset. I am beyond lost.

0 Likes
Highlighted
Shopify Expert
650 0 99

What kind of background image do you want?

for example

A tileable repeating pattern.

A single fullscreen photo

0 Likes
Highlighted
New Member
3 0 0

Just a single photo. I found some nice backgrounds online.

0 Likes
Highlighted
Shopify Expert
650 0 99

First you need to prepare the jpg image.

As a guide 1920 x 1080 at 72dpi with say 80%-85% jpg compression, depending on the image and how it looks with compression, you can vary that to suit. You want the file size to be as small as possible, with acceptable image quality.

Name the image file "background.jpg", then upload the image to the "assets" directory.

Next open the "theme.scss.liquid" file (also in the "assets" directory).

Then add the follow snippet of code to the bottom of the css file.

body {
    background-image: url({{ 'background.jpg' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

 

 

2 Likes
Highlighted
Shopify Expert
650 0 99

That should give you a result like the attched screenshot.

0 Likes
Highlighted
New Member
3 0 0

It worked!! thank you so much! 

0 Likes
Highlighted
Tourist
3 0 2

Hi Ricky,

Could I ask you an unrelated question (the related thread is closed)? Do you have a copy of the liquid you used in this thread to move the product description below the product images? https://ecommerce.shopify.com/c/ecommerce-design/t/minimal-theme-product-description-word-wrapping-1...

This is exactly what I'm looking for, but the dropbox link is dead. Thank you so much, in advance!

0 Likes
Highlighted
Tourist
23 0 2

Hello.

 

If I want to use a tileable repeating pattern. How do I go about it?

0 Likes
Highlighted
Shopify Partner
16 0 0

hi how would i do a tileable repeating pattern? cant find how to do it anywhere:(

 

thanks a ton in advance

0 Likes
Highlighted
Tourist
8 0 1

Use this code:

 

body {    background-image: url({{ 'background.jpg' | asset_url }});    background-repeat: repeat;    background-position: center center;    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;    background-size: cover}

 

notice the 'background-repeat' line has changed too 'repeat'

0 Likes