How to implement responsive design, maintaining positions of buttons and stuff relative to background image while scaling?

Question

Working on a little project that is an experimental foray into somewhat intermediate css. Learning via practical experience and all.

I'm currently designing a simple webpage that roughly looks like this on a screen:

The black space on the sides represent the empty space on the viewing screen, filled by solid color via background-color. The background is an image that's set to contain, so it scales with the screen without cropping, aligned to center. No scroll bars, always resizes to screen. What I want is for the other boxes within the background, to resize and scale proportionately with the background image, text and all, so that everything looks identical in terms of their positions relative to the background image, no matter how the browser window is resized. Like sort of grouping the layers together somehow, if that's possible? Because the button needs to be exactly right there, and the unnamed square thing, which is a translucent png that overlays itself on top of the background image.

Here's my code so far, or at least the relevant portion. This is just the background image and the button. The text and other images appear strange, so I'm sure I'm doing something entirely wrong there.

body {
    background: url("images/Background.png") no-repeat fixed center;
    background-size:contain;
    background-color:black;
}
#enter_button {
    background: rgba(26,0,0,0);
    position:fixed;
    transition: .5s ease;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-top: 0.5vw;
    padding-right: 1vw;
    padding-bottom: 0.5vw;
    padding-left: 1vw;
    border: 0px;
    border-radius: 10px;
    max-width: 100%;
    height:auto;
    color: rgba(26,0,0,1);
    font-size:5vw;
    text-align:center;
}
#enter_button:hover {
    transform: translate(-50%, -50%) scale(1.05);
    background: rgba(26,0,0,0.2);
}

and here's the html body section.

<button id="enter_button">Enter</button>

The button scales properly if I resize the browser window along the aspect ratio of the background image, but disappears under the screen sometimes.

I was thinking perhaps div tags, but I can't quite figure out how.

I also heard that vw and vh aren't good units to scale to viewport, and to use this instead. Is that always better?

The problem is somewhat similar to this: Responsive DIV scaling within "background-size: contain" image But is there a pure css solution?

Can you throw your code into a jsfiddle or codepen? the HTML you provided doesn't allow for much testing! :) — Black Bird, Dec 25 '16 at 17:58
However just briefly looking at your code, if you want things to be 'grouped' per se, you would want to use a `position: relative` for your wrapper, and `position: absolute` for any inner content. That way they are attached to the wrapper and not the body. — Black Bird, Dec 25 '16 at 18:01
This seems like what I'm looking for, thanks :D Could you show an example code that works in that manner? — Terrornado, Dec 25 '16 at 18:18
As for the site, it uses backgrounds and stuff locally served. The stuff I omitted was totally unrelated code, like custom fonts with font-face and different cursors. I can upload an image I made in photoshop that's basically the expected end result, though? Or a .psd of that. — Terrornado, Dec 25 '16 at 18:21
If you check the dupe link, you'll find both script based and CSS only based solutions ... really good ones — Asons, Dec 26 '16 at 08:27

score 1 · Accepted Answer · answered Dec 26 '16 at 06:25

You will still need to use media queries as @Quinn Langille pointed out for specific use cases, but assuming your aspect ratio stays mostly the same you should be okay. To group objects with 'fixed' positions, you need a relatively positioned container, and absolutely positioned elements within that container.

For example, this would allow you to have multiple containers that could all be utilizing the same properties (ex: left: 10%), but it would the properties would only be relative to their respective container.

https://jsfiddle.net/60w3043t/

CSS:

.wrapper {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: blue;
  background-repeat: no-repeat;
  background-image: url('http://placehold.it/350x350');
  background-size: contain;
}

.flavortext {
  height: 100px;
  width: 100px;
  background-color: red;
  position: absolute;
  left: 10%;
  top: 10%;
}

input {
  position: absolute;
  top: 50%;
  left: 50%;
}

score 0 · Answer 2 · answered Dec 25 '16 at 18:01

Browser/device compatibility is a bit of an issue with this things. Hence vw and some other units are not an optimal solution.

What I've been using are relative units "rem", so that you need to properly set only root element, and the rest would follow. Still, I cannot say if implementing such responsiveness yourself is better then using proposed library.

On your "button dissapearing" act, I would suspect that the reason is in your css styles with 50% values. Typically, you want to leave some little buffer for responsive design, because you will end up with numbers such as 1251 for width. 50% of that may play a trick.So try 49% for example.

score 0 · Answer 3 · answered Dec 25 '16 at 18:02

Sounds like you need to use some media queries. These are separate rulings on a style sheet that allow you to modify the styles for an element or class when a certain condition is met. For example, this may look bad on mobile

.sample-div {
  width:80%;
  font-size: 32px;
}

So I can make a query, like this:

@media screen and (max-width 500px) {
  width: 100%;
  font-size: 24px;
}

So that on screens with resolution below 500px wide will display it as this. You can learn more about them here:

https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

However, while this will solve your problem, it can be a little tedious depending on what you need to accomplish. If you feel like leveling up your CSS skills, you can use a preprocessor like SASS or LESS to make a function that does this automatically. Preprocessors are powerful ways to quickly write styles, and allow you to use modular bits of code called mixins that you can use in every project. I use a mixin similar to this to maintain aspect ratio: https://css-tricks.com/snippets/sass/maintain-aspect-ratio-mixin/

It's more of a scaling by window size or resolution of a PC/laptop screen, rather than trying to make it compatible with mobiles or tablets etc. I need the width to be dynamic realtime by adjusting the browser size, and the buttons to stay in their exact positions. Kind of like a flash game, but designed with pure css and javascript if possible. — Terrornado, Dec 25 '16 at 18:46

How to implement responsive design, maintaining positions of buttons and stuff relative to background image while scaling?

3 Answers3