1

EDITED QUESTION How do I keep the height of my images to be resized when the browser is reduced?

Ok, I've tried searching for this for a while and just can't seem to find it anywhere. Here is what I'm trying to do...

My navigation is using uploaded images instead of doing a CSS generated navigation menu.

When I resize the browser window...my background resizes properly using:

body {
background: url('/images/background.jpg') no-repeat center center fixed; 
background-color:#000000;
background-size: 70%;
}

As for my navigation images...I've gotten them to resize, but not stay in the proper locations...here is my code....the 80px nav a hight is the problem...:

/* navigation */
nav {
position: relative; 
top: 200px;
left: 10%;
max-width: 15%;
}

nav a {
display: block;
max-width: 191px;
height: 80px;
margin: 0;
padding: 0;
}

#homebutton {
background: url('/images/homebutton.png') no-repeat 0, 0;
background-size: contain;
}

#aboutbutton {
background: url('/images/aboutbutton.png') no-repeat 0, 0;
background-size: contain;
}

#storebutton {
background: url('/images/storebutton.png') no-repeat 0, 0;
background-size: contain;
}
#facebookbutton {
background: url('/images/facebookbutton.png') no-repeat 0, 0;
background-size: contain;
}
#contactbutton {
background: url('/images/contactbutton.png') no-repeat 0, 0;
background-size: contain;
}

Here are the pics of what I mean....1st one is browser at full size...2nd one is browser at reduced size.

http://www.myshinyjewels.com/images/fullbrowsersize.jpg

http://www.myshinyjewels.com/images/reducedbrowsersize.jpg

Robert Ames
  • 51
  • 1
  • 8
  • 1
    You probably didn't search in the right place (Google). There are at least a dozen similar questions, all here in SO. – emerson.marini Jun 05 '14 at 13:30
  • 1
    Have a look at `CSS3 Media Queries`. Also, if you have `nav a: { width: 191px; height: 80px; display: block;`, you don't need to add it to every `ID` as it's already added, think the `DRY` methodology. – Nick R Jun 05 '14 at 13:30
  • 1
    Thank you Nick R...that works just fine...but still don't quite have the answer yet....although...now I'm having issues with the height being at 80px...is there a way to make that adjustable also? – Robert Ames Jun 05 '14 at 13:58

2 Answers2

1

Add

background-size: contain;

to each of those elements using a background image. The background image will stay within the bounds of it's element size.

So, using your example:

#aboutbutton {
background: url('/images/aboutbutton.png') no-repeat 0, 0;
background-size: contain;
width: 191px;
height: 80px;
display: block;
}

Disclaimer: This won't work in IE8, but should in everything else, according to the MDN Reference.

JakeParis
  • 11,056
  • 3
  • 42
  • 65
  • 1
    I did your suggestion and....I've made a few extra changes too and have gotten it to resize the images by changing this: `nav { position: relative; top: 200px; left: 200px; max-width: 15%; }` – Robert Ames Jun 05 '14 at 14:04
1

you can use CSS3 @media query to define changes depending on the size of the browser window.

For example using

@media (min-width 768px) {

     h1{
        font-size: 40px;
       } 
     }

This means set h1 font size to 40px if the width of the browser is above the minimum value of 768px.

If it is smaller than this size then it will use whatever you have h1 defined as before this @media query. This is a lot eaiser for making a site for mobile first though but you can apply it the over way round by using max-width instead of min-width. So in your example you could set the buttons width and height to smaller percentages or pixels if the screen is below a set pixel size.

Mike Young
  • 321
  • 2
  • 4
  • 15
  • 1
    This is a drastic change though...I would like it to be fluid and I am working with just the images at the moment for the nav menu. – Robert Ames Jun 05 '14 at 14:26