Member Avatar for davidmoffitt1

If I wanted to make a site liquid with percenteges, could I make the background image of a header change sizes with the window? Or will the image stay the same and just make it look wierd?

  • 2 Contributors
  • 2 Replies
  • 40 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by davidmoffitt1

Dani AI

Generated

Yes, you can make a header background scale with the window, and you usually do not need JavaScript for it. Set the image as a CSS background and use background-size. This keeps the image proportional while the container resizes.

.header {
  background: url("/img/header.jpg") center/cover no-repeat;
  /* cover fills the header and may crop edges */
  min-height: 180px; /* ensure it never collapses */
}

If you want the header itself to change height with the viewport, use viewport units so it stays visually balanced across widths. Then optionally cap it so it does not get too tall or too short.

.header {
  height: 30vw;       /* responsive height tied to width */
  min-height: 180px;  /* floor */
  max-height: 420px;  /* ceiling */
  background: url("/img/header.jpg") center/cover no-repeat;
}

For performance and sharper images, swap sources at breakpoints. Smaller screens get a lighter image; larger screens get a higher‑res version.

.header { background-image: url("/img/header-small.jpg"); }

@media (min-width: 768px) {
  .header { background-image: url("/img/header-medium.jpg"); }
}

@media (min-width: 1200px) {
  .header { background-image: url("/img/header-large.jpg"); }
}

Notes:

  • cover fills the area and crops as needed. Use contain if you prefer the entire image visible (it may leave empty space). Never stretch with background-size: 100% 100% or it will look distorted. See background-size.
  • Viewport units like vw are handy for fluid headers, but test across devices to avoid overly tall banners. See viewport-percentage lengths.
  • If you must support very old browsers without background-size, you can fall back to a fixed background or use a simple JS helper as suggested. Otherwise, CSS alone is the cleanest route. See Using media queries.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Have you investigated the use of JavaScript or better yet, jQuery to resizing the image based on Window size changes?

Member Avatar for davidmoffitt1

I actually just started learning JavaScript and Jquery today. Didnt know it could do that. Thanks!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.