Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 534
  • Last Modified:

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
0
nsitedesigns
Asked:
nsitedesigns
  • 6
  • 5
  • 5
  • +1
4 Solutions
 
Dave BaldwinFixer of ProblemsCommented:
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.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
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...
0
 
skullnobrainsCommented:
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
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
nsitedesignsAuthor Commented:
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.
0
 
nsitedesignsAuthor Commented:
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
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
There's an idea...

Take your two pictures and put them in a single image with a gap (in between) of the width of the page....
(Have a look at the image attached)

Now add this to your background CSS...

body{
background: url(path_of_the_new_image) top center no-repeat;
}

Open in new window


Try this...
suggestion.jpg
0
 
nsitedesignsAuthor Commented:
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.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
No ... See this...

CSS

body{
background: url(path_of_the_new_image) top center no-repeat;
}
#wrapper{
z-index: 999;
width: 960px; /*Whatever you want but make sure it should be same as that of the image gap*/
margin: 0 auto;
}

Open in new window


HTML

<body>
   <div id="wrapper">
    Your Site Code goes here....
   </div>
</body>

Open in new window


This will work...!! Try this.. and tell if any problem persist...
0
 
skullnobrainsCommented:
the same container cannot be given 2 separate background images

one simple way to do things is nest 2 divs and apply one background to each of them

a more complex way can be performed like this if you cannot change the html part and do not need to write text in the image

#yourdiv{
  background: url(path_to_image) top right no-repeat;
  margin-left:30px;
}
#yourdiv:before{
  content: url(URL_TO_IMAGE);
  width:30px; 
}

Open in new window

0
 
nsitedesignsAuthor Commented:
skullnobrains, not sure I understand the #yourdiv:before declaration.  What is the : for?  Does this work on a majority of browsers?
0
 
skullnobrainsCommented:
the before is a pseudo-class that will let you insert content before an element. in this case i insert one of the images before the div instead of using it as a background.

http://www.w3schools.com/cssref/sel_before.asp

works in modern browsers. check the above link for details
0
 
nsitedesignsAuthor Commented:
ok.  So is  #yourdiv for the first pic and #yourdiv:before for the second pic?
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Have you tried mine..??

It is the easy one...
0
 
skullnobrainsCommented:
: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
0
 
skullnobrainsCommented:
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

0
 
nsitedesignsAuthor Commented:
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.
0
 
Ishaan RawatDesigner | Developer | ProgrammerCommented:
Ok... Thank you...
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

  • 6
  • 5
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now