Hi folks,
I use a script on my main website to stretch any given background to fit various screen sizes.
Can anyone suggest how and where to apply it in Oxwall's environment?
Thanks in advance,
Cal :)
Hi folks,
I use a script on my main website to stretch any given background to fit various screen sizes.
Can anyone suggest how and where to apply it in Oxwall's environment?
Thanks in advance,
Cal :)
This is the combined code I typically use on a conventional web page, just need to know where to place it on Oxwall's setup?
----------------------------------------
<style type="text/css">
/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */
html, body {height:100%; margin:0; padding:0;}
/* Set the position and dimensions of the background image. */
#page-background {position:fixed; top:0; left:0; width:100%; height:100%;}
/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
#content {position:relative; z-index:1; padding:0px;}
</style>
<!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6 -->
<!--[if IE 6]>
<style type="text/css">
html {overflow-y:hidden;}
body {overflow-y:auto;}
#page-background {position:absolute; z-index:-1;}
#content {position:static;padding:10px;}
</style>
<![endif]-->
<style type="text/css">
body {
background-color:#ffffff;
background-image:url('http://www.houseofthecaribbean.com/images/ocean-backdrop.jpg');
background-repeat:no-repeat;
background-position:top;
background-size: 100%;
font-family:"Trebuchet MS",arial,sans-serif,tahoma,helvetica,geneva;
}
</style>
<div id="page-background"><img src="http://www.houseofthecaribbean.com/images/ocean-backdrop.jpg" width="100%" height="100%" alt="backdrop"/></div>
Okay, I found a decent solution for my needs, by placing this code in the "Edit CSS" section.
----------------------------------------------------------------------
.ow_page_wrap {
position: top;
background-image:url('http://www.houseofthecaribbean.com/images/ocean-backdrop.jpg');
background-repeat:no-repeat;
background-position:fixed;
background-size:100% 100%;
}
----------------------------------------------------------------------
All the best,
Cal
Hi Cali,
From your Admin control, click on "Edit Theme" and scroll down to the "Theme Customisation" section. From there, click on "Browse" under "Page Background Image" and select an image from your local PC.
Then, you can add the code from my script above, if you are looking to stretch the background, rather than repeated tiling (remember to insert your own image URL).
All the best,
Cal