-1

I have an image that is 1903 x 475 pixels and I have a set in my header. I had to set the header height at 475px just the see the image. Everything looks great until I test for smaller screens. I add a background-size of 100% which is allowing the image to auto adjust but the header height stays at 475px. I feel am over looking a simple technique but I need the header to match the height of the image as the screen size gets smaller.

Here is what i have for the header and the image:

*.navbar.navbar-default.navbar-static-top {
    margin-bottom: 25px;
    background: url(../images/flavor-westbg.jpg)top center no-repeat;
    background-size: 100%;
    min-height: 475px;
    width: auto;
}*

Oh one last thing. I can only tweak the CSS for this project.

Captain Obvlious
  • 19,754
  • 5
  • 44
  • 74
Jesse
  • 1

2 Answers2

0

what about css media queries??

Media Queries: How to target desktop, tablet and mobile?

@media queries and image swapping

Community
  • 1
  • 1
Shawn K
  • 779
  • 5
  • 13
0

I'm assuming you're using bootstrap. One Thing you could try is "padding-top: px;" for the photo or you are placing the folder under. I had to use padding to fix a similar problem with a jumbotron.

Ookie Ebron
  • 11
  • 1