CODEWITHSUNDEEP
htmlcssresponsive-design
webrama.pl
webrama.pl

Reputation: 1888

CSS/HTML div width over resolution

I have to cut PSD file into CSS and HTML. The problem is container with background image has 1160px of width. This container have only background image on right side so I could be hidden on smaller resolution. Main content container have 996px so it's good.

I'm trying to do it this way:

Image on the right side have to be always on the same place - its relative to the .container .inner which together looks nice.

My code:

.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 goal is to put background image always in the same place and cut this image if resolution is less than 1160px. Any advices?

EDIT:

For no .container .background changing it's position depending on resolution... I don't want it - image have to be always in the same place.

Upvotes: 1

Views: 351

Answers (2)

GuiGreg
GuiGreg

Reputation: 341

Use media queries like 

@media only screen and (max-width:1160px){
  #something{
     some css
  }
}

You can read more about media queries Here

Upvotes: 2

DOK
DOK

Reputation: 32851

One new approach often used for mobile and tablet browsers, is to use pairs of images of different sizes. In responsive design, for example, you can use the CSS @media to check the device window width, and return a larger or smaller image depending on the circumstance.

Upvotes: 1

Related Questions