Background Image ?

[Nightshift]

How can i add an background Image  ? I only know how i can add a header Image.

 

How can i add a color too ? i like background image and for bigger screens black color and image end zones..

 

is there a general css object list for important css objects ?

[K4RL]

I altered it rather sloppily in global.css

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: {theme="text_color"};
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-image: url("path_to_image.jpg");
    background-color: {theme="page_background"};
}

[Cemmos]

Go to ACP -> Themes and the select Manage Resources on the theme you're editing. Upload your background image there and it'll give you a template tag to use.

Then visit ACP -> Themes -> Edit HTML & CSS -> CSS -> core -> front -> custom -> custom.css

body {
    background: url({resource="bgimage.jpg" app="cms" location="front"}) no-repeat center top scroll #000;
}

Change the template tag to the one the theme gives you. Change #000 to the background color you'd like. You can also edit global.css as well, but if you're not creating your own framework based off of the default theme, it's best to just override things in custom.css so you'll have smoother theme upgrades without having to redo your work.

[Nightshift]

Thank you i will try this soon...

 

How can i export skins with this picture / images ? I can only export the theme xml file but than there are the images missing (logo, background etc...) ?

 

[craigf136]

As @Cemmos said - this is my custom.css
 

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
    background: url(url to image) no-repeat center center fixed, #000; 
        -webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  	background-size: cover;
  	color: #fff
}

 

[DesignzShop]

Thank you i will try this soon...

 

How can i export skins with this picture / images ? I can only export the theme xml file but than there are the images missing (logo, background etc...) ?

 

​Not sure here for a fact but I do believe you need to run designers mode to see saved changes in regards to resources.

[Woodsman]

​Not sure here for a fact but I do believe you need to run designers mode to see saved changes in regards to resources.

​It can be done manually but it can be a pain in the Arse...

I altered it rather sloppily in global.css

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 13px;
    line-height: 18px;
    color: {theme="text_color"};
    height: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-image: url("path_to_image.jpg");
    background-color: {theme="page_background"};
}

​This and the example below don't work anymore... Css has been changed...

As @Cemmos said - this is my custom.css
 

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
    background: url(url to image) no-repeat center center fixed, #000; 
        -webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  	background-size: cover;
  	color: #fff
}

 

​Try this Changing the image file in the global.css to your uploaded image

html {
	min-height: 100%;
	position: relative;
	/*-webkit-font-smoothing: antialiased;*/
	background-image: url( {resource="calm_wf001.jpg" app="core" location="front"});
	background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
	width: 100%;
    height: 100%;
}

body {
	background: transparent;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
/*	color: {theme="text_color"};*/
	color: #fff;
	height: 100%;
}

 

[Christophe]

How are you able to make css and html changes? Everytime I try to edit the skin I get immediate fatal errors even on fresh clean installs?

ACP runs fine but any edits on the site fatal error and requires a revert in the ACP. This is while NOT using the Designer mode

[craigf136]

​It can be done manually but it can be a pain in the Arse...

​This and the example below don't work anymore... Css has been changed...

​Try this Changing the image file in the global.css to your uploaded image

html {
	min-height: 100%;
	position: relative;
	/*-webkit-font-smoothing: antialiased;*/
	background-image: url( {resource="calm_wf001.jpg" app="core" location="front"});
	background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
	width: 100%;
    height: 100%;
}

body {
	background: transparent;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
/*	color: {theme="text_color"};*/
	color: #fff;
	height: 100%;
}

 

​This is still working fine for me and I'm running RC2.

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
    background: url(url to background image) no-repeat center center fixed, #000; 
        -webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  	background-size: cover;
  	color: #fff
}

 

[craigf136]

How are you able to make css and html changes? Everytime I try to edit the skin I get immediate fatal errors even on fresh clean installs?

ACP runs fine but any edits on the site fatal error and requires a revert in the ACP. This is while NOT using the Designer mode

​If you could supply an example of one edit you have tried to do, what file it is, steps to reproduce (i.e. code you are trying to change and what you are trying to change it too) would help. This would allow everyone to advise on what may be causing the issue.

[Woodsman]

 

​This is still working fine for me and I'm running RC2.

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */
    background: url(url to background image) no-repeat center center fixed, #000; 
        -webkit-background-size: cover;
  		-moz-background-size: cover;
  		-o-background-size: cover;
  	background-size: cover;
  	color: #fff
}

 

​I'd like to see that in action ...

All the old system codes ever did for me was create massive headaches.

BTW which RC2 css file are you pulling this from?.

html, body { /* Safari has trouble with bgcolor on body. Apply to html tag too. */

Looks a bit old school and I have not seen this statement since 3.4.7's ipb_styles.css

[craigf136]

I'm not actually as you can guess, I just took our 3.4.7 background css and pasted it over and changed the url it's hashy but it works. I need to check clean/update css and custome pages before we go live.

[K4RL]

Both methods work fine for me although I am now using the second one as the way I did it was just a temporary fix whilst I sorted out a suitable background image