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

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!!

ALEXANDER MACLEAN

30 Posts
0 Reply Likes
frustrated

Posted 7 years ago

7 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?

2013-03-10T20:44:25+00:00

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.

7 years ago

Crystal, Champion

250 Posts
79 Reply Likes

Hello Alexander, One more question - which template are you using?

2013-03-11T10:13:52+00:00

ALEXANDER MACLEAN

30 Posts
0 Reply Likes

It's the tastlessly templete I'm using for my site.........

7 years ago

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:

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.

7 years ago

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;

1 person likes this

7 years ago

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!!!

2013-03-12T16:12:13+00:00

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>

6 years ago

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

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

Related Categories

Yola