Jump to content

adding a background image to e-shift theme


carey

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. 
normalize.css
grid.css
common.css
superfish.css
superfish-mobile.css

Can you help? 
 

 

Link to comment
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.

Link to comment
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.

 

Link to comment
Share on other sites

thanks for the response!
Ive f5'ed and cleared the cache. it doesnt seem to work. 

this is the page - https://heritagespiritwear.net/mystore/

background-image: url("https://heritagespiritwear.net/mystore/images/77bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
height:100%;
}

what am I doing wrong? 

Link to comment
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...