10

I have this css:

#wrapper1 {
min-width:1020px;
min-height:100%;
}
#wrapper2 {
height:100%; 
background: url('img1.jpg') -100px 300px no-repeat, url('img2.jpg') 1165px 300px no-repeat;
}
#wrapper3 {
width:1020px;
margin:0 auto;
}

and this html:

<div id="wrapper1">
 <div id="wrapper2">
   <div id="wrapper3" class="clearfix" <!-- content here -->
        <p>blah blah blah</p>
   </div>
 </div>
</div>

I need to add 2 images - left and right from center column without center column width changes and that the images did not affect the overall width of the page. Example:

Example Image

I can add images, and made a some attempts

  1. when I try to change browser width - background images go under the central column Image

  2. I tried to change min-width:1020px; to min-width:1665px; - at first glance, all is well, but for the screen resolution - less than 1665px all content is shifted to the right I tried a few options but unsuccessfully

My question: сan I place an image so that when you change the width of the browser - reduce distance to the left and right of the center column (this is the default behavior if no background images)

Here is code with images examples.

If I make 1 big image with 1020px blank center part and put my left/right images into it.. will it work?

Code Lღver
  • 15,573
  • 16
  • 56
  • 75
Vasiliy Terkin
  • 103
  • 1
  • 2
  • 4

3 Answers3

24

You can follow multiple solutions:

1) Use divs: [good]

Creating a good "framework" of divs can solve your problem, for example something like this:

<div id="allWrapper">
 <div id="leftSidebar"></div>
 <div id="centerOrContent"></div>
 <div id="rightSidebar"></div>
</div>

And a pseudocode of CSS (not tested):

div#allWrapper{
 width: 100%;
 height: 100%;
}
div#leftSidebar{
 min-width: [theWidthOfLeftImage] px;
 height: 100%;
 background-image: url(leftImage.jpg);
 background-position: center right;
}
etc...

Then playing with CSS (floating and sizes) you can adjust the view.

2) Use multiple background: [not always good]

You can use this CSS pseudocode to use multiples backgrounds (found here: http://www.css3.info/preview/multiple-backgrounds/)

div#example1 {
width: 500px;
height: 250px;
background-image: url(oneBackground), url(anotherBackground);
background-position: center bottom, left top;
background-repeat: no-repeat;
}

3) use static "big" image: [lazy solution]

Use a static image as you suggest (with blank in the middle) can also solve the problem, but if the website is "responsive" you can have graphic issues with different screen resolution (or resizing the browser-window). In this case you must fix the position and the width of the central column too (on window resizing).

4) use responsive design: [excellent - do it!]

To avoid the overlapping of the images on the central (content) div, you can set as background-color (of this div) as white.

Again, to avoid overlapping, you can set a "special" responsive CSS. That detects if the window has width < X the 2 images disappears. For example with this CSS pseudocode:

@media only screen and (min-width: 481px) {
//here happens something when the screen size is >= 481px
 div#example {
   background-image: url(oneBackground);
 }
}

@media only screen and (max-width: 481px) {
//here happens something when the screen size is <= 481px
 div#example {
   background-image: none;
 }
}

Here's some links about responsive design:

http://webdesignerwall.com/tutorials/5-useful-css-tricks-for-responsive-design

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

Auxiliary Joel
  • 173
  • 1
  • 13
damoiser
  • 6,058
  • 3
  • 40
  • 66
  • I tried first 3 points... it's not working, "big" image too - center column go to left, but big image still here... I don't understand why – Vasiliy Terkin Feb 25 '13 at 18:16
  • 4) it's work of course, but for different resolution needed different images – Vasiliy Terkin Feb 26 '13 at 07:23
  • 1
    for first 2 points you need to have a good css-code to working on it, otherwise don't work. For point 3), as I say, you can have graphics issues when resizing the window (because the "big" image is fixed in width and height and resizing the window you don't have anymore the correct sizing). For point 4) of course, if you want to have a good responsive design you must have images with different sizes (my "easier" solution only remove the images on smaller windows). – damoiser Feb 26 '13 at 07:45
  • oh, now I understood, at first I thought that there exists a simple solution :) thanks – Vasiliy Terkin Feb 26 '13 at 08:45
  • 1
    You're welcome :) I have added two links that can be useful for responsive design and playing with float/override – damoiser Feb 26 '13 at 09:06
3

You can use two absolute DIVs with two backgrounds. One left center and another one right centered:

Place the DIVs wherever you want in the site. (they are absolutely positioned)

HTML:

<div class="background" id="background1"></div>
<div class="background" id="background2"></div>

CSS:

.background{
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

#background1{
    background: url(yourImage1.jpg) no-repeat 100% 0;
}

#background2{
    background: url(yourImage2.jpg) no-repeat 0 0;
}
zachzurn
  • 2,161
  • 14
  • 26
Alvaro
  • 40,778
  • 30
  • 164
  • 336
0

This is a working code for me. the only thing will be change is the background-position for both property. 

.image-bg-custom1 {
    background-image: url(/images/left-get.png);
    background-repeat: no-repeat;
    background-position: center left;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.image-bg-custom2 {
    background-image: url(/images/right-get.png);
    background-repeat: no-repeat;
    background-position: center right;
    height: 100%;
    right: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}
iFart
  • 62
  • 1
  • 4