Solved

Use left and right background images in css

Posted on 2013-05-21
17
523 Views
Last Modified: 2013-05-28
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
Comment
Question by:nsitedesigns
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
  • 5
  • +1
17 Comments
 
LVL 83

Expert Comment

by:Dave Baldwin
ID: 39186053
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
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39186575
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
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39187214
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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

Author Comment

by:nsitedesigns
ID: 39187446
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
 

Author Comment

by:nsitedesigns
ID: 39187471
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
 
LVL 10

Accepted Solution

by:
Ishaan Rawat earned 250 total points
ID: 39187529
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
 

Author Comment

by:nsitedesigns
ID: 39187557
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
 
LVL 10

Assisted Solution

by:Ishaan Rawat
Ishaan Rawat earned 250 total points
ID: 39187572
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
 
LVL 27

Assisted Solution

by:skullnobrains
skullnobrains earned 250 total points
ID: 39187631
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
 

Author Comment

by:nsitedesigns
ID: 39187653
skullnobrains, not sure I understand the #yourdiv:before declaration.  What is the : for?  Does this work on a majority of browsers?
0
 
LVL 27

Assisted Solution

by:skullnobrains
skullnobrains earned 250 total points
ID: 39188044
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
 

Author Comment

by:nsitedesigns
ID: 39188060
ok.  So is  #yourdiv for the first pic and #yourdiv:before for the second pic?
0
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39188085
Have you tried mine..??

It is the easy one...
0
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39188091
: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
 
LVL 27

Expert Comment

by:skullnobrains
ID: 39188109
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
 

Author Comment

by:nsitedesigns
ID: 39188136
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
 
LVL 10

Expert Comment

by:Ishaan Rawat
ID: 39188142
Ok... Thank you...
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question