Background in VSD - Page 1

User 1997716 Photo


Registered User
27 posts

My onpage background is black, however i'd like to have an image display as the background (beyond the borders, and still leaving the onpage background black)...is there a way to do this in VSD? if not, how could I do this in CSS?

Mike
User 463058 Photo


Ambassador
1,086 posts

Select the Edit > Edit Header... menu. Then you can add embedded styling to the head of your page.
User 1997716 Photo


Registered User
27 posts

Hi Cary,

So how would I be able to have just an image show up off the page and a black background on the page?

Thanks
Mike
User 463058 Photo


Ambassador
1,086 posts

This was actually more involved than I thought it would be. I hadn't tried it before. Nothing bad though. Just a few more buttons clicks than I had imagined.

In Page Properties you need to select a solid color background, and set it to black. This will be the background for the page content area. I have the "Centered" check-box checked as well, so the page centers in the browser.

You also need to select the menu item "Settings" > "Background Fill Properties..."

Here you need to select "Solid Color" and pick a color for the border area of the page. It won't actually be used since we're going to replace it with an image, but this trick won't work without Solid Color selected.

Now you need to get your background image into VSD. Use the menu "Settings" > "Add Files..." to copy the image you want to use to the root of your site.

Let's suppose the image is called "border.jpg". This is what your CSS will look like if you want it to just repeat around the border area of the page:

<style type="text/css">
body {
background:url(border.jpg);
}
</style>


That block of code needs to be inserted into the head of the page using the "Edit" > "Edit Header..." menu item I mentioned previously.

That should be it!
User 463058 Photo


Ambassador
1,086 posts

You might use code like this if you have a really large image (not recommended at all) centered horizontally around your content area:
<style type="text/css">
body {
background:url(border.jpg) no-repeat center top;
}
</style>



This code can be used if the image needs to be centered horizontally around the content area, but repeated vertically:
<style type="text/css">
body {
background:url(border.jpg) repeat-y center top;
}
</style>
User 1997716 Photo


Registered User
27 posts

Awesome...Thank You Cary!

Also, is VSD powerful enough to run an e-commerce site with a ton of visitors? I'm not talking about the actual shopping cart, I have another platform in place for that..but i'm using VSD as my foundation to build the site....Does it generate code efficiently? I'm really just beginning to use it...

Thanks...
Mike
User 463058 Photo


Ambassador
1,086 posts

You're welcome. I don't really know the answer to that question. I would suggest you start a new thread for that, so someone who knows will be more likely to see it.
User 503621 Photo


Registered User
266 posts

any examples ?
User 271657 Photo


Ambassador
3,816 posts

HotWheels - did you want extended background examples?
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 503621 Photo


Registered User
266 posts

Ok cool

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.