Lots of searching, lots of reading, but nothing is giving me how to add a full screen background image into OC 3.x
I tried adding to the Header.twig file, and I tried adding to the CSS file the following:
html {
background: url(images/14277bgv1.jpg) no-repeat center center fixed; (I even tried using the full URL for the image, but- nope)
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
But that works in neither place. I'll admit I'm not too knowledgeable on css, but I thought I could get this to work. But I can't seem to figure it out. What am I missing to get a full screen (non-scrolling) background image on my site?
OpenCart 3.0.2.0
http://www.CastleGateDesign.com
Normally the image path in OC is: image
Have you also tried (if the image and path is correct, it should work - display is as the image sizes):
And if you do it this way, the image covers the whole page:
And if you have troubles with Android devices, maybe you have to add this:
Just tried following on your site, and it works perfectly (before the <body tag inside the head section):
Have you also tried (if the image and path is correct, it should work - display is as the image sizes):
Code: Select all
body { background: url(images/14277bgv1.jpg) no-repeat center center fixed; }Code: Select all
body { background: url(images/14277bgv1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }Code: Select all
height: 100%; overflow: hidden;Code: Select all
<style>
body { background: url(image/cache/catalog/homebanner/14409-Renders%20v1-1140x380.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
</style>Full Stack Web Developer :: Dedicated OpenCart Development & Support DACH Region
Contact for Custom Work / Fast Support.
Who is online
Users browsing this forum: niagato and 630 guests
