-1

this first image is actual output am now getting

the second image is my required output

Here is the css I'm applied for a section to bring this background:

#banner{
  background: #242a33 url(../images/sliderbg.jpg) no-repeat 50% 50%;
  background-size: cover;
  background-position:center;
  background-attachment: fixed;
}

I'm using the same css code for other sections it works fine. I don't know whats the problem here. BG image size is 1600px * 400px.

Minal Chauhan
  • 6,025
  • 8
  • 21
  • 41
sasi jj
  • 25
  • 10

2 Answers2

0

Switch background-size: cover; to background-size: contain;. You may need to tinker with background-position and set it to background-position: top; to get the desired effect.

amflare
  • 4,020
  • 3
  • 25
  • 44
  • i want the image to cover entire width even zoom in and zoom out . i tried contain already it brings the space or the image fixed not working – sasi jj Feb 20 '16 at 06:11
  • `background-size: auto 100%;` – amflare Feb 20 '16 at 06:27
  • You want to stick your code in a fiddle so I can take a look at it and stop having to guess? – amflare Feb 20 '16 at 17:10
  • i never used fiddle before but i put my code in respective fields, dont know how to insert images . fiddle link https://jsfiddle.net/y4o3q220/ – sasi jj Feb 22 '16 at 04:01
0
#Banner {
  background-size: 100% 100%;
  background-attachment: fixed;
  background-position: center;
  background: url('PathToImage');
  display: table;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 600px;
}
Vic B-A
  • 338
  • 1
  • 3
  • 10
  • hi i tried the above code but when i zoom out the bg image slide to left but i want it to be fixed full width bg – sasi jj Feb 20 '16 at 06:24