Creating a website layout using DIV elements that adjusts the background and buttons based on the screen

I'm currently tackling a straightforward HTML page but facing some challenges with the divs. The goal is to have a fullscreen background with four horizontal buttons aligned next to each other at the bottom. These buttons are currently linked to the background image - so one option is to include four invisible layers (divs) with href attributes. Alternatively, I could manually place them (as separate jpgs) at the bottom...

However, I want the entire site to smoothly scale up and down without borders to accommodate various screen resolutions. Therefore, the sizes of the divs/images should scale proportionally while maintaining their position.

What I've managed to achieve so far:

 body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
 }
 .background {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
   overflow: hidden;
 }
 img {
   height: auto;
   width: auto;
   min-width: 100%;
   min-height: 100%;
 }
<body>

  <div class="background">
    <div class="img">
      <img src="background.jpg">
    </div>
  </div>

</body>

Currently, I only have the background image set up: it's contained within an img-div within a background container with absolute positioning.

How can I now add the four buttons to remain fixed at the bottom of the background and retain their relative size and position when the screen resolution changes?

:)

Answer №1

Separate the button images from the background image, apply the following body rules (using background-image), include a new div at the bottom to contain the buttons (I opted for DIVs with background-images for the buttons, but <button> tags can also be used. Adjust the "bottom" position, button heights, and margins as necessary:

CSS

body {
   height: 100%;
   width: 100%;
   margin: 0;
   padding: 0;
   background: url(background.jpg) center center fixed;
   background-size: cover;
}
.bottom {
   position: absolute;
   bottom: 0;
   left: 0;
   height: 50px;
   width: 100%;
   text-align: center;
}
.button {
   display: inline-block;
   width: 80px;
   height: 50px;
   margin: 10px;
}
.button1 {
   background: url(button1.jpg) center center fixed;
   background-size: cover;
}
.button2 {
   background: url(button2.jpg) center center fixed;
   background-size: cover;
}
.button3 {
   background: url(button3.jpg) center center fixed;
   background-size: cover;
}
.button4 {
   background: url(button4.jpg) center center fixed;
   background-size: cover;
}

HTML:

<body>
   <div class="content">
      (your content)
   </div>
   <div class="bottom">
      <div class="button button1">(button text 1...)</div>
      <div class="button button2">(button text 2...)</div>
      <div class="button button3">(button text 3...)</div>
      <div class="button button4">(button text 4...)</div>
   </div>
</body>

Answer №2

Thank you for the prompt assistance!

The code appears to be functioning correctly at this point. However, I am encountering an issue where the buttons change size based on screen resolution changes. Is there a way to assign fixed sizes to the buttons relative to the entire screen? For example, "buttonX" should always occupy x% of the screen's width and x% of its height... I would like to ensure that the visible positioning and margin remain constant regardless of resolution changes :/

Thank you very much once again!

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

Revising the hierarchy between !important in CSS and jQuery

(Attempting to modify CSS properties within a Chrome extension content script) Is it feasible to override CSS properties that have been marked as !important on the webpage? For example, if I aim to eliminate an important border: $(".someclass").css(&apo ...

The proper display of the background color requires the use of position:absolute

While crafting a website using HTML and CSS3, I've run into a little trouble with nesting divs within each other and utilizing absolute positioning. Incorporating position:absolute allows me to specify the background color of the div and manage the el ...

Incorporate personalized design elements within the popup component of Material-UI's DataGrid Toolbar

I am in the process of customizing a Data Grid Toolbar component by making adjustments to the existing Grid Toolbar components sourced from Material-UI. For reference, you can view the official example of the Grid Toolbar components here. Upon clicking o ...

Navigating content with style: Horizontal scrolling feature in HTML5 & CSS3

How can I create a magazine-style website similar to asidemag.com using HTML5 and CSS3, with horizontal scrolling feature? ...

Use JavaScript to swap out images

How can I change the image arrow when it is clicked? Currently, I have this code snippet: http://codepen.io/anon/pen/qEMLxq. However, when the image is clicked, it changes but does not hide. <a id="Boton1" class="button" onClick="showHide()" href="j ...

Scrolling text blocks on mobile devices

When viewing the website on a desktop, everything works perfectly. However, when accessing it on a mobile device and trying to scroll down, only the text moves while the page remains stationary. The website utilizes skrollr core for animations. I have alre ...

When the button is clicked, a modal will pop up

Looking for help in incorporating JavaScript to create a responsive modal that pops up with lyrics when a button is pressed in a table. Any assistance would be greatly appreciated. Note: Only the code for the table has been provided. Let me know if you&ap ...

"Troubleshooting the issue of consistently receiving null values when uploading files with

I'm facing an issue with uploading a file using jQuery AJAX. Although I can see all the details of the file object such as its name and size, when I check the console with formdata.get("files"), the context.request.files size always shows zero. It see ...

Is it possible to use the same identifier for both the name and id attributes in HTML?

In the world of coding, the "name" attribute is often used in server-side programming to send name/value pairs in requests. On the other hand, the "id" attribute is commonly utilized in client-side programming such as Javascript and CSS. However, both att ...

Display a loading GIF for every HTTP request made in Angular 4

I am a beginner with Angular and I am looking for a way to display a spinner every time an HTTP request is made. My application consists of multiple components: <component-one></component-one> <component-two></component-two> <c ...

The Parcel build was unsuccessful due to an error from @parcel/resolver-default: The file '../../../../../css/main.css' could not be loaded within the './src' directory

I utilize [email protected]. Whenever I attempt to load an external css or javascript file in my index.html, Parcel consistently fails to build with the following error: Build failed. @parcel/core: Failed to resolve './css/main.css' from & ...

Is there a way to remove the unwanted code ​ from the client side of my website?

Upon inspecting the source code of a webpage, I noticed an odd character ​ appearing before the <script> tag on the client side. Strangely, this mysterious character is not present anywhere in the server-side PHP file. I attempted removing a ...

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

Is there a way to remove backdrop-filter: blur effect from elements within a div?

Having an issue with a CSS property. I have designed a modal that includes inputs and labels, and I want to blur the background content. However, the problem I am facing is that the blur effect is also being applied to all elements inside the container, in ...

Struggling to synchronize animation timing between elements using jquery

When you navigate to an album (for example, Nature because I'm still working on the others) and select one of the images, they all gradually fade out while the selected image appears on the screen. What's actually happening is that the selected i ...

How can we adjust the flex values to ensure the label displays properly on a narrow container width?

The labels in the left column of the form are initially sized correctly, but shrink when there is not enough room. However, there's a discrepancy in label size between rows with 2 items and rows with 3 items. body { font-family: Arial; font-siz ...

Bootstrap 5 error: Tooltip is placed too high when using data-bs-placement="top"

After upgrading a project from Bootstrap 4 to 5, I encountered a tooltip issue. The tooltips were perfectly positioned on the component when using left, right, or bottom placements, but they appeared too high when using top placement. Interestingly, the t ...

The CSS class is specifically assigned to a single element

After every two seconds, my JavaScript function is triggered and based on certain logic, I aim to add a CSS class with an effect to an HTML element on the page. var counter = 0; $interval(function () { counter++; ...

Modifying the default class styles from Bootstrap based on the HTML displayed in Devtools

I am attempting to customize the styles of my application using bootstrap. Upon inspecting the HTML in Chrome Devtools, I found the following rendered code: <div data-v-256a5f3d="" data-v-7bf4ea52="" class="row bg-gray-200 bord ...

Interacting between client and server with the help of JavaScript and websockets

As someone new to Javascript, I am eager to learn about the steps and initial codes needed to establish a connection between the client side and the server side using JS and websockets. ...