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

How to change Back ground image from tiled to fit the screen? | Forum

Topic location: Forum home » Development » Themes
jon sorrels
jon sorrels Mar 20 '13
Does anyone know how to change the back ground image to fill the page instead of being tiled!
Thanks for any help!
The Forum post is edited by jon sorrels Mar 20 '13
Bob (Coder Whacker)
Bob (Coder Whacker) Mar 20 '13
background-image:url(/pix/smile.gif);
background-repeat:no-repeat;

but maybe you want the image fixed

background-image:url(/pix/smile.gif) Fixed;

Could you please let us know the theme your using, because if you want a site background image you have to make areas of the themes architecture transparent as well.

Such as the Origin theme would need this code.

.ow_header {
background: transparent!important;
}
.ow_page_container {
background:transparent!important;
}
.ow_page_container .ow_page {
background:transparent!important;
}
.ow_page_wrap
{background:url("
URL path to your image file")fixed;
}
.ow_footer{
 background:transparent!important;
}
 

The basic theme this code

.ow_header {
background: transparent;
}
.ow_page_container {
background:transparent!important;
}
.ow_page_container .ow_page {
background:transparent!important;
}
body
{background:url("path to your background image")fixed;
}
.ow_footer{
 background:transparent!important;



jon sorrels
jon sorrels Mar 21 '13
I am using the default theme!
Alia Team
Alia Mar 21 '13
Topic was moved from General Questions.
Bob (Coder Whacker)
Bob (Coder Whacker) Mar 21 '13
So that's the origin theme

.ow_header {
background: transparent!important;
}
.ow_page_container {
background:transparent!important;
}
.ow_page_container .ow_page {
background:transparent!important;
}
.ow_page_wrap
{background:url("
URL path to your image file")fixed;
}
.ow_footer{
 background:transparent!important;
}
 
jon sorrels
jon sorrels Mar 21 '13
Ok I got the image to fit the screen but I would like it to fit the screen no matter what size the screen  if you look at my site www.poledust.com when you scroll down the back ground image repeats again like it starting over but I would like it to seem endless!
Thanks for the code above it works great I dont mind if the header of footer show so I didnt use that part of the code thanks for your help!
Bob (Coder Whacker)
Bob (Coder Whacker) Mar 21 '13
Basically to get a site to fit any screen size all measurements should be percentages and not pixels.  

Your site looks fine in every screen display mode but at 800 x 600 the scroll bar appears. 
The Forum post is edited by Bob (Coder Whacker) Mar 21 '13
Taylor
Taylor Mar 6 '14
I am looking to do the same thing as Jon but with the biohazard theme instead, can you help me? How do you change the pixels to percentages?
Kяuncн Leader
Kяuncн Mar 7 '14

Quote from jon sorrels Ok I got the image to fit the screen but I would like it to fit the screen no matter what size the screen  if you look at my site www.poledust.com when you scroll down the back ground image repeats again like it starting over but I would like it to seem endless!
Thanks for the code above it works great I dont mind if the header of footer show so I didnt use that part of the code thanks for your help!



neither poledust.com or photodrain.com seem to load..
Kяuncн Leader
Kяuncн Mar 7 '14

Quote from Taylor biohazard


Biohazard background is already by default set proper..

body, body.ow {    

background-color: #0D1422;

background-image: url("images/page_bg_image.jpg");

background-repeat: repeat;}


The Forum post is edited by Kяuncн Mar 7 '14
Taylor
Taylor Mar 7 '14
Quote from Krunch
Quote from Taylor biohazard


Biohazard background is already by default set proper..

body, body.ow {    

background-color: #0D1422;

background-image: url("images/page_bg_image.jpg");

background-repeat: repeat;}



I changed the background image and I noticed that if you zoom out or use a larger screen the image tiles and the header image that I used does not stretch to fit the screen, it just stays the same size. How would I go about fixing that?
The Forum post is edited by Taylor Mar 13 '14
Taylor
Taylor Mar 13 '14
Anyone?
John Stanford
John Stanford Jul 5 '14
I believe this is the effect you are after.

http://siteprevue.net/stretch.htm

This virtually impossible within Oxwall without custom coding and the next update will most like overwrite your custom code.
TimoViBritannia
TimoViBritannia Jul 6 '14
.ow_page_wrap {
    position: relative;
    background-image: url('image/image.png');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-size: cover;
    width: 100%;
    height: auto;