Adding an image as a background to page. Is there any way (using html perhaps?) that I can add an image to my page which I can then add text to. I don't want to change the whole style of my site to enable me to do this, as it's just for one page. Can any one tell me if it's possible. Thanks a million!!
- 30 Posts
- 0 Reply Likes
- frustrated
Posted 6 years ago
Crystal, Champion
- 250 Posts
- 79 Reply Likes
Hello Alexander, Are you trying to put the image in the colored background to the sides of the center page area, or do want the image in the background of the center page area itself?
Crystal, Champion
- 250 Posts
- 79 Reply Likes
Hello Alexander, One more question - which template are you using?
- 30 Posts
- 0 Reply Likes
It's the tastlessly templete I'm using for my site.........
Stefan, Official Rep
- 4448 Posts
- 190 Reply Likes
Hello Alexander
If you're using a Style which allows to edit your background, you can choose to add a different background to each page or to apply it to every page of your website. For the Tastelessly Style you can add a custom background image. Please follow these steps:
If you're using a Style which allows to edit your background, you can choose to add a different background to each page or to apply it to every page of your website. For the Tastelessly Style you can add a custom background image. Please follow these steps:
- On the lower menu bar of your Yola Sitebuilder, click on "Style".
- On the right-hand side, click on the "Edit Background" button.
- Check "Use background image".
- Leave the "Apply to all pages" in the bottom left corner unchecked.
- Click on "OK" to save your changes.
- Don't forget to republish your website to make your changes live.
Crystal, Champion
- 250 Posts
- 79 Reply Likes
Hello Alexander,
To change the white background in the center part of the page to an image:
First upload your background image to File Manger.
Then click Style > click Edit Custom CSS > on the pop up, uncheck Disable Site CSS Overrides > then in the CSS window paste the following code. Replace the YourImage with the name of your uploaded image.
#page { width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: url(resources/YourImage.png) no-repeat;
border: 20px solid #F3F3F3;
border-top: none;
}
You'll likely have to adjust your image size or increase your image size with added white space to have the image positioned appropriately.
If you want the image to tile, change the one line to say
background: url(resources/YourImage.png) repeat;
To just tile horizontally, change the one line to say
background: url(resources/YourImage.png) repeat-x;
To just tile vertically, change the one line to say
background: url(resources/YourImage.png) repeat-y;
To change the white background in the center part of the page to an image:
First upload your background image to File Manger.
Then click Style > click Edit Custom CSS > on the pop up, uncheck Disable Site CSS Overrides > then in the CSS window paste the following code. Replace the YourImage with the name of your uploaded image.
#page { width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: url(resources/YourImage.png) no-repeat;
border: 20px solid #F3F3F3;
border-top: none;
}
You'll likely have to adjust your image size or increase your image size with added white space to have the image positioned appropriately.
If you want the image to tile, change the one line to say
background: url(resources/YourImage.png) repeat;
To just tile horizontally, change the one line to say
background: url(resources/YourImage.png) repeat-x;
To just tile vertically, change the one line to say
background: url(resources/YourImage.png) repeat-y;
- 30 Posts
- 0 Reply Likes
Thanks for going to all that trouble Crystal - I thought you'd cracked it, until I discovered that I would need to upgrade to the silver package in order for the CSS changes to take effect............;-( never mind, but I guess I'll have to forget the whole idea now as I can't afford the extra cost of the upgrade - but thanks a million for your help anyway, it's much appreciated!!!
- 7473 Posts
- 2115 Reply Likes
Hello Alexander,
You can do this with a Free or Bronze subscription by adding an internal style sheet to an HTML widget.
You can do this with a Free or Bronze subscription by adding an internal style sheet to an HTML widget.
<style type="text/css">
#page { width: 978px;
margin: 0 auto;
padding: 20px 0px 0 0px;
background: url(resources/YourImage.png) no-repeat;
border: 20px solid #F3F3F3;
border-top: none;
}
</style>
- 2 Posts
- 0 Reply Likes
Try some image processing application, image background is a frequently disscused question, the silverligt may be a good solution.
http://www.rasteredge.com/how-to/csha...
http://www.rasteredge.com/how-to/csha...
ALEXANDER MACLEAN