blog documentation FAQ followers forum marketplace services youtube

in progress Background Image

The Jamroom Network » Forum » Design and Skin Customization » Page » Background Image
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok so i notice it is fairly easy to upload any image to use as a background but it automatically tiles the image which looks horrible. what is the best way to make the background image stretch or fill the entire background?
updated by @zachary-moonshine: 08/06/15 01:54:00AM
douglas
@douglas
10 years ago
2,804 posts
If you are using a small image, it may not look very well if it is resized to a larger size. If it were me, I would make the background image as large as you need/want it. You can also change the repeat to no-repeat in the CSS file were the background image is being called.

For example, if your using the Ningja skin, in your skins/jrNingja/css/site.css, change this:

#wrapper {
    margin:0 auto;
    background-color: #C7C7C7;
    background-image: url('{$jrNingja_img_url}/wrapper_bckgrnd.png');
    background-attachment: fixed;
    background-position: left top;
    background-size: initial;
    background-repeat: repeat-x;}

to this:

#wrapper {
    margin:0 auto;
    background-color: #C7C7C7;
    background-image: url('{$jrNingja_img_url}/wrapper_bckgrnd.png');
    background-attachment: fixed;
    background-position: left top;
    background-size: initial;
    background-repeat: no-repeat;}

You may also want to change the background-size element to cover instead of initial.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
how to get to the css by going to template editor?
paul
@paul
10 years ago
4,335 posts
You can do this by clicking on the 'Style' tab.


--
Paul Asher - JR Developer and System Import Specialist
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
also what would be the perfect size i can always just resize the image so it fills the entire background ?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
i click style then template and search for wrapper?
douglas
@douglas
10 years ago
2,804 posts
Which skin are you using?


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
using the elastic skin
douglas
@douglas
10 years ago
2,804 posts
Can you SFTP into your site?

The html.css file will need to be modified manually, it isn't something you can do in the ACP > Skins > jrElastic > Styles tab.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
yes i have sftp
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
thats how i uploaded the site builder so i can use that to access the css too?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok i am in there now and i see the html.css i clicked on it and i see the background image, what should i add to the code? and then save it ?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
ok sweet i put it in and it worked but now i see its grabbing the same image and putting it in my header and footer so do the same thing with sftp go find header and footer and make it so they are a solid color instead, this is awesome i am getting the hang of this now
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
nice i did that too and it worked very cool man thanks soo much for you guys helping i love it here soo much better already cant wait to go live
douglas
@douglas
10 years ago
2,804 posts
Glad you got it sorted. :)


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
now if i want to add custom css like for example a code to make one image the background for only one page in my menu where would i put that code ?
douglas
@douglas
10 years ago
2,804 posts
That would depend on what page you want it on.

You can add another CSS element and use that class in a div on the page you want it on.

Something like this:

.single_bckgrd {
background:transparent url("{$jrElastic_img_url}/bckgrd.png") no-repeat;
background-size:cover;
padding:0;
margin:0;
}

Then in the template you want to use this in, you would add div around the page... for example if you have a page named artist.tpl it would look something like this.

{jrCore_include template="header.tpl"}

<div class="single_bckgrd">
    <div class="container">

        <div class="row">

            <div class="col12 last">
                Your template code goes here....
            </div>

        </div>

    </div>
</div>
{jrCore_include template="footer.tpl"}



--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
It is a custom page I made so I can just add tye code to a template widget on that page ?
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
hmm ok first i need to figure out how to make a new css element can you give me step by step instructions on this one, sorry man i am new to all this
douglas
@douglas
10 years ago
2,804 posts
Just add this:

.single_bckgrd {
background:transparent url("{$jrElastic_img_url}/bckgrd.png") no-repeat;
background-size:cover;
padding:0;
margin:0;
}

to one of your .css files in your skins/YOURSKIN/css/ directory.

Probably the site.css would be best, but ultimately it is up to you where you want it to go.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
douglas
@douglas
10 years ago
2,804 posts
This is a good place to learn about CSS

http://www.w3schools.com/
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/w3css/default.asp


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
Strumelia
Strumelia
@strumelia
10 years ago
3,605 posts
Cool Douglas!
I know a little html already.
Would you suggest I start by looking through their css, or their w3css first? (w3 is the mobile responsive i assume?)


--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
yes i am learning a lot from all this it is really cool, you guys area great help man cheers
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
saved all those links
Zachary Moonshine
Zachary Moonshine
@zachary-moonshine
10 years ago
831 posts
this was the code i used at ning

body.page-live-chat:before{content:",";
background-image: url( http://api.ning.com:80/files/4O6eIqcn6-5tA1vw-5DlaJ0zi*zFyatst85FbwoIPuI5heGgS8*oYyP6zZQTwmSkmB*ngq23T2erqvXgzrV699wH*WOuBBKv/1235978_10201979230551856_381338962_n.jpg);
background-attachment: fixed;
background-position: top center;
background-size: cover;
background-repeat: no-repeat;}

would this work and just change the url ?
douglas
@douglas
10 years ago
2,804 posts
Strumelia:
Cool Douglas!
I know a little html already.
Would you suggest I start by looking through their css, or their w3css first? (w3 is the mobile responsive i assume?)

If you want to learn more HTML, I would suggest starting at the top left link here:

http://www.w3schools.com/

Learn HTML, Learn CSS and then Learn W3.CSS


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
douglas
@douglas
10 years ago
2,804 posts
Zachary Moonshine"]
this was the code i used at ning

body.page-live-chat:before{content:",";
background-image: url(...}

would this work and just change the url ?

That is basically what I've posted... it mighht look more like this though.

.single_bckgrnd {
    background-image: url('{$jrElastic_img_url}/bckgrd.png');
    background-attachment: fixed;
    background-position: top center;
    background-size: cover;
    background-repeat: no-repeat;
}

You can change the class name ".single_bckgrnd" to whatever you would like it to be. And you'll want make sure to change this "{$jrElastic_img_url}/bckgrd.png" to your skin name and image name.

{$xxYOURSKINNAME_img_url}/yourimagename.png or yourimagename.jpg depending on what type of image you are using.

Then if you wrap code in a div with your class name.

<div class="single_bckgrnd">
    More code here....
</div>

then you should see your background image.


--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos
updated by @douglas: 07/06/15 06:31:57AM