0

I'm trying to accomplish the following:

I have fixed left sidebar with percent width like so:

.sidebar {
   position: fixed;
   background-color: tomato;
   width: 35%;
   height: 400px;
}

.. and a right container with a fixed background image:

.right {
   background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat fixed;
   height: 400px;
}

How can I make the background image start where the width of the sidebar ends and not be below it?

Here is a fiddle: http://jsfiddle.net/EKqPg/ (the opacity propery is there for demo purposes)

Ziik
  • 1,029
  • 1
  • 9
  • 17

3 Answers3

1
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-    repeat fixed;
min-height: 400px;
background-size: 65%;
background-position: left 100% top 0px;

}

http://jsfiddle.net/aronez/EKqPg/4/

something like this?

Aron Martin
  • 75
  • 7
0

I think this is what you're looking for:

add background-position property to .right

information regarding this property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat;
height: 400px;
background-position:289px,0px;
}

updated fiddle:

http://jsfiddle.net/EKqPg/1/

Ghost Echo
  • 1,997
  • 4
  • 31
  • 46
  • Hi, the problem is that the width of my sidebar is in percents and the background-position property is not working. – Ziik Dec 30 '13 at 17:43
  • Yeah, but the background is not fixed this way :\ – Ziik Dec 30 '13 at 18:53
  • what about this? http://jsfiddle.net/EKqPg/3/ I'm still not sure what you want the outcome to be... – Ghost Echo Dec 30 '13 at 19:01
  • maybe this will help http://stackoverflow.com/questions/6794000/fixed-position-but-relative-to-container – Ghost Echo Dec 30 '13 at 19:26
  • I want the outcome to be like http://jsfiddle.net/EKqPg/2/ but with fixed background, because I want to use it for a parallax effect. – Ziik Dec 30 '13 at 19:27
  • let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/44178/discussion-between-ziik-and-ghost-echo) – Ziik Dec 30 '13 at 19:28
0

From what I understand, you never want to have any content inside .right on the 'left' anyway, so why not give it (100-35)% = 65% width and float it to the right?

.sidebar {
  width: 35%;
  float: right;
}

Fiddle: http://jsfiddle.net/Q4Hey/

The only reliable way to do this by using background positioning properties will end up ruining the aspect ratio, unless you can define an absolute width (not a %):

.sidebar {
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: 65% 100%;
}

Fiddle: http://jsfiddle.net/K9N8p/

peteykun
  • 716
  • 9
  • 21
  • The first looks like a logical solution but as you can see from the whole image ([link](http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg)) it crops the left part of it :( – Ziik Dec 30 '13 at 17:30