Use a fixed height to set a background image on your website

My landing page design is currently boxed, but I want to set a background image that spans the entire width of the page. I chose to set the background image to the body element to achieve this effect.

body {
  background-image: url("bg-image.png") !important;
  background-repeat: no-repeat;  
  background-attachment: fixed;
  background-clip: border-box;
  background-color: rgba(0, 0, 0, 0);
  background-origin: padding-box;
  background-position: 0 0;
  background-size: 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: -1; 
  background-position: 0% 70%;  
}       

Currently, the image is appearing at 70% of my screen size. How can I ensure that it always appears at position 70% of my entire landing page?

Setting it up with background-position: 0px 1200px; does not work and is not responsive. How can I achieve the desired positioning without losing responsiveness?

Answer №1

Here is a code snippet you might find helpful:

body{
  background: url(image/bg.jpg) no-repeat center fixed;
  -webkit-background-size: cover;
  background-size: cover;
}

Feel free to test it out and let me know if it meets your needs.

Answer №2

body {
    background: #ffffff url(../images/background.jpg) no-repeat center center;
    min-height: 100vh;
    background-size: cover;
}

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

Unable to retrieve input using jquery selector

I am attempting to detect the click event on a checkbox. The Xpath for the element provided by firebug is as follows, starting with a table tag in my JSP (i.e. the table is within a div). /html/body/div[1]/div/div/div[2]/div/div[2]/div[1]/div/div[2]/table ...

I envision my home page being divided into two visually stunning full-screen sections, each taking up the entire height of the page

I am currently working with the code shown below. It successfully displays the first part in full height, regardless of resolution, but once I scroll to the second half, there is a large empty gap. How can I eliminate this gap and make the transition smoot ...

Incorporating React State into CSS Styles

Currently, I am immersed in a project based on NextJS where I have to utilize React State to determine the width of a div. In the existing setup, this calculation takes place within a .tsx file using constants and is incremented upon clicking a button. The ...

The Chrome extension takes control of the new tab feature by redirecting it to a custom newtab.html

I have a website https://example.com where users can adjust their site preferences, including enabling night mode. To enhance the user experience, I developed a Chrome extension for https://example.com that transforms Chrome's new tab with a custom ne ...

AngularJs Number Formatting: A Step-By-Step Guide

Is there a way to format a number from 10000 to 10,000.00 using only HTML and the ng-Model directive, without involving the controller file? I attempted to achieve this in the controller file through logic, but it always returns the number in the "10,00 ...

Unexpected labels continue to pop up in the footer of the HTML file

I have noticed that the following HTML always appears at the very bottom of the body tag in all my projects, regardless of whether I am using React.js or not. Interestingly, when I switch to an incognito browser, these tags disappear. Curiously, these sa ...

Utilizing a dynamic URL to set the background image of a div element (with the help of

Currently, I am in the process of designing a user registration page that allows users to input an image URL and view a preview of the image within a designated div. The div already contains a default image set by a specific class. The HTML code for displa ...

Having trouble configuring AJAX and PHP to work together

Here's the situation I'm dealing with: I have HTML, JS, and PHP files. In the PHP file, there is an associative array containing default values to populate form elements in the HTML file. I'm trying to use AJAX to retrieve data from the PHP ...

Utilizing Jquery to enhance slide image transitions with navigational links

As a newcomer to jQuery, I am attempting to create a slider using jQuery. Here is the script I have so far: $(function() { var bgCounter = 0, text = [ 'some html code here', 'some html code here', 'some ...

Position the div element beside the image, rather than below it

I am having an issue with Bootstrap where the card I want to display on the right of an image is appearing below it instead. I attempted to use the display: inline-block property, but unfortunately, that did not solve the problem. I also explored other so ...

Issue with Datepicker functionality within the <th> element is causing it to malfunction

Currently, I am attempting to utilize the Bootstrap datepicker, but I am facing an issue when trying to implement it within a table, specifically inside a th element. Below is the structure of my table: <table id="table" class="table table-bord ...

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

As I strive to add a dotted border-style to the horizontal rule on my website, an interesting challenge arises when the Bootstrap-5 CDN is included. The border-style does not take effect as expected. Even on Codeply, the border-style works perfectly until ...

The results in the grid are displayed in a horizontal layout, rather than a

My grid results are not rendering as desired, appearing horizontally instead of in two columns. Attached is my current CSS and a screenshot of the issue for reference. Any suggestions on how I can achieve the layout shown in the screenshot below? .grid ...

How can I prevent opening duplicate tabs of the same website simultaneously?

Is there a way to prevent users from accessing the same website page from multiple tabs? Could this be accomplished using JavaScript? ...

What steps can be taken to eliminate the 1-pixel line between the background and gradient?

https://i.sstatic.net/nbtkK.png How can I remove the line that appears between the block and the gradient background when zooming in, especially noticeable in Safari (After zooming a couple times, Cmd +) For more details, please refer to this jsfiddle li ...

Tips for creating a responsive input field within a navbar

Can anyone assist me with setting the input field width in my navbar to adjust to the remaining width of the navbar and be responsive to different device sizes? I need the input field to dynamically change its width based on the screen size. Any help would ...

Configuration for secondary dependencies in Tailwind

As per the guidelines outlined in the official documentation, it is recommended to configure Tailwind to scan reusable components for class names when using them across multiple projects: If you’ve created your own set of components styled with Tailwin ...

CSS - Ignoring Padding Causes Unexpected White Space to Appear

I am encountering a simple error, and the following address will direct you to where the issue can be seen. Why is certain parts of the header appearing white instead of the light shade of green it is set to be? It should be positioned right at the top un ...

Can you explain the distinction between onKeyUp and onKeyUpCapture in React (as well as onKeyDown/Capture)?

I was unable to find any existing documentation or questions related to my query, which surprised me. Upon inspecting the React index.d.ts file, I came across the following: // Keyboard Events onKeyDown?: KeyboardEventHandler<T>; onKeyDownCapture?: ...

What is the best way to design a table where the cells can flow or wrap instead of being confined to a strict grid?

Struggling with designing a layout for my website as I lack experience in web design. Unfortunately, the only software I have access to is FrontPage which is not meeting my requirements. I aim to create a webpage with multiple "cells," each featuring an i ...