Flexible background image [SOLVED]

Question

Hi, guys! I'm having a problem with flexible background image. I added to the body these lines:


filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bk.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bk.png', sizingMethod='scale')";
overflow: -moz-scrollbars-horizontal-vertical;
margin: auto;
padding: 0px;
text-align: center;
background-position: center center;
background: url('../image/bk.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%; .


Well, everything is working fine on chrome, mozilla and latest IE, but after adding these lines:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bk.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bk.png', sizingMethod='scale')";
overflow: -moz-scrollbars-horizontal-vertical;
,

the site is unclickable and the scrolls doesn't move anymore - like the page is stuck. I know the problem is in the 2 lines I added above, but, if I don't add them, the background will reman unscaled in the IE.
I read that if I add these two lines in a div, probably I can get what I want. But the question is: where should i place this div and these lines. There are no index.php pages, like there is in joomla, where I can easily add some div tags, then edit .css and it's on. I can't find such a possibility here - In open cart.

So, any ideas?

Answers

see -> http://css-tricks.com/3458-perfect-full ... und-image/

Basically it is saying you should not use on the html or body element but create a div with 100% width

'yes, that's the page where I took it.

But where should I place this new div? In modules or somewhere else?

Put half of it in your header.tpl and the other half in your footer.tpl

i.e.

header.tpl

<body>
<div id="background">
<div id="container">


footer.tpl

</div>
</div>
</body></html>

Unfortunately, nothing changed. The area is still unclickable, unreachable.

I added the div tags in the header an footer files, and added following lines to the stylesheet.css:

#background {
width: 100%;
overflow: -moz-scrollbars-horizontal-vertical;
background-position: center center;
background: url('../image/bk.png') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.bk.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bk.png', sizingMethod='scale')";
}
body {
margin: auto;
padding: 0px;
text-align: center;
}


Is there something what I'm doing wrong, or this solution is just impossible here?

to be honest, I would advise against using it as it is sketchy at best and as you have seen, not compatible in all browsers.

Well, but can you advise me another solution?

This looks promising

http://paulmason.name/blog/item/full-sc ... e-css-code

Yes, indeed. But in which files I ghouls put these XHTML lines? It would be much easier if there was only index.php file, but now '- I even don't know from what place should 'i start...

You just need to edit catalog/view/theme/default/template/common/header.tpl

put

Code: Select all
<img alt="full screen background image" src="/background.jpg" id="full-screen-background-image" />


after the <body> tag

no need to worry about the wrapper

--

then add the following to your style sheet, or modify the existing styles if they already exist

Code: Select all
html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}

#full-screen-background-image {
  z-index: -999;
  min-height: 100%;
  min-width: 1024px;
  width: 100%;
  height: auto;
  position: fixed;
  top: 0;
  left: 0;
}

Thanks!

This is an easy, fast, but really effective solution.

Source: http://forum.opencart.com/viewtopic.php?t=47832

