Change the Background on my Website
The majority of Shift4Shop templates will utilize a background image combined with a solid color in order to achieve a specific look and feel.
This effect is achieved by using a solid color (in this case, black) for the background while also adding an image that creates the honeycomb pattern. This is all controlled via the theme's CSS file.
To change your site's background, you will need to edit the CSS file specific to your selected theme and change its "body" style to suit your needs
Accessing the CSS file
From your Online Store Manager:
Go to Settings > Design > Themes & Styles.
Click on the Edit Look/Colors (CSS) button located at the top of the page.
Once there, you will see the graphical Style Sheet Editor, which outlines all of the various styles contained on the style sheet and allows you to edit them individually.
3. While in the Style Sheet Editor, look for the "body" style and click on its individual Action > Edit button.
4. Look for the "background" field and change its values to suit your needs.
Editing the CSS
The body style's background section will usually contain a hex value for the color (#xxxxxx) and a URL path to the image that's being used. You may also see some instructions on how the image should be displayed. For example, in the following example, the default style has this as its background:
#020202 url(images/BG_body.jpg) no-repeat top center
In this case:
#020202 - specifies a dark color
url(images/BG_body.jpg) - specifies the path to the image
no-repeat top center - specifies the image's alignment and display.
Removing the Image
If you'd like to remove the image, edit the field to include only the color's hex value. You can also take this opportunity to edit the background's solid color altogether by specifying your own color choice.
Changing the Image
If you'd like to change the actual image that's being used, upload your new image and reference it in the CSS file instead.
Image Placement
There are also a few CSS image display options you may use to control how the image is displayed. Please click here for an external reference that contains more information on these CSS tags.
Some common options are:
no-repeat: image displays only once on the page
repeat-x: image repeats horizontally across the page
repeat-y: image repeats vertically down the page