View Full Version : floating images alongside website

08-16-2010, 11:37 AM
Hi all,

I'm trying to float two images that scroll with the page on either side of my webpage (http://bushrangers.x10.bz) and I can't seem to get it to work.

Where I am at is the following (with an appropriate image of course):

{background:#000 url(images/image2.jpg) no-repeat center 0}

I've tried googling css with a number of scripts but can't seem to get it to do what I want. I'm pretty green to the coding side of things but I would appreciate any help. Thanks in advance.

08-16-2010, 11:53 AM
do you want to have the images outside your current design? and you want them to follow scrolling? For images moving along with scrolling, that would be javascript I think. But you may have a fixed background instead with your two images well placed as the background picture... so that when you scroll down your page, that bg image stays fixed on your screen. See for ex w3 schools. (http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment)
The advantage of the second method is that you wont see the pictures shaking as you scroll down... but there wont be any actions on them...

08-16-2010, 12:06 PM
that's ok a background image will work. I'm about to update the site with what I have, for some reason the image is coming out really thin. This is what I am using:

<style type="text/css">
body {background:#000 url(images/STK_Skin_20100412.jpg) no-repeat center 0}

08-16-2010, 12:15 PM
I cant see that image on the page you have linked to. And for the css, there should be: background-attachment:fixed, as can be understood from the link I wrote down. that link (http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment)

best wishes

08-16-2010, 12:21 PM
the image is the same as:


I will make my own image the same way but first I need to get it to work :)

08-16-2010, 12:30 PM
try left-top instead of center, would that work?

{background:#000 url(images/image2.jpg) no-repeat left top;

ALSO your body width should be 100 %. That's why your picture is not to the very left. You have a body width of 869 smth pixels..

width:869px; //change width to 100%
padding:0 65px;
margin:0 auto;

that also involves changing your layout a tiny bit. Hold on

08-16-2010, 12:32 PM
Ooh we're getting so close thanks for the help!

Hmm, now I've got a floating window on the left side...

08-16-2010, 12:43 PM
ok, you should put all your html code into one div.

<div id="container">all the html inside your body tags</div>

and then try to add to css:

#container{width: 869px;margin:0 auto;}

08-16-2010, 12:47 PM
brilliant thanks. Just a little off-center still... now all good!

Really appreciate it, thanks mate.

08-16-2010, 12:54 PM
my fault, put back on center rather than left top :-)

Major Payne
08-17-2010, 08:56 AM
To float images left and right, you need to set the images in a div with a width and height and use the CSS property: position: fixed;
Or, using your original CSS:

div#left {
width: XXpx;
height: YYpx;
background: #000 url(images/image2.jpg) no-repeat center fixed;
bottom: 0;
left: 0; }

Adjust for bottom/left or use top/left. You can even use absolute positioning and get it to stick where you want it on the left. Similar CSS for the right image. Other methods can be used.