We build. You grow.

Get best community software here

Start a social network, a fan-site, an education project with oxwall - free opensource community software

Background stretch to fit... | Forum

Topic location: Forum home » Support » General Questions
Cal McNab
Cal McNab Jun 20 '13

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 :)

Cal McNab
Cal McNab Jun 20 '13

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>

Cal McNab
Cal McNab Jun 20 '13

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

Cali
Cali Jun 21 '13
hi cal. My name is cal also. How do I change the background image on my oxwall website?
Cal McNab
Cal McNab Jun 21 '13

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

bilalsonija
bilalsonija Jan 20
Sooner or later (which transit can last a long time) you are going to rid all by yourself of aged fears and restrictions, likewise as things that were programmed into you whenever you ended up pretty youthful! rút tiền 789club