Link to home
Start Free TrialLog in
Avatar of nsitedesigns
nsitedesignsFlag for United States of America

asked on

Use left and right background images in css

In an effort to speed up load time for a site, can I have 2 background images ( left and right) attached to my css?  Here is a snippet of what I want to do.  I would like a solution that works in older browsers.  I think if I try to use the full image, it will take ages to load.

http://screencast.com/t/0s3Gjh0bt
Avatar of Dave Baldwin
Dave Baldwin
Flag of United States of America image

See how far you can compress the image (and reduce the size) before it looks wrong.  A background image can be a little fuzzy because it's not supposed to be the focus anyway.
You can use photoshop Save for Web feature...
Check this tutorial... http://www.youtube.com/watch?v=Ut_F7iGlze8

What it will do is it will resize your images for web and devices.. so that they can load fast...

NOTE: The best part is it will not reduce a single percentage of your image quality...
Avatar of skullnobrains
skullnobrains

not sure i understand what you are trying to do, but if you need the images to be embedded in the css file, you can use the data uri sheme. you definitely need to compress the image as much as you reasonably can anyway. i do not believe that always try to embed everything is a good course of action, and i'm pretty sure it will make no measurable difference in your case
Avatar of nsitedesigns

ASKER

I did not explain myself clearly.  I know how to reduce image size and save for web in PS.  What I want to know is IF I can use css and have a left background image and a right background image surrounding my container.
Here is a good example.  This site has 2 background images but also used tables.  I want to use css.

http://oaksatbentwater.com
http://oaksatbentwater.com/medialib/template/BG-Left.jpg
http://oaksatbentwater.com/medialib/template/BG-Right.jpg
ASKER CERTIFIED SOLUTION
Avatar of Ishaan Rawat
Ishaan Rawat
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
If I did that, there would be no way for someone to see the middle (gap) portion even if they have a large monitor if the site is set to a fixed width.  Please confirm.
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
skullnobrains, not sure I understand the #yourdiv:before declaration.  What is the : for?  Does this work on a majority of browsers?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
ok.  So is  #yourdiv for the first pic and #yourdiv:before for the second pic?
Have you tried mine..??

It is the easy one...
:before goes on the left hand side and i setup the regular background on the right

you can obviously do the opposite using :after

the margin is here to compensate for the width of the :before element
the easy one is most definitely nest 2 divs and apply a background to each of them. if you can change your html it is rather foolish to even consider any other option

<div id="first" style="background: url(path_of_left_image) top left no-repeat;">
  <div id="second" style="background: url(path_of_right_image) top right no-repeat;">
    ...
  </div>
</div>

Open in new window

IshaanRawat,

Yes, I did try yours.  Thank you, it did work and you will be awarded points.  I also want to understand how to do 2 separate ones as well.  That was my original question.
Ok... Thank you...