Add custom photo to background, move margins

Need help? Please give a detailed explanation of your problem.
Apjennb20152276
Posts: 12
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Add custom photo to background, move margins

Postby Apjennb20152276 » 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.
User avatar
Paige
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

Postby Paige » 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:

Apjennb20152276
Posts: 12
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Re: Add custom photo to background, move margins

Postby Apjennb20152276 » 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;
 }
User avatar
Paige
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

Postby Paige » 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:|: */     
Apjennb20152276
Posts: 12
Joined: Thu Oct 15, 2015 4:43 pm
Website: APJennB2015.myallprowebtools.com

Re: Add custom photo to background, move margins

Postby Apjennb20152276 » 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!
User avatar
Paige
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

Postby Paige » 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.

Return to “Help / How to use AllProWebTools”



Who is online

Users browsing this forum: No registered users and 3 guests

cron