How can I add a background image to just one of my pages?

  • 1
  • Question
  • Updated 6 years ago
  • Answered
  • (Edited)
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!!
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
  • frustrated

Posted 6 years ago

  • 1
Photo of Crystal

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?
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
Hi Crystal, thanks for replying. I wanted if it was possible, to have the image in the centre page area.
Photo of Crystal

Crystal, Champion

  • 250 Posts
  • 79 Reply Likes
Hello Alexander, One more question - which template are you using?
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 30 Posts
  • 0 Reply Likes
It's the tastlessly templete I'm using for my site.........
Photo of Stefan

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:
  1. On the lower menu bar of your Yola Sitebuilder, click on "Style".

  2. On the right-hand side, click on the "Edit Background" button.

  3. Check "Use background image".

  4. Leave the "Apply to all pages" in the bottom left corner unchecked.

  5. Click on "OK" to save your changes.

  6. Don't forget to republish your website to make your changes live.
Photo of Crystal

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;
Photo of ALEXANDER MACLEAN

ALEXANDER MACLEAN

  • 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!!!
Photo of Gop

Gop

  • 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.

<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>
Photo of Eisenhower

Eisenhower

  • 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...