How to perfectly center a background image using CSS

I am currently working on a project that involves using a background image. However, I am facing some difficulties in trying to fully center the image, similar to what is shown in this

My objective is

https://i.sstatic.net/XUNTy.png

What I have achieved so far is

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

As you can observe, the image is not perfectly centered vertically and when the screen is resized, the pencil tends to disappear.

Here you can view the image in question. https://i.sstatic.net/bUfLB.jpg

Below is the CSS code being used:

    .app {
        height: 100%;
        background: url('./background.jpg') no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }

A big thank you to anyone who can provide assistance.

.app {
  height: 100%;
  background: url('https://laaouatni.github.io/w11-clone/images/1dark.jpg') no-repeat center center fixed;
  background-size: cover;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>

<body class="app">
</body>

</html>

javascripthtmlcssuser-interfacesass

Answer №1

tips for perfect background placement

your background might be centered, but the image itself isn't

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

solution with a bit of code

try adjusting the background-position-y value by something like -10em, it worked well on my screen size

the position-y property is similar to translateY, but specifically for moving background images vertically

or a simple alternative

for better results, consider using PHOTOSHOP to crop and center the image before adding it to your HTML

I understand it's not perfect, but if less coding is your goal ¯_(ツ)_/¯ and it'll still look good on all devices

.app {
    height: 100%;
    background-image: url('https://i.ibb.co/pWsFM5S/background.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position-y: -10em;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="app">
</body>

</html>

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

What is the process for incorporating a full-page blog into a blog preview?

I customized a template, but there is a blog section within the div that I am struggling to replicate. Here is the test website for reference: Below is the HTML code for the blog section: <!-- Blog Start --> <section class="section bg ...

javascriptphphtmlcss

Tips on saving a form submit button data to localStorage

As a newcomer, I am on a quest to make this function properly. My goal is to create a form where the submit button saves data to the localStorage. Here's what I have tried thus far. <script> function storeRecipe() { localStorage.setItem($(" ...

javascripthtmlcss

GAS: What strategies can I implement to optimize the speed of this script?

I have a sheet with multiple rows connected by "";" and I want to expand the strings while preserving the table IDs. ID Column X: Joined Rows 01 a;bcdfh;345;xyw... 02 aqwx;tyuio;345;xyw... 03 wxcv;gth;2364;x89... function expand_j ...

javascriptperformancegoogle-apps-scripttime

Issues with HTML Units not Showing up

I'm trying to achieve the same functionality as this JSFiddle: https://jsfiddle.net/nstruth/t0dopzav/1/ When I select Volvo, the HTML displays correctly but the JavaScript doesn't seem to be functioning. I've looked at other innerHTML JavaS ...

javascripthtmljquery

Wait until the link is clicked before showing the list element

Is there a way to prevent the display of list element id="two" in the code below until link "#two" has been clicked, removing element id="one"? I am looking for a CSS or JS solution that completely hides the list element rather than just hiding it from vie ...

javascriptjqueryhtmlcss

What is the reason for the reduction in dependency versions when installing npm

Encountering an issue with installing a package using npm. The process is resulting in decreased dependencies versions, which is causing issues with my application and unit tests. For example, after installation, my package.lock file looks like this: htt ...

javascriptnpmprojectpackage.json

Steps for declaring CSS values with fallbacks in case of unsupported values

I'm looking to utilize the overflow: overlay property in Chrome, and overflow: scroll in Firefox. Simply declaring the overlay value causes Firefox not to scroll at all, even though I know it's not standard. My question is: what's the optim ...

javascriptcssfallback

Attempting to run the npm install command led to encountering a SyntaxError with an

Recently, I made some alterations to my npm configuration and ever since then, I have been consistently encountering the same error whenever I try to install various packages. It seems that due to a personal mistake in changing the npm settings, I am now u ...

javascriptnode.jsnpmhomebrew

Update MYSQL table values using AJAX and jQuery, then dynamically refresh the updated values on the web page

Hey there! I am fairly new to utilizing ajax and encountering some difficulty with a fundamental concept. In my MySQL table called "users," I have various user information stored, including the balance they pledge to donate. My goal is to create a div elem ...

javascriptphpjquerymysqlajax

substituting white spaces in a string with dashes

My task involves taking a string and modifying it so that it can be appended to a query. For instance, I may start with the string "A Basket For Every Occasion" and need it to become "A-Basket-For-Every-Occasion". The process requires locating spaces wit ...

javascriptrecursionindexof

What is the best way to incorporate correct reference logic when utilizing Joi validation?

I am currently working on designing a straightforward schema to validate inputted number ranges. The condition is that the start value should be less than the end value, and conversely, the end value must be greater than the start value. Below is the sche ...

javascriptnode.jsexpressjoi

Firestore query is returning empty results upon page initialization, but provides data upon subsequent re-renders in React Native

ISSUE I'm encountering an issue where I am unable to fetch documents from a Firestore collection when the page loads. Despite executing the query multiple times during loading, it does not return any results. However, if I trigger the query by changi ...

javascriptfirebasereact-nativegoogle-cloud-firestore

Manage and display data in Vue.js using the CLI

I'm currently developing a form where users can input data and I need to display that data on another page using Vue.js Below is the form I have created: <form id="main-contact-form" class="contact-form r ...

javascriptformsvue.jscommand-line-interfacevuejs3

How can I effectively separate the impact of Next.js onChange from my onClick function?

The buttons in my code are not functioning properly unless I remove the onChange. Adding () to my functions inside onClick causes them to run on every keystroke. How can I resolve this issue? In order to post my question, I need to include some dummy text. ...

javascriptreactjsnext.js

CSS creates multi-layered parallax effects for images

I am working with three images: a transparent sun image, a transparent mountain image, and a transparent human character image. The positioning of these images is crucial. The first image should be positioned in the background, but it needs to move. The s ...

htmlcssparallax

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...

javascripthtmlcss

Avoiding JavaScript onclick event using JSON information

Here's a situation I'm dealing with: I have a button created using PHP that triggers a JavaScript onclick event: <button onClick='edit(this, "<?php echo $this->result[$i]["type"]; ?>","<?php echo $quality; ?>", "<?php e ...

javascriptphpjqueryjson

Reload the Angular application and navigate to a different state

Introduction In my extensive angular application, there are numerous forms for various items. These forms are associated with action objects that have unique schemaforms. The dropdowns in these forms vary based on the specific action and its parent comp ...

javascriptangularjsstate.go

The intricate layout of an HTML Bootstrap table

Struggling to create a complex table structure using BOOTSTRAP and need some help. If anyone has the solution or HTML structure to share with me, that would be greatly appreciated. Here is a screenshot of the structure I am aiming for:) Thank you in adva ...

htmlbootstrap-4

Resposiveness of force-directed graph is lost

const container = document.getElementById("container"); const svgElement = d3.select(container).append("svg") // Get the width and height computed by CSS. let width = container.clientWidth; let height = container.clientHeight; const colorScale = d3.scale ...

javascriptcssd3.jssvg