Dynamic Background Design for CSS Landing Page

Greetings! I've been attempting to create a responsive background for my landing page, but I'm encountering some difficulties. I tried using height: auto, height: 100%, and margin: 0 auto, but the height of 100% didn't cover the entire screen as I intended. Here's the snippet of my code:

.crossfade > figure {
  animation: imageAnimation 48s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  height: 470px;
  left: 0px;
  opacity: 0;
  position: absolute;
  top: 189px;
  width: 100%;
  background-color: rgba(0,0,0,.3);
  background-blend-mode: darken;
  z-index: 0;
}

The only solution that worked for me was:

height: calc(100vh - 189px);

The 189px accounts for the space taken up by my header menu. Is there any way to achieve this without using calc? Hoping for a resolution, Thank you.

htmlcssbackgroundfrontendresponsive

Answer №1

Give this a try

.crossfade > figure {
  animation: imageAnimation 48s linear infinite 0s;
  background-size: cover;
  background-position: center center;
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,.3);
  z-index: 0;
}

Answer №2

Consider trying this approach:

.crossfade > figure { 
  animation: imageAnimation 48s linear infinite 0s; 
  background-size: cover; 
  background-position: center center; 
  width: 100%; 
  height: 100vh; 
  position: absolute; 
  top: 0; 
  left:0; 
  right:0; 
  bottom:0; 
  background-color: rgba(0,0,0,.3); 
  z-index: 0; 
}

#menu-contact-us { 
  background: #5D5D5D; 
  height: 124px; 
  color: #ffffff; 
  width: 100%; 
  position: relative; 
  z-index: 1; 
}

The full-screen images were successfully implemented based on the provided link.

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

Grails: Javascript function for updating the image source is unresponsive

I have a situation where I need to change the src of an img based on a certain condition. The condition is returning true as expected, as confirmed by an alert() that I added previously. However, the function responsible for changing the src of the img and ...

javascripthtmlajaxgrails

Personalizing Web Push Alerts (Google Chrome)

I successfully implemented a web push notification for Google Chrome using Google Project and Service Worker. One thing I'm curious about is how to customize or style the push notification. The plain message box doesn't quite cut it for me – I ...

javascripthtmlcssgoogle-chromepush-notification

The Iframe is malfunctioning and not displaying properly

Thank you for the insights on header issues. I have a follow-up question: Is it possible to identify header problems that prevent me from displaying content in an iframe just by looking at the link? If so, can I display a different page for those problemat ...

phphtmliframe

Rotation of Weekly Menus

I have a project to enhance our Menu Order Website by adding a weekly rotating menu feature. I have completed the entire website, including the admin panels, but I am struggling to implement the rotating menu functionality. Currently, all menus are include ...

phpcss

Alignment of badge-pill and h2 in a horizontal position

I'm currently working on mastering Bootstrap. My goal is to have a prominent heading followed by three small badge-pills that are horizontally centered on the page. However, I've run into a couple of issues: 1- The badge-pills are appearing stac ...

csshtmlbootstrap-4

How to Implement Angular Masonry with AngularJS?

I'm working on a layout that utilizes the passsy extension for angular masonry. <masonry column-width="200"> <div class="masonry-brick" ng-repeat="data in comments"> <div ng-switch on="data.type"> <div ng-swit ...

cssangularjsjquery-masonryjquery-isotope

What is the best way to showcase a ul element as inline-block?

Is there a way to keep the bottom menu aligned in one row on all screen sizes? I attempted using display: inline-block, but it doesn't seem to work for me. Below is the CSS code: footer #middle-footer { background: #F6F6F6; color: #000; font-size ...

htmlwordpresscsshtml-lists

Width of the progress bar

My goal is to dynamically set the width of my progress bar based on a calculated percentage. As a beginner, I admit that my code may not be optimal: JQuery $(document).ready(function() { var width=(1/5*100); $('#progress_bar').css('width&a ...

jquerycsswidthvar

Tips for placing a searchbox on top of a carousel?

I need to create a search box that overlays on top of a carousel image. I currently have the search box positioned absolutely, but it's not responsive as it doesn't stay within the carousel as the width decreases. How can I make it responsive whi ...

htmlcsstwitter-bootstrap

Is it possible for Carousel to showcase a different layout other than tables or items? And is there a way to customize

I'm trying to use Bootstrap 5 to display items in a row, like sets of 3 or 12, and have them slide into view one set at a time. However, when I add a carousel, the items end up stacked on top of each other. Here is the code snippet: <div c ...

htmlcsscarouselbootstrap-5

Identify when a mouse hovers within 10 pixels of a div using jQuery

Is it possible to detect when a user hovers over a specific area within a div using JavaScript or jQuery, without adding any additional tags? -------------------------------- -------------------------------- -------------------------------- -------- ...

javascriptjqueryhtmlcss

Is Xamarin.Forms WebView having trouble rendering position:fixed css properly?

I am currently in the process of creating a cross-platform app using Xamarin in conjunction with Xamarin Forms to simply display my website. Things have been going smoothly for the most part, but I have encountered a significant issue on Android. To invest ...

androidcssmonoxamarinxamarin.forms

Resolve the issue of Dojo images not appearing on a div in Internet Explorer

I am trying to incorporate images into a dojo chart using the given code: var l_images = ["images/clearnight.png","images/clear.png","images/partlyCloudy.png","images/cloudy.png","images/showers.png","images/rain.png","images/thunderstorms.png","images/ic ...

cssinternet-explorer-8dojox.charting

Is there a way to make the iOS Safari address bar shrink when scrolling, all while having a flexbox sticky footer inside a container?

I have implemented a standard flexbox sticky footer solution in my code: <body> <div class="wrapper"> <div class="header">Page Header</div> <div class="body"> <div class="b ...

cssflexboxmobile-safari

Looking to activate a button only when the checkbox is selected and in an enabled state

I'm struggling to make the button enable when the checkbox is checked and enabled. Additionally, it should be dependent on the textarea scroll above it. Once the checkbox is checked, the page needs to scroll up and down to activate the button. Here& ...

jqueryhtmlbuttoncheckboxscroll

Sweetalert not functioning properly when deleting records from Datatable

I am currently working on a CRM script and encountering an issue. The customers are stored in a data table, and I am trying to implement a delete function with confirmation from both the database and the data table. I have written some code and placed it w ...

javascriptphphtmldatatablesweetalert2

The jQuery scroll functionality is malfunctioning

Could you please assist me in resolving an issue with my scroll effects not working? I have been unable to pinpoint the problem. The code snippet I am using is based on Bootstrap 4. Below is the code snippet in question: //SCROLL EFFECT $(".nav-link" ...

javascriptjqueryhtmlbootstrap-4

Choose from the dropdown menu, not from the text

I'm having trouble aligning a select element in Bootstrap without centering the text inside it. Can anyone provide a solution for this issue? I've attempted to center the containing div and then set the text-align property to left for the select ...

htmlcsstwitter-bootstrap

use css to align multiple div elements

I am struggling to line up more than five div tags on the same line. Here is my CSS: <style> #yes { float: left; width: 18%; margin:1px; } </style> Example of HTML code: echo '<div id="yes">'.'<b>'.'Job T ...

htmlcss

Alter the values of the <form> element prior to submission

I am in need of submitting a form to Salesforce for creating a case. Before the submission of the form, I require changing the form values based on which button is clicked. I have designed a form with two buttons - when the first button is clicked, the cu ...

javascriptc#htmlcode-behind