Jump to content

adding a background image to e-shift theme

Recommended Posts

I need help with adding a background image site wide that will stretch to fit. 
these are styles and I've tried it on all. nothing worked. 

Can you help? 


Link to post
Share on other sites

Add the following to the common.css file:

body {
  background-image: url("../images/noimage.png");
  background-repeat: no-repeat;
  background-size: cover;

The path for the URL argument may need to be adjusted. As it is, starting in the /css/ or /styles/ folder (depending on your skin), go up one folder, then over to the /images/ folder, then fetch the image having the filename "noimage.png".

The image will not be repeated (showing just one instance of the image) and be stretched to cover the width of the window.

Edited by bsmither
Link to post
Share on other sites

Because CubeCart (for some skins) will collect, squeeze, and cache page resource files, you will need to have CubeCart clear its internal cache so that changes will be part of a new squeezed and cached resources file.

If your skin doesn't do that, then you will need to force your browser to reload those page resources (CSS, javascript, and image files). This is usually done with CTRL-F5.


  • Like 1
Link to post
Share on other sites

With CSS, rules that come later take precedence (except for !important designation).

With this skin, the common.css file gets loaded with its newly added background declarations, but then blue.css gets loaded and its rule for <body> overrules the similar rules in common.css. In this case, in blue.css, there is a declaration for background that encompasses, as a shorthand notation, all individual background declarations. (See: https://www.w3schools.com/cssref/css3_pr_background.asp)

So, in my browser's diagnostic tools, I can switch off the background declaration for the body rule in blue.css, and that reveals the background image.

However, for this skin, all of the high level <div> blocks (id="header", id="page", and id="footer") also have background rules in blue.css (#header, #page, and #footer).

I suggest commenting out those declarations
/* background:#fff; */

But be careful about letting the background through certain things. For example, "Fill out my online form." will be compromised because the color of a link is very close to the color of the background.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...