3 replies [Last post]
SWOUNinja
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT-6
Joined: 2011-03-06
Posts: 1
Points: 2

Davie Hey ya'll. I am trying to make an image appear in each corner of the screen with a margin of 0. So far I have gotten the top-left image to work no problem. I also got something kind of on the top right but with margins that were unacceptable. The bigger problem is getting both of these things to happen at once.

The goal: Have an image in each corner of the window no matter what size the window is

The reality: The images are all overlapping no matter what I try!

Difficulty: css contained within an external .php file

I've wasted so much time on this one I'm about ready to give up!

plalmeida
plalmeida's picture
Offline
Regular
Portugal
Last seen: 8 years 17 weeks ago
Portugal
Joined: 2011-03-06
Posts: 20
Points: 24

Images in each corner

Try the following:

    <style type="text/css">
        #topleft 
        {
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #topright
        {
            position: absolute;
            top: 0px;
            right: 0px;
        }
        #bottomleft 
        {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
        #bottomright
        {
            position: absolute;
            bottom: 0px;
            right: 0px;
        }
    </style>
</head>
<body>
<img src="image1.png" id="topleft" />
<img src="image2.png" id="topright" />
<img src="image3.png" id="bottomleft" />
<img src="image4.png" id="bottomright" />
</body>

Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 15 weeks 2 days ago
Timezone: GMT-4
Joined: 2009-10-09
Posts: 2040
Points: 2262

plalmeida, position: fixed;

plalmeida, position: fixed; is probably more likely to work in accordance with the problem at hand.

plalmeida
plalmeida's picture
Offline
Regular
Portugal
Last seen: 8 years 17 weeks ago
Portugal
Joined: 2011-03-06
Posts: 20
Points: 24

Verschwindende

Verschwindende,

Yeah, you're right, forgot about that. Using position:fixed (instead of position: absolute) he can scroll the page vertically, and the images will remain at the corners.