Need help with cutting a PSD file into CSS and HTML. The issue is the container with background image has a width of 1160px, which may cause it to be hidden on smaller resolutions. The main content container has a width of 996px, so that aspect is good.
I am attempting to achieve this:
If the resolution is greater than 1160xXXX, display the whole image on the right side,
If the resolution is less than 1160xXXX, hide a portion of the image on the right side.
The image on the right side must remain in the same position - relative to the .container .inner for a cohesive look.
This is my current code snippet:
.container {
max-width:1920px;
margin:0 auto;
position:relative;
}
.container .background {
background:black url("../img/woman.png") no-repeat scroll right top;
max-width:1160px;
overflow:hidden;
}
.container .inner {
width:996px;
}
The objective is to maintain the background image's position consistently and only cut it if the resolution falls below 1160px. Any suggestions would be appreciated!
EDIT:
I do not want the .container .background to change its position based on resolution...I need the image to always stay in the same place.