4 replies [Last post]
Franky Four Fingers
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT+1
Joined: 2004-03-23
Posts: 17
Points: 0

hi there,

I have a trouble with putting 2 images in one page. One has to be on the left top and the other has to be on the left bottom? Does someone know how to fix this problem, I tried it through with this code but is doesn't work..

html {
background: url(Templates/afbeeldingenlayoutbodyboven.png) no-repeat fixed left top;
}

body {
background-attachment: fixed;
background-image: url (../Templates/afbeeldingenlayout/bodyonder.png);
background-repeat: no-repeat;
background-position: left bottom;

Regards,

Franky

co2
co2's picture
Offline
Leader
UK
Last seen: 13 years 33 weeks ago
UK
Joined: 2003-09-17
Posts: 721
Points: 0

multiple backgrounds

Hi Franky

There was a recent thread with the exact same question (can't remember the outcome)...

http://www.csscreator.com/css-forum/ftopic2464.html

If it doesn't cover what your looking for, let us know. Smile

The next sentence is true. The previous sentence is false. Discuss...

Franky Four Fingers
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT+1
Joined: 2004-03-23
Posts: 17
Points: 0

multiple backgrounds

thanks for the help

I managed to do it now with this script in my body

<div id="bodyboven" style="position:absolute;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left top;
left:0px; top:-1px; width:456px; height:122px;
z-index:-1;
visibility: visible;
overflow: visible;
background-image: url(Templates/afbeeldingenlayout/bodyboven.png);
border: 0px;">
</div>

and this one in my CSS sheet

body {
background-image: url(../Templates/afbeeldingenlayout/bodyonder.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: left bottom;
}

But i want to implement the first code, the one in the div tag, to my stylesheet, but i can't manage to make it work, i tried the id and class stuff, but somehow it doesn't work....

Franky Four Fingers
Offline
Regular
Last seen: 17 years 36 weeks ago
Timezone: GMT+1
Joined: 2004-03-23
Posts: 17
Points: 0

multiple backgrounds

http://www.xs4all.nl/~gielent/nieuwe%20site/frameset1.htm

to check the site....just a draft...

and here for the css sheet for the frame with the problem..

http://www.xs4all.nl/~gielent/nieuwe%20site/css/text.css

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 4 years 29 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

multiple backgrounds

You may want to study a number of websites with sliding and overlapping images and or backgrounds that allow you to have flexible full width banners. I've made a couple of these: http://www3.ns.sympatico.ca/d.elliott/chair/ has 5 layers in the header, while a much simpler version http://www.gov.ns.ca/health/policywatch uses only two layers. Do a horizontal resize to see the effect. I'm thinking you could repeat your people image across and have the left hand image in front of it so that the people would slide behind.

You simply can't do this without CSS and it is a pretty simple technique once mastered.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS