Add custom photo to background, move margins

[Apjennb20152276]

I would like to add our company photo faded into the background on our website pages.
Would also like to move margins, such as Company Logo a few spaces to the left and info below evenly spaced.
Currently I am using the Default Theme.

Thanks for your help in advance.

[Paige]

You are able to define or override any style by going to Settings -> Administrator -> Theme Editor -> Stylesheet

To add a background image you can use the following code with your own image:

Code: Select all

body {
    background-image: url("/content/uploads/example.jpg");
}


Here is documentation on the background property if you have further questions: http://www.w3schools.com/css/css_background.asp

To change the margins on the company logo, you can use the following code:

Code: Select all

#logo {
    margin: 20px;
}


Here is documentation on the margin property if you have further questions: http://www.w3schools.com/css/css_margin.asp

If you need any help with this here is a video that can help you start a screenshare with our support team:

[Apjennb20152276]

I tried adding at the end of the following default settings, also tried to add at the beginning. No results !
Logo margin is creating a taller Logo, I need it moved to the left a few spaces.
Does the photo have to have jpg added into the name of the photo ? I tried it both ways.

Please advise, Thank you!

Stylesheet

Code: Select all

/* :|:PARTEXTCOLORBEGIN:|: */
   color:#4517FF;
   /* :|:PARTEXTCOLOREND:|: *//* :|:PAGEBACKGROUNDBEGIN:|: */
      background:#FFFF30;
      /* :|:PAGEBACKGROUNDEND:|: *//* :|:HEADTEXTCOLORBEGIN:|: */
   color:#000000;
   /* :|:HEADTEXTCOLOREND:|: *//* :|:CONTENTBACKGROUNDBEGIN:|: */
   background:#FF591C;
   /* :|:CONTENTBACKGROUNDEND:|: */                                                                       
   
body {
    background-image: url("/content/uploads/Background.jpg");
}
#logo {
    margin:20px;
 }


[Paige]

If you remove the top portion of your stylesheet it will work, it is invalid code. Code to remove below:

Code: Select all

/* :|:PARTEXTCOLORBEGIN:|: */
   color:#4517FF;
   /* :|:PARTEXTCOLOREND:|: *//* :|:PAGEBACKGROUNDBEGIN:|: */
      background:#FFFF30;
      /* :|:PAGEBACKGROUNDEND:|: *//* :|:HEADTEXTCOLORBEGIN:|: */
   color:#000000;
   /* :|:HEADTEXTCOLOREND:|: *//* :|:CONTENTBACKGROUNDBEGIN:|: */
   background:#FF591C;
   /* :|:CONTENTBACKGROUNDEND:|: */     


[Apjennb20152276]

There must be something missing, I entered the following and removed all other items.
No results.

Code: Select all

body {
    background-image: url("/content/uploads/background.jpg");
}


After further searching, I was missing the photo path. uploads/ lt_pics/background
Now searching how to fade photo into background.

Thank you!

[Paige]

Here is documentation on changing a image transparency: http://www.w3schools.com/css/css_image_transparency.asp

Personally I recommend adjusting the transparency of a photo in a photo editing software (exe: Photoshop, Gimp) for better browser compatibility.