AllProWebTools.com

Posted: **Tue Jun 07, 2016 2:11 pm**

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.

Posted: **Wed Jun 08, 2016 1:21 pm**

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:

Posted: **Wed Jun 08, 2016 3:46 pm**

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;
 }

Posted: **Wed Jun 08, 2016 4:24 pm**

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:|: */

Posted: **Thu Jun 09, 2016 10:45 am**

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!

Posted: **Fri Jun 10, 2016 12:33 pm**

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.

AllProWebTools.com

Add custom photo to background, move margins

Add custom photo to background, move margins

Re: Add custom photo to background, move margins

Re: Add custom photo to background, move margins

Re: Add custom photo to background, move margins

Re: Add custom photo to background, move margins

Re: Add custom photo to background, move margins