Resize Backdround image
Allen Arissa
Registered User
1 post
Hello, I'm trying to have a background with a bar on either size of the page, fixed and I want those bar to adjust based on the screen size. Is there any way to do this with Virtual Designer?
paintbrush
Ambassador
3,816 posts
Not with Visual Site Designer. Being a WYSIWYG editor, things are positioned absolutely. That way, those of us who don't write our own code have a better chance of ending up with a design that works in all browsers 
If you're not wanting to write/code your site design from scratch, check out the HTML Editor in visual mode. There are some ready-made 2 and 3 column elastic layouts ready to go.
If you're not wanting to write/code your site design from scratch, check out the HTML Editor in visual mode. There are some ready-made 2 and 3 column elastic layouts ready to go.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
david wilson
Ambassador
1,707 posts
If you do want to tackle this with the code editor, (there is a free version avalible)
place the following before the </head> tag.
If your page already has <style></style> tags in it, just past te cose there and remove the <style></style> tags I have here.
Then in your page code:
So what is happening here?
First we set a background color of orange and a white gradient all the way down the left side of the page using the <HTML> tag.
Then we create a box called a wrapper full width and height of the page, and set a white gradient image all the way down the right side.
So if you put the tag <div id="wrapper"> right after the <body> tag, and the wrapper close tag </div> right before the </body> body close tag, your entire site will have a left and right border.
Adjust the background color, and change the images to your liking.
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/grad_border.png
place the following before the </head> tag.
<style>
html {background-color:#FF8000; background-image:url('image/back_left.png'); background-repeat:repeat-y; }
#wrapper { position:absolute; top:0; background-image:url('image/back_right.png'); background-repeat:repeat-y; background-position:right; height:100%; }
</style>
html {background-color:#FF8000; background-image:url('image/back_left.png'); background-repeat:repeat-y; }
#wrapper { position:absolute; top:0; background-image:url('image/back_right.png'); background-repeat:repeat-y; background-position:right; height:100%; }
</style>
If your page already has <style></style> tags in it, just past te cose there and remove the <style></style> tags I have here.
Then in your page code:
<div id="wrapper">
<p>LOREM ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.Duis autem vel eum iriure dolor in hendrerit in
Vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.Lorem ipsum </p>
</div>
<p>LOREM ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore
magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.Duis autem vel eum iriure dolor in hendrerit in
Vulputate velit esse molestie consequat, vel illum dolore eu feugiat
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait
nulla facilisi.Lorem ipsum </p>
</div>
So what is happening here?
First we set a background color of orange and a white gradient all the way down the left side of the page using the <HTML> tag.
Then we create a box called a wrapper full width and height of the page, and set a white gradient image all the way down the right side.
So if you put the tag <div id="wrapper"> right after the <body> tag, and the wrapper close tag </div> right before the </body> body close tag, your entire site will have a left and right border.
Adjust the background color, and change the images to your liking.
http://i130.photobucket.com/albums/p248/pug2775/coffeecup/grad_border.png
Volunteering to help 
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
paintbrush
Ambassador
3,816 posts
I thought bars that would adjust with screen size meant columns in a flexible or elastic layout!Sorry if I confused things. I didn't realize Allen just wanted the background to repeat and fill the screen
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
https://www.callendales.com
david wilson
Ambassador
1,707 posts
Slight variations on this will do columns also . Nice Avitar Paintbrush
. Nice Avitar Paintbrush
Volunteering to help
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
http://www.tbaygeek.ca
My HTML play area
http://www.tbaygeek.ca/test/
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.