More

  • Adding and Linking and Image in the Header
    QuestionHi, I want to add an image in the header which links to the delivery page. I know how to add the image as a background but how would i go about adding it into the header.tpl and linking it to the delivery page?Many thanksAnswersdont add it as a background, it will need to be an physical clickable element if you want to link it
  • [SOLVED] Meddling and now pictures won't upload.
    QuestionHiWhen I first moved my domain over to Vidahost it was set up as a sub-domain of the main account.Today I have moved the domain and copied all the files accross to set up http://www.flyballstuff.co.uk as a seperate site. Since doing this everything works fine except that I now can't upload images. Everything goes through as normal and I
  • Krijg geen verzendkosten te zien
    QuestionHi, kan iemand mij helpen om verzendkosten weer te geven bij een bestelling?Ik heb gekozen voor vaste verzendkosten. Maar bij de bestel totalen wordt het niet weergegeven.Wat doe ik fout ?AnswersNa wat speurwerk ben ik erachter gekomen. Fout was dat ik producten had ingesteld op "Hoeft niet verzonden te worden" Dan mis je stap 3
  • Worldpay Payment Module Problem 1.4.7
    QuestionHi,I am experiencing a problem with the Worldpay payment gateway, when a user creates an account with the site and uses the Worldpay payment method it doesnt send any information through to WorldPay the first time, if you reattempt the information is sent through correctly and payment can proceed I cannot see any reason why this would be
  • sku ON INVOICE
    QuestionHello...有誰能告訴我如何把sku 加到invoice 上嗎? 我懂得加到product page 上去, 卻不懂加上invoice 上去...真暈... 誰可以春教一下呢, 萬分感謝!FelizoneAnswersfelizone wrote:Hello...有誰能告訴我如何把sku 加到invoice 上嗎? 我懂得加到product page 上去, 卻不懂加上invoice
  • How to set Contact SEO URL
    QuestionHi folks,I'm looking where in the Admin site I can set the SEO URL for the Contact form page. I can't find it. SEO URLs are active. Does anyone know where or how can I set it as "/contact" instead of "index.php?route=information/contact"?Thank you.AnswersYou will need a mod to do this.I believe there is one in the forum
  • Simple coding SKU ON INVOICE
    QuestionDear All,I would appreciated if anyone can let me know what file, and stpes to add SKU code to be displayed on PRODUCT INVOICE.I have tried and added SKY CODE perfectly to product page, however, i got error "Notice: Undefined index: sku in C:\AppServ\www\upload\admin\controller\sale\order.php on line 1327". The column SKU
  • Facciamo business?
    QuestionCiao ragazzi, sarò breve nel presentarvi la mia idea, che poi eventualmente andremo a sviluppare insieme.Mi occupo di internet e tutto ciò che ci gira intorno da oltre un decennio, ho realizzato decine di siti (Wordpress e Joomla) ed ho una buona esperienza anche in ambito commerciale. Ho deciso di buttarmi a capofitto sul segmento
  • [Solved] هل بالامكان اختصار روابط الموقع ؟؟
    Questionهل بالامكان اختصار روابط الموقع ؟؟يعني مثلا موقع رابط القسم الي ببيع سيارات يطلع كدهhttp://www.example.com/index.php?route= ... ry&path=41ممكن نخليه يطلع كدهhttp://www.example.com/carsتقبلو تحياتيAnswersنعم يمكن ذلكأولا قم
  • Is it possible to shorten links website?
    QuestionIs it possible to shorten links website?I mean for example a link section to the site to sell cars seen sohttp://www.example.com/index.php?route= ... ry&path=41Can I make it appear in this mannerhttp://www.example.com/cars????????????????????thanksAnswersActivate and assign SEO URLs.
  • New window/tab onclick when someone presses confirm order
    QuestionHi, I am using opencart_v1.4.7 and guest checkout is what we use, now it would be a massive help if someone can tell me how to open the payment provider page(e.g. paypal) on a new tab/window after someone clicks on "Confirm Order", if possible also close the parent window. Any help will be greatly
  • How to change invoice email text?
    QuestionHow can I change and add text (my terms) to the invoice send to the customers for each sale? This is legally required in Germany as a penalty issue!AnswersDepending which payment gateway your business may be using, some of them lets you the possibility to set the orders in authorization mode which would allow you to set a comment per each
  • Hide store until user is logged in
    QuestionHi, I'm looking for a shopping cart for a client of mine, I've been told OpenCart is one of the best ones and so far I'm really impressed. My client has a current store which is 110% manual, standard html markup with a custom PayPal button for each product. They want to move from this to something more efficient and user friendly. I'm
  • How do I remove the Manufacturers from home.tpl?
    QuestionHello, Assuming the site was default: v1.5.1.3... How do I remove the Manufacturers logo’s and links underneath the featured section in home.tpl? Basically I want to remove the manufacturers below the featured and above the footer links. Many thanks in advance,AnswersProbably quite simple, any ideas? Thanks as always. Would it be
  • [SOLVED]What could be causing the price to add a zero?
    QuestionUsing OC 1.5.1.3 & has been modified using vQmod xml files but when i add or edit a product, it is adding an extra zero to the price, for example.....I price an item @ 10.00 (£10.00) then save it, it saves but shows it as 100.0000 in admin instead of 10.0000 & £100.00 in the site?I have not a clue whats causing it & its