Background image that is vertically responsive

I'm struggling with getting a full-page background image to maintain a consistent margin around all sides, especially at the bottom. I want the image to be vertically responsive using only CSS, without relying on Javascript. Any suggestions on how to achieve this?

.background-image {
    display: inline-block; 
    height: 100%;
    width: 98%;
    margin: 1%;
    background: url('/wp-content/themes/woodsy/images/background-walnut-test.jpg') no-repeat center center fixed;
    background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    -webkit-background-size: cover; 
}
javascripthtmlcssresponsive-design

Answer №1

To achieve a 1% margin equal to the width, simply adjust the height to 98%.

If you prefer to have a precise 10px margin, define the margin first, then utilize calc() to establish the width and height:

margin: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);

View the functioning example here: http://jsfiddle.net/snvhbee7/

Answer №2

I'm not completely clear on the question, but if I understand correctly, I believe I have the solution you're looking for.

Instead of using: 

    height: 100%;

consider using: 

    height: 100vh;

Using 'vh' indicates 'viewport height', which will adjust the height of your image to fit the entire browser window dynamically.

I hope this information proves helpful to you.

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

Are none of the page links clickable?

Currently, I am in the process of creating a portfolio website. This is my first attempt at coding HTML and CSS from scratch without the aid of a layout template. I've encountered an issue that has me stumped - the links within the container are not ...

javascripthtmlcsstwitter-bootstrapz-index

CSS animation stalling

While my angular app is loading all the necessary content through ajax, I display a loader on top of the content on a darker layer. The SVG used in this process contains an animateTransform: <svg width="38" height="38" viewBox="0 0 38 38" xmlns="http: ...

javascripthtmlcssangularjssvg

Troubleshooting: Instagram API JavaScript Example Showing Errors

I'm currently working on integrating a photo feed from my Instagram account by following this tutorial: Below is the snippet of my HTML code with the addition of instafeed.min.js: <!DOCTYPE <!DOCTYPE html> <html> <head> < ...

javascripthtmlinstagram-api

What causes offsetHeight to be less than clientHeight?

INFORMATION: clientHeight: Retrieves the height of an element, taking into account padding offsetHeight: Obtains the height of an element, considering padding, border, and scrollbar Analyzing the Data: The value returned by offsetHeight is expected to ...

javascripthtmlcss

Incorporating an HTML Canvas element within a CSS grid design

I've been attempting to integrate an html canvas that I created into one of the css grid classes specified in my code. The code runs when the "Calculate" button is clicked. Upon clicking the button, the <div> section designated for the canvas r ...

javascripthtmlcsscanvas

What is the best way to apply fading effects to three divs containing additional divs?

Looking at this HTML and CSS code: HTML <DIV class="newsPic"></DIV> <DIV class="newsPicTwo"></DIV> <DIV class="newsPicThree"></DIV> CSS .newsPic { width: 500px; height: 200px; } .newsPicTwo { width: 500px; height: 2 ...

javascriptjqueryhtmlcssanimation

Discovering an npm module within an ember-cli addon component

I recently encountered an issue while using ember-browserify to locate npm modules in my ember-cli applications - it seems to not function properly for ember-cli addons. This leads me to wonder: Are there alternative methods for importing npm modules into ...

javascriptember.jsnpmember-cli

Use Vue.js class bindings to create blank spaces in between CSS classes

I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component. When I specify this in my template: <aside v-bind:class="{'--opened': sidebarVisible}" ...

htmlcssvue.jsweb-frontend

Incorporate an additional retrieve functionality in your asp.net web api

I'm brand new to the world of asp.net web api. I have a solid understanding of get(), put(), post() and delete(). For my application, I need to implement two additional get() methods. Here is an overview- public class StudentController : ApiControll ...

javascriptasp.net-mvcangularjsasp.net-web-apiangular-http

Tips on resizing images within a container to maintain aspect ratio

I am trying to create a layout with a flex container containing 2 divs - one with an image that floats left, and the other with some paragraphs floating right. How can I make sure that the image scales alongside the paragraphs while maintaining its aspect ...

htmlcss

Why is my Javascript for-loop returning "null" instead of the expected value?

Having trouble with the function below that is supposed to calculate the average of all elements in array1. Unfortunately, the function keeps returning null as the result. I can't seem to pinpoint the issue. var array1 = [46,73,-18,0,-442,779,5,1400] ...

javascriptarraysfor-loop

Executing a controller method in Grails using JavaScript

When working in a Grails view, I find myself needing to execute a JavaScript method to retrieve certain information. To achieve this, I have set up a submit action as shown below: <input type="submit" name="submit" class="submit action-button" value="G ...

javascriptgrails

The hyperlink activation event is malfunctioning

There seems to be an issue with the "Goods" link not working after clicking on "Shops." <div class="i_find"> <div class="replaced_link">Goods</div> <div class="link_container"><a href="#" class="a_shops">Shops</a&g ...

javascriptjquery

The React Bootstrap modal fails to display the value of an argument passed through a parameter

I am currently working on a project that utilizes React for its front end development. Below is the code snippet: import React, {useState} from 'react'; import Tree from 'react-d3-tree'; import { useCenteredTree } from "./helpers&q ...

javascriptreactjsfunctionbootstrap-modalbootstrap-5

Limiting the quantity in SimpleCart (js)

Currently, I am working on a WordPress website where I am using simpleCart(js) to add a shopping cart feature. I sell unique articles and do not require users to add more than one article to their cart. My main concern is how to prevent users from adding ...

javascriptjquery

What is the process for including echo HTML field in the WooCommerce order view?

I have successfully added HTML input fields within functions.php. However, these echoed fields are not displaying in WooCommerce orders after placing an order. I am looking for a way to include the values and labels of these fields in the orders view wit ...

javascriptphpwordpresshtmlwoocommerce

Tips for synchronizing text field and formula field content on MathQuill 0.10

I am currently working on creating a WYSIWYGish input element for my formula, along with a LaTeX input element. <span id="editable-math" class="mathquill-editable"></span> The goal is to make these two elements work synchronously. Here's ...

javascriptjqueryhtmlmathquill

How can I include multiple dictionary entries in a JSON file at once?

After attempting to include an array with dictionaries in a JSON file, I encountered multiple errors. This has led me to question whether it is feasible to add dictionaries directly into a JSON file without using Node.JS for data insertion. Here is an exa ...

javascriptnode.jsjsondictionary

What are the risks of employing conditional rendering in react-router-dom for authentication purposes?

In the following code snippet: If the authentication data sent from the client matches in the backend, a response with the user ID is sent. If setIsAuth sets to true, the Layout Component will display the first case within the Switch component, allowin ...

javascriptnode.jsreactjsreact-router-dom

Hey there everyone, I was wondering how to send both single and multiple values to a database using JavaScript and JSON endpoints with a Spring Web API

{ "id": 178, "stockin_date": "2022-11-15T08:18:54.252+00:00", "effective_date": null, "expired_date": null, "create_date": null, "update_date&q ...

javascriptjsonajaxspringapi