Using two background images in VSD...

User 495282 Photo


Registered User
132 posts

I have been trying to apply two background images to a website page. One image will be used as a header and scroll with the page. The second image will be the background of the site and remain fixed. I can get it to work but I can only achieve either both image scrolling or both images fixed. An example of what I want can be seen here: http://templates.websitetemplatesonline.com/Good-Cook-Free-Theme/index.html. The work I completed can be seen here: http://www.thehillsab.com/Test16.html. The css code used for the placement of the two images is as follows:
<style type="text/css">
body {
background: url(images/blkheaderbg.png), url(images/bgolfcourseouflg.jpg) ;
background-size:auto, 100%;
background-repeat: repeat-x , no-repeat;
background-position: top left, 0px 245px;
background-attachment: scroll, fixed;
}
</style>
Adding the background-attachment property doesn't help the individual backgrounds. Whatever effect is listed first seems to be the one applied to the elements. Does anyone know how to achieve what I want?
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I think the easiest thing to do for VSD would be to combine the images into one.
Change this
background-attachment: scroll, fixed;


To this
background-attachment: fixed;

You can see it working here.
http://progrower.coffeecup.com/opacity.html#backg
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 495282 Photo


Registered User
132 posts

Thanks Eric for the reply......I can get the elements to be either fixed or scrolling, but cannot get one element to be fixed while the other still scrolls. Even within VSD's limits, I thought it might be possible to have the two elements be used in different ways. So that is the problem......do you think it possible?
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 271657 Photo


Ambassador
3,816 posts

Booth, to make it work for VSD, try this:
You'll need to make the page background in an image editor. Using the Good Cook example, create a rectangle the height of your page (width doesn't matter), add the top and footer black areas (shape tool-rectangle) and adjust the opacity. Do the same for the white menu area under the header. Make the body area 100% transparent. Save as a .PNG to preserve transparency.
In VSD, set your non-scrolling background image (the vegetables), then for page background, select your .PNG image and allow it to continue beyond page borders. Now you should see the header, menu and footer area covering the veg pic all the way across the screen. In the body area, just add a semi-transparent white rectangle (you could make this outside of VSD) where you need your text/content to show over the veg background.

I don't have VSD on this computer, I'll try this out later on my old computer. Let us know if this works out for you, or if you need more help. :)
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 495282 Photo


Registered User
132 posts

Thanks for your input.....I followed your advice and have the images working as I wanted. The only problem is working with the content for the page when I'm looking at a blank screen in VSD (just need to place markers for content, no problem). But it works perfectly....http://www.thehillsab.com/Test16.html. Thanks again!
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 271657 Photo


Ambassador
3,816 posts

Yes, it takes a bit to get used to the black areas with PNGs.
Glad to hear you've got it figured out. :D
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com
User 495282 Photo


Registered User
132 posts

Well I spoke too soon. Seems IE11 doesn't want to play well with others. Viewing in IE causes both images to be "fixed". Anyone know of a hack that might work for IE. Every other browser displays the elements perfectly. The css file is:

<style type="text/css">
body{
background-image: url('images/grnheaderbg.png'), url('images/bgolfcourseouf.jpg');
background-repeat: repeat-x, no-repeat;
background-attachment: scroll, fixed;
background-position: top left, 0px 0px;
background-size: auto, 100%;
}
</style>

And the site page in question is here: thehillsab.com/Test16.html'
Thanks for any input or suggestions.
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 122279 Photo


Senior Advisor
14,447 posts
Online Now

I'm using IE11, and I see one fixed bg image and one that stays put.

But your submenus are dropping behind the fixed image. Try giving the menu a z-index: 10; or so.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 495282 Photo


Registered User
132 posts

Thanks Inger......Are you able to view the page in Chrome, Firefox, or Safari? I think you will see a difference. The only element that is fixed is the out of focus background image. Behind the menu and and logo is a separate image that I want to move as you scroll. The page behaves perfectly in every browser except IE.
Booth Kates

Patience...Persistence...Practice

http://www.boothkates.com
http://www.susiekatesdesigns.com
http://www./paradisecovemarinahs.com
http://www.thehillsab.com

User 271657 Photo


Ambassador
3,816 posts

In IE11, I get the fixed background image, and the page scrolls over it just as in FF or Chrome.
Maybe the menu drop-down was conflicting with it? Seems fine now.
I love deadlines. I like the whooshing sound they make as they fly by. (Douglas Adams)
https://www.callendales.com

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.