Photoshop Question posted in
The official user guide can be found here.

How to size images in @media screen property? – Photoshop

I want to know how to size my images in @media screen and max-width:640.
My style.css:

#header-wrapper
    {
        position: relative;
        padding: 7em 0 0;
        background:url(images/fox-illustration.jpg) no-repeat center;
        background-position:center;
        width:auto;
        height:768px;

    }

My mobile.css:

@media screen and (max-width: 640px) {

  header-wrapper {
    width: 600px;
    }

So the width is only applied to to the header-wrapper..
I also tried to give the header-wrapper in mobile.css another image
(which I sized in photoshop to mobile size).

But this didn’t work either. I think because the image of the header-wrapper overwrite it in style.css?

Tags:

3

Answers


  1. 0 
    background:url(images/fox-illustration.jpg);
background-size:600px 400px;
background-repeat:no-repeat;

    Do this

    Login or Signup to reply.
  2. 0

    First make sure your mobile.css is active.

    If the second part of your code is at it is set now, you are probably missing an id tag in the css.

    Try changing your

    header-wrapper {
    width: 600px;
}

    to

    #header-wrapper {
    width: 600px;
}
    Login or Signup to reply.
  3. 0

    Other than using fixed background size, you can use cover and follow the width of the #header-wrapper

    #header-wrapper {
  position: relative;
  padding: 7em 0 0;
  background:url(images/fox-illustration.jpg) no-repeat center;
  background-size:cover;
  width:auto;
  height:768px;
}


@media screen and (max-width: 640px) {

  #header-wrapper {
    width: 600px;
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search