Image Sizing


#1

So.. I have this image.. in this code;

.navigationBar {
    background-image: url("http://i.imgur.com/OVgIg0K.png");
    height: 600px;
}

but what I want to do is resize the image to fit the size of the user's screen. If I resize my screen. (CTRL & +) / (CTRL & -) the image will get cropped, and I won't see all of it.. Any solutions? Thanks so much!


Image Sizing Problem
#2

You can change the hieght to a smaller amount and specify the width to a smaller amount.


#3

I know this, but it won't automatically adjust to the size of the screen.


#4

Then I dont know. Ima Flag this Question for the Mods to be aware of it and make changes if neccecary.


#5

Got a Solution for ya

The question about control over background size can be examined in two ways:

  1. background-size
  2. media queries

Let's look at #1 API documentation, first.

[background-size - CSS | MDN1][1]

And now, #2,

Using media queries - CSS | MDN


Noticing a couple problems in Codecademy!
#6

besides reading the MDN documentation (which you can find here) since amanuel2 link is broken, you should also read this, and you could also use (i would recommend background though) vw (viewport width) and vh (viewport height), you can find it here