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.
Add custom photo to background, move margins
-
- Posts: 12
- meble kuchenne Mikołów Knurów Czechowice-Dziedzice
- Joined: Thu Oct 15, 2015 4:43 pm
- Website: APJennB2015.myallprowebtools.com
- 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
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:
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:
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:
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");
}
To change the margins on the company logo, you can use the following code:
Code: Select all
#logo {
margin: 20px;
}
If you need any help with this here is a video that can help you start a screenshare with our support team:
-
- Posts: 12
- Joined: Thu Oct 15, 2015 4:43 pm
- Website: APJennB2015.myallprowebtools.com
Re: Add custom photo to background, move margins
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
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
- 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
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:|: */
-
- Posts: 12
- Joined: Thu Oct 15, 2015 4:43 pm
- Website: APJennB2015.myallprowebtools.com
Re: Add custom photo to background, move margins
There must be something missing, I entered the following and removed all other items.
No results.
After further searching, I was missing the photo path. uploads/ lt_pics/background
Now searching how to fade photo into background.
Thank you!
No results.
Code: Select all
body {
background-image: url("/content/uploads/background.jpg");
}
Now searching how to fade photo into background.
Thank you!
- 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
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.
Personally I recommend adjusting the transparency of a photo in a photo editing software (exe: Photoshop, Gimp) for better browser compatibility.