Add custom photo to background, move margins

Need help? Please give a detailed explanation of your problem.
Post Reply
Apjennb20152276
Posts: 12
meble kuchenne Mikołów Knurów Czechowice-Dziedzice
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Add custom photo to background, move margins

Post by 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.
User avatar
Paige
Support Team
Support Team
Posts: 461
Joined: Fri Feb 24, 2012 3:41 am
Website: www.allprowebtools.com
Location: Fort Collins, CO
Contact:

Re: Add custom photo to background, move margins

Post by 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
Posts: 12
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Re: Add custom photo to background, move margins

Post by 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;
 }
User avatar
Paige
Support Team
Support Team
Posts: 461
Joined: Fri Feb 24, 2012 3:41 am
Website: www.allprowebtools.com
Location: Fort Collins, CO
Contact:

Re: Add custom photo to background, move margins

Post by 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
Posts: 12
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Re: Add custom photo to background, move margins

Post by 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!
User avatar
Paige
Support Team
Support Team
Posts: 461
Joined: Fri Feb 24, 2012 3:41 am
Website: www.allprowebtools.com
Location: Fort Collins, CO
Contact:

Re: Add custom photo to background, move margins

Post by 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.
Post Reply