vidmarc Posted June 4, 2018 Share Posted June 4, 2018 I've been asked to add a full size background image to all pages. Is this something that will slow down page loading etc? Or can it be done with css to minimise any slowing down? Once loaded, will it then be cached? Any tips greatly appreciated. Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2018 Share Posted June 4, 2018 If the browser has to go and fetch it, then there will be that one time expense. As long as the browser has it in its internal cache, it should come from the cache from then on. Tip: if the background image can be tiled, do that. Link to comment Share on other sites More sharing options...
vidmarc Posted June 4, 2018 Author Share Posted June 4, 2018 Sadly the background image can't be tiled. He wants it full browser size. Any tips greatly appreciated. Also, where would I add the css for this? Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2018 Share Posted June 4, 2018 You can add a CCS rule to "cubecart.default.css", or you can add it directly to the <body> tag, style attribute in the "main.php" template. body { background-image: url("path-to-image"); } Link to comment Share on other sites More sharing options...
vidmarc Posted June 4, 2018 Author Share Posted June 4, 2018 Thanks. Is there an ideal size I should make it? I've been reading all sorts of info on background images. It gets a bit confsuing after a while with so many browsing platforms. Link to comment Share on other sites More sharing options...
vidmarc Posted June 4, 2018 Author Share Posted June 4, 2018 I've uploaded a background image to images/logos/MondoBG-250.jpg - but I'm not seeing the image when I try to view it in a browser. Does it take a while to appear there once it's been uploaded in Image Viewer? Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2018 Share Posted June 4, 2018 If the rule is in a CSS file, then the URL must be an absolute path or a relative offset directory. absolute path: /images/logos/MondoBG-250.jpg relative offset: ../../../images/logos/MondoBG-250.jpg Alternatively, you can put the image in Foundation's images/default/ folder. (Other skin's folder structure may be different.) relative offset: ../images/default/MondoBG-250.jpg Link to comment Share on other sites More sharing options...
vidmarc Posted June 4, 2018 Author Share Posted June 4, 2018 When trying to view the image here, it isn't displaying: images/logos/MondoBG-250.jpg However, I can view it here: images/source/logos/MondoBG-250.jpg Does Cubecart take some time to convert between the source folder and the final image location? Link to comment Share on other sites More sharing options...
vidmarc Posted June 4, 2018 Author Share Posted June 4, 2018 I've tried this: body { background-image: url("../../../images/source/logos/MondoBG250.jpg"); background-repeat: no-repeat; background-size: 100% 100%; } But it's not filling the browser top to bottom. Any suggestions? Link to comment Share on other sites More sharing options...
bsmither Posted June 4, 2018 Share Posted June 4, 2018 Please study this page: https://www.w3schools.com/css/css3_backgrounds.asp The background-size using measured amounts will affect the size of the image. But what you want is to have the image sized to fit its container. That keyword is probably "cover". (What is not covered is what the browser does when the size of the background image's container changes. Link to comment Share on other sites More sharing options...
vidmarc Posted June 5, 2018 Author Share Posted June 5, 2018 I tried various optoions including "cover", but none filled the entire page. I think it's a bad idea, so I have suggested we go back to a solid colour. Link to comment Share on other sites More sharing options...
bsmither Posted June 5, 2018 Share Posted June 5, 2018 Let us have a web address so that we can experiment in real-time with the CSS. Link to comment Share on other sites More sharing options...
vidmarc Posted June 5, 2018 Author Share Posted June 5, 2018 Thanks for your offer, but I think a solid colour is much better. Link to comment Share on other sites More sharing options...
Hostingwolfs Posted June 28, 2018 Share Posted June 28, 2018 Hi, try this. But before you need image res 1400px x 1240 for cover all device. body { background-image: url(path your image); background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; } Whit this code, the image are be fixed. Enjoy Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.