Tips for adjusting UI size in CSS based on viewport dimensions and accommodating image content

https://i.sstatic.net/DMU5s.jpg

The elements E1, E2, E3, E4 are all part of the user interface (UI) and are intended to have a hover effect. Additionally, there is a background image included in the design.

Currently, this is the progress made on the project:

<div class="bg">

        <img src="bg.jpg" id="bg_id">

        <div class="ui">
            <img id="ui-elem1" src="ui-elem1.png">
        </div>

</div>

In the CSS section, the following styles have been set:

body {
  overflow: hidden;
  margin: 0 ;
}

.bg {
    position: relative;
    width: 100vw;
    height: 100vh;
}

#bg_id {
    position: absolute;
    width: 100%;
    height: 100%;
}

.ui {
    position: relative;
    width: 50vw;
    left: 10vw;
    top: 75vw;
}
/* 20% of ui */
/* 20% width 4 images = 4*20 = 80% padding = 6.6% */
#ui-elem1 {
    position: absolute;
    width: 20%;
    height: 100%;
    padding: 6.6%;

}

While the background image functions as intended - resizing proportionally with the viewport, there seems to be an issue with displaying the first UI element. Any suggestions on how to troubleshoot this problem?

Thank you.

UPDATE: A live demo is available for reference at https://jsfiddle.net/vq24a76p/1/. However, the proportional display to the viewport is not accurate.

Answer №1

You can achieve this effect by utilizing the background-image property and setting the size to cover, similar to the example provided in this FIDDLE.

.bg {
    background-image:url('https://media.mnn.com/assets/images/2014/07/Mount-Fuji-Japan-Wintertime.jpg.1000x0_q80_crop-smart.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center; 
    background-size:cover;

}

Another method is to use an image tag with width set to 100% and height set to auto. However, this may result in a blank space at the bottom of some vertical images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I apply and delete a css class only while scrolling in a React application?

Currently, I am designing a pretend blog layout to showcase my work. The grid of posts features cards that are precisely 400x400 in size with a hover effect that magnifies and adds a drop shadow (this is visible in the dashboard route). However, an issue ...

Utilize Angular to connect NavBar partial HTML with a controller variable

Encountering an issue where my search term in the navigation bar is not binding to a controller variable due to it being out of scope. Attempting to utilize ng-model in the partial HTML navbar to connect the input value with the controller variable. Parti ...

Can anyone suggest a stellar sprite generator for me?

I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...

What is the most effective method for dynamically creating an HTML report from scratch?

I need help figuring out the best way to convert a substantial amount of program output into an HTML report. Right now, I am manually piecing together the report by extracting relevant information from the extensive logging in my large Python program and f ...

Tips for connecting elements at the same index

.buttons, .weChangeColor { width: 50%; height: 100%; float: left; } .weChangeColor p { background: red; border: 1px solid; } .toggleColor { background: green; } <div class="buttons"> <p><a href="#">FirstLink</a></ ...

Duplicate text content from a mirrored textarea and save to clipboard

I came across some code snippets here that are perfect for a tool I'm currently developing. The codes help in copying the value of the previous textarea to the clipboard, but it doesn't work as expected when dealing with cloned textareas. Any sug ...

Is there a way to execute a POST command in HTML without utilizing a form tag?

Currently, I have a form that gathers input from the user and redirects to a new page upon submission by clicking a button. However, I am looking for a way to automatically open this destination page when the current page loads, without the need for manual ...

The registration page in PHP is malfunctioning, and the reason remains a mystery to me

Having trouble with my register page submit button. Any help is appreciated. Below is the structure of my SQL table: CREATE TABLE `USERS` ( `id` int(20) NOT NULL AUTO_INCREMENT PRIMARY KEY, `username` varchar(50) NOT NULL, `password` varchar(50) N ...

Bootstrap card elements are failing to display properly, deviating from the expected

My Bootstrap cards are displaying strangely. Instead of having a border, white padding, and a white background like the examples I've seen, mine look like plain text without any styling. Here is an image for reference: https://i.stack.imgur.com/9MsP ...

What is the best way to update the color of an fa icon when an error message is displayed using PHP

I am facing an issue with my form where error messages are displayed on certain input fields. The error messages show up correctly, but I want to change the color of the "fa" icon in the field when its corresponding error message appears. My goal is to ma ...

What is the best way to resize a SWF file within an HTML page?

Within the Stage class, both stageHeight and stageWidth properties can be modified. Is there a method to embed the swf file in a way that any changes made to these properties are automatically reflected on the HTML page? Is it possible to achieve this wit ...

I'm attempting to make the button hover color transparent, but unfortunately, it's not having any effect

Check out the code snippet below. I'm attempting to adjust the button hover color to transparent. The div class is "button_container" while the button class is "btn". I made changes to the color initially, but it doesn't seem to be working. Any a ...

Using a Do/While loop in combination with the setTimeout function to create an infinite loop

Having trouble with this script. The opacity transition works fine, but there seems to be an issue with the loop causing it to run indefinitely. My goal is to change the z-index once the opacity reaches 0. HTML <div class="ribbon_services_body" id="ri ...

What is the best way to populate a select input field with options using JavaScript?

When I am loading an HTML table, there is a select input field that needs to display some options. Immediately after constructing the HTML table row, I invoke a function to populate this input field using its class. Below is the relevant HTML snippet and ...

What is the best way to set the input type in AngularJS based on a variable?

Is there a way to dynamically set the input type based on another variable in AngularJS? I was considering using a directive that triggers from an onclick event to change the input type, but I'm not entirely sure. FIRST //loop <a class="orgTitle" ...

Is it possible to create a popup window that remains fixed at the top edge of the screen but scrolls along with the rest of the page if

In an attempt to organize my thoughts, I am facing a challenge with a search page similar to Google. The search results trigger a popup window when hovering over an icon, located to the right of the search results. Here is what I am looking to achieve with ...

What is the best way to retrieve text that is viewable to the user when there is a text overflow situation

When using ellipsis in a text input to indicate overflow, is there a way to determine what text is visible to the user versus hidden behind the ellipsis? Thank you for any help! https://i.stack.imgur.com/8iLBQ.png In my scenario, I need to display a list ...

issue with arranging content in a two-column layout with headers

Currently working on my first website and running into some CSS issues. I'm aiming for a two-column + header layout that fills the entire screen space of the website. I have the following specifications in mind: Header takes up 20% of the screen he ...

What is the best way to apply a specific style based on the book ID or card ID when a click event occurs on a specific card in vue.js

My latest project involves creating a page that displays a variety of books, with the data being fetched from a backend API and presented as cards. Each book card features two button sections: the first section includes "ADD TO BAG" and "WISHLIST" buttons ...

Froala text area is unexpectedly visible when I attempt to cover it with a partially see-through mask

The website I'm currently developing features a semi-transparent overlay that dims the screen with a light-colored message displayed on top. This overlay and message are shown whenever there is a background process running. Everything was running smoo ...