0

I am building an interactive website where the main image is a camera with buttons to operate it. I want to place buttons on it for the user to click on. I am able to position it just fine at full width, and when I resize smaller for a phone the camera resizes beautifully. On the other hand, the About button never moves or resizes it just stays in place.

HTML:

<div class="camera">
  <div id="about_pos">
     <div id="about">

     </div>
 </div>
</div>

CSS:

.camera {
position: relative;
width: 100%;
height: 100%;
background-image: url('../images/camera.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

#about {
  display: block;
  width: 55px;
  height: 55px;
  background-image: url('../images/about_bw.png');
  background-repeat: no-repeat;
}

#about:hover {
  background-image: url('../images/about.png');
}

#about_pos{
    float: left;
    padding-left: 128px;
    padding-top: 77px;
}

From what I have seen on the internet it appears that my mistake is forcing the button to a specific height and width, but that is where the real problem comes in. When I try setting them to either auto or 100% I lose the image all together.

I feel like I have tried every scenario out there and none of them work. Any thoughts on this would be greatly appreciated.

I marked the below as the answer but the rest of the answer is found at bottom in the comments section.

Here is the final code:

HTML

     <div class="camera">
       <div class="buttons" id="about">

       </div>
    </div>

CSS 

.camera {
position: relative;
width: 100%;
height: 100%;
background-image: url('images/camera_with_buttons.png');
background-repeat: no-repeat;
background-size: 90%;
background-position: center top;
}

.buttons{
display: block;
width: 4vw;
height: 4vw;
margin-left: 1vw;
margin-top: 1vw;

border-radius: 50%;
position: absolute;
}

#about {
top: 5.6vw;
left: 6.2vw;
}

#about:hover {
background-size: cover;
background-image: url('images/about.png');
background-repeat: no-repeat;
}
rlearning
  • 35
  • 5
  • This question is duplicated. Please see the answer here: https://stackoverflow.com/questions/787839/resize-image-proportionally-with-css?rq=1. – pjones235 Nov 13 '17 at 20:38
  • The problem is still there, when I use: auto for or % for the width or height I lose the button all together off my screen. – rlearning Nov 13 '17 at 20:58
  • You are losing it because you have set a float on #about_pos div. Remove it or add `overflow: hidden`. – Andrija Ćeranić Nov 13 '17 at 22:03

1 Answers1

1

Make use of relative positioning that you already have on .camera and add position: absolute on #about_pos. Use percentages or viewport units (vh and vw) to position it (eg. top: 30% or if the button's vertical position is relative to the width of .camera you can use top: 25vw).

Also remove float from the about_pos div and you can keep the dimensions of a button in px since you are doing positioning with absolute div parent, about_pos.

Update

In order to resize the button in response to changing screen width, use width: 7vw; height: 3vw; or similar

Update 2

Imgur

You can remove #about_pos and do it simpler, like this:

body {
    padding: 0;
    margin: 0;
}

.camera {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url('http://www.kenrockwell.com/nikon/d800/d800-back-1200.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center top;
}

#about {
    display: block;
    width: 8vw;
    height: 8vw;
    margin-left: -4vw;
    margin-top: -4vw;
    border-radius: 50%;
    background: orange;
    position: absolute;
    top: 23.5vw;
    left: 71.6vw;
    opacity: 0.7;
    cursor: pointer;
}

#about:hover {
    background: yellow;
}
<body>
    <div class="camera">
        <div id="about">

        </div>
    </div>
</body>
Andrija Ćeranić
  • 1,633
  • 11
  • 14
  • I changed the about_pos as you suggested and it is closer. Using the below I noticed that when I resize the browser the button stays in the **approximate area** but still **never** resizes. `#about_pos{ position: absolute; left: 20vh; top: 6vw; }` – rlearning Nov 14 '17 at 09:34
  • If you want to resize the button, use px or viewport units on it – Andrija Ćeranić Nov 14 '17 at 09:51
  • I realized by your answer that I was making this harder than what it needed to be by trying to place a button to hover over and replace it with another image. I also went back and played a little more to understand what happened and I noticed another problem was with the `background-size: contain` and not to a specific `%`. So with all of that it works great. However,in the hover, instead of it changing it to a color I went back to placing a button image there. After I resize it I notice that most of it appears cutoff. It does it whether I set the position element or not. – rlearning Nov 14 '17 at 21:29
  • The image in button gets cut off? If it's not in same ratio as the button it must be. I'm not sure k understand you :) – Andrija Ćeranić Nov 14 '17 at 21:36
  • I am not sure I am understanding what you were trying to say. It is like this, the more I reduce the browser size the less I see when I hover over the button. Does that help? How do I put a screenshot in for you to look at? – rlearning Nov 14 '17 at 21:43
  • You can upload the screenshot somewhere and share a link here – Andrija Ćeranić Nov 14 '17 at 21:53
  • It&amp;#39;s strange. Like something is masking it. Can't you tell what is going on by inspecting it in Dev tools? – Andrija Ćeranić Nov 14 '17 at 22:19
  • I am no expert in Dev Tools, and I don't see anything going there. However, I am noticing it is like the image is being pushed more than covered. – rlearning Nov 14 '17 at 22:31
  • Maybe the image is not scaling on hover. Can you post your updated code? – Andrija Ćeranić Nov 14 '17 at 22:39
  • `body{ padding: 0; margin: 0; background-color: black; } .camera { position: relative; width: 100%; height: 100%; background-image: url('..\\images\\camera_with_buttons.png'); /* background-image: url('http://www.kenrockwell.com/nikon/d800/d800-back-1200.jpg');*/ background-repeat: no-repeat; background-size: 90%; background-position: center top; } ` – rlearning Nov 14 '17 at 22:41
  • `.button_pos{ display: block; width: 4vw; height: 4vw; margin-left: 1vw; margin-top: 1vw; border-radius: 50%; position: absolute; /*opacity: 0.7; cursor: pointer;*/ } #about { top: 5.6vw; left: 6.2vw; } #about:hover { background-image: url('..\\images\\about.png'); background-repeat: no-repeat; } ` – rlearning Nov 14 '17 at 22:42
  • I realized that the code could be streamlined, but the problem was there before I moved it around. It still works great with a colored button on the hover event. – rlearning Nov 14 '17 at 22:44
  • Try to add `background-size: cover` on `#about:hover` as the problem is that bg image is not scaled on hover. Maybe... – Andrija Ćeranić Nov 14 '17 at 22:47
  • You nailed it spot on! Thanks for all of your help. – rlearning Nov 15 '17 at 08:28