background images side by side help

Trying to position background images exactly next to eachother.

Page 1 of 1

9 Replies - 4438 Views - Last Post: 14 July 2009 - 06:16 AM

#1 Austinkir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 20-March 09

background images side by side help

Posted 13 July 2009 - 10:41 AM

Hello.

I am trying to place three background images side by side (horizontal), but am unable to using the "float" property like I thought I would. Is there a better way to do this? I need them to be completely flush next to each other.

Site URL: http://goldvinegrill...ding/index.html
To look like: http://goldvinegrill...ing/Website.jpg

CSS code:
#wrapper {margin: 0px auto; width:1057px;}
body {background-color:#FFFFF;}
#center {background:url("../images/center.jpg") no-repeat; width:532px; height:500px; margin:0 auto;}
#l-side {background:url("../images/l-side.jpg") no-repeat; width:261px; height:500px; float:left;}
#r-side {background:url("../images/r-side.jpg") no-repeat; width:264px; height:500px; float:left;}

HTML code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <link href="css/style.css" type="text/css" rel="stylesheet">
  <title>Andrea & Jordans Wedding</title>
  </head>
  <body>
  <div id="wrapper">
	<div id="l-side">
	</div>
	<div id="center">
	</div>
	<div id="r-side">
	<div>
  </div>
  </body>
</html>


Thanks for any help!

Is This A Good Question/Topic? 0
  • +

Replies To: background images side by side help

#2 Austinkir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 20-March 09

Re: background images side by side help

Posted 13 July 2009 - 01:19 PM

Is there a different property than float perhaps? Anyone? :)
Was This Post Helpful? 0
  • +
  • -

#3 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 150
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: background images side by side help

Posted 13 July 2009 - 02:05 PM

Have you tried adding a float:left; into the #center ? i just tested this and it all sat side by side
Was This Post Helpful? 0
  • +
  • -

#4 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: background images side by side help

Posted 13 July 2009 - 02:28 PM

Could you not use 1 image as the main background and fix its position
Was This Post Helpful? 0
  • +
  • -

#5 Austinkir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 20-March 09

Re: background images side by side help

Posted 13 July 2009 - 02:39 PM

View PostRPGonzo, on 13 Jul, 2009 - 01:05 PM, said:

Have you tried adding a float:left; into the #center ? i just tested this and it all sat side by side


Great, thank you! I should have tried that. I don't understand why it only works with all of them left. Seems to me the left one should be float:left the right one float:right and the center one margin: 0 auto. Any idea why?

Thanks for your help,
Austinkir
Was This Post Helpful? 0
  • +
  • -

#6 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 150
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: background images side by side help

Posted 13 July 2009 - 02:40 PM

View Postneit, on 13 Jul, 2009 - 01:28 PM, said:

Could you not use 1 image as the main background and fix its position



true but than if the OP wanted 3 separated divs they would still have the issue with getting them side by side even with a single background image

Austinkir said:

Great, thank you! I should have tried that. I don't understand why it only works with all of them left. Seems to me the left one should be float:left the right one float:right and the center one margin: 0 auto. Any idea why?


The browser likes to put a bit of padding even when setting padding to 0 on items that do not have a defined float ... i honestly don't know the exact reason why but that is what i have encountered :-/ and also you may want to do a cross browser check from IE 5-8 and FF ... sometimes multiple divs having a float attribute can get quite messy in one browser to the next

This post has been edited by RPGonzo: 13 July 2009 - 02:43 PM

Was This Post Helpful? 0
  • +
  • -

#7 Austinkir  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 39
  • Joined: 20-March 09

Re: background images side by side help

Posted 13 July 2009 - 02:42 PM

View Postneit, on 13 Jul, 2009 - 01:28 PM, said:

Could you not use 1 image as the main background and fix its position


Yeah, I didn't want to do that because of load times. If I am correct, I can get the center image to load first by placing it in the code first. Plus small files load better on slower connections, less chance of a timeout. This may be wishful thinking though, I am open to corrections.
Was This Post Helpful? 0
  • +
  • -

#8 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 150
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: background images side by side help

Posted 13 July 2009 - 02:47 PM

sometimes you can actually work with your images into one and decrease the over load size ... saving out of MS paint over saving out of PS is another example ... sometimes loosing a few points of resolution or quality but cutting file sizes in half

Loading images in order is so minimal on what the user actually sees i don't think its going to have a very noticeable effect ...
Was This Post Helpful? 0
  • +
  • -

#9 neit  Icon User is offline

  • D.I.C Head

Reputation: 15
  • View blog
  • Posts: 187
  • Joined: 13-February 09

Re: background images side by side help

Posted 13 July 2009 - 05:03 PM

size of file you posted link to: 31.82 kB (although it does appear to be a little lower quality)

size of left image: 25.38 kB
size of center image: 44.74 kB
size of right image: 23.49 kB

Although he may still want a 3 column site fixing the image to the background
will eliminate any issues with the images joining up.
Was This Post Helpful? 0
  • +
  • -

#10 RPGonzo  Icon User is offline

  • // Note to self: hmphh .... I forgot
  • member icon

Reputation: 150
  • View blog
  • Posts: 954
  • Joined: 16-March 09

Re: background images side by side help

Posted 14 July 2009 - 06:16 AM

the image would appear joined if single true BUT if the divs are not floated the HTML on the page would appear offset still is what i was saying ..
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1