Member Avatar for Texx

So the goal is to make a responsive coming soon page with a full screen image (mmedia queries will serve different screen sizes with different versions of the same image). sounds easy enough, but somehow I've made a black band at the top of my page (on mobile devices) that I can't seem to get rid of . . .
It may be related to a another problem that I don't really care too much about but even though there is very little content on the page, I can scroll down and there's a blank space at the bottom (on desktops) when I do...

something's wrong somewhere but I can't figure it out.

Any ideas?

http://texxsmith.net/soon/test2.html

  • 1 Contributor
  • 2 Replies
  • 570 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by Texx

Dani AI

Generated

Good catch by — the missing declaration inside the media queries is exactly the kind of subtle override that will make a responsive background behave differently across breakpoints. A few extra checks will stop the black band at the top and the mysterious vertical gap at the bottom.

Why that happens

  • If a breakpoint serves a different background but doesn’t also set the sizing/positioning, the image can render at its intrinsic size and reveal the element’s background color.
  • Using the background: shorthand in a later rule can reset other background properties you set earlier, so a size/position you expect may be lost.
  • Default browser spacing (body margin, or top margins on an H1) and mobile browser UI (address bar showing/hiding) also create apparent gaps.

Quick checklist and fixes (apply to each media query)

  • Reset page chrome: set html, body { margin: 0; height: 100%; }.
  • Make the hero fill the viewport: use min-height: 100vh on the element that has the background.
  • Ensure the background is centered and not tiled (background-position + background-repeat).
  • Avoid background-attachment: fixed for mobile — it causes odd rendering on many phones.
  • If you use the background: shorthand in a media query, re-declare any needed background properties so nothing unintentionally reverts.

Example CSS (not repeating the property you already found):

html, body {
  margin: 0;
  height: 100%;
}

.hero {
  min-height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
}

Extra note: on modern mobile Safari 100vh may be unstable because of the dynamic address bar. If you still see visual jumps, test on a real device and consider the small JS trick that stores window.innerHeight in a CSS variable and uses that for the hero height.

Member Avatar for Texx

I must have been sleepy when I made this mistake... I didn't include :

background-size:cover;

in my media queries that included the background images.

Edited by Texx because: typos
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.