carey Posted February 15, 2020 Share Posted February 15, 2020 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 More sharing options...
bsmither Posted February 15, 2020 Share Posted February 15, 2020 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 More sharing options...
bsmither Posted February 15, 2020 Share Posted February 15, 2020 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 More sharing options...
carey Posted February 15, 2020 Author Share Posted February 15, 2020 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 More sharing options...
bsmither Posted February 15, 2020 Share Posted February 15, 2020 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.