How come adjusting the background-position of the body's background image to center shifts the image upwards?

Featuring a background image that's perfectly centered:

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
<!DOCTYPE html>
<html>

<body>
</body>

</html>

Now without the background image being centered:

/*backgrounds and colors*/

body {
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
}
<!DOCTYPE html>
<html>

<body>
</body>

</html>

I'm puzzled as to why the image shifted upwards when I applied the center background-position setting?

htmlcss

Answer №1

One reason for this issue could be that the width and height of the container have not been set. Setting width: 100vw and height: 100vh, along with background-position: center, will centrally position the image.

/*backgrounds and colors*/

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: rgb(10, 20, 51);
  background-image: url("https://i.pinimg.com/originals/6a/29/28/6a2928106b907101787cd87f6613bdec.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
<!DOCTYPE html>
<html>

<body>
</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

Choose a trio of columns using jQuery

Is it possible to target three specific columns using jQuery or CSS, like this: Take a look at the example code below: <script> //I am attempting to target specific columns with this code snippet $('GvGrid').slice(1, 3).css("backgroundC ...

jqueryasp.netcsshtml

Having trouble with aligning middle of absolutely positioned block text vertically

I'm facing an issue with aligning h2 text vertically in the middle of a block. The situation is that I have multiple images with different heights but the same width (300px), each with varying amounts of text that may span over several lines and appe ...

htmlcss

Using a Django HTML variable embedded within a JSON string

My json string has a variable embedded in it. "country": { "name":"England", "city":"London", "description":"This country has a land mass of {{ info.1 }}km² and population is as big as <span class=\"colorF88017\">{{ info.2 }} ...

htmljsondjango

An online tool for converting USD to EUR or any desired currency using HTML and JavaScript

Having trouble converting currencies with this tool Convert US Dollars to Euros 2 Amount: From USD EUR To ...

javascripthtmlconcurrencyconverters

Utilizing a custom keyboard with Jquery for a recurring function

It seems like I might be missing something simple here, as I am following the code tutorial provided in the link below: The goal of this project is to create a popup keyboard for a touch screen. Although I have made some modifications for specific purpose ...

javascriptjqueryhtmlcss

Add a pair of assorted div elements to a shared container

I have two different sections with classes named "red" and "blue". By default, these sections are hidden. I want to duplicate them and display them in a single container named "cont". The red button appends the red section and the blue button appends the b ...

javascriptjqueryhtmlcss

Issue with the footer not remaining at the bottom of the page

I'm in the process of updating my website and have come across an issue with the footer placement on one specific page. Typically, the footer stays at the bottom of all pages except for this particular page where it appears floated to the left instead ...

htmlcss

Integrate JavaScript with WordPress

How can I get this functioning properly within Wordpress? I have been attempting to connect everything together, but it doesn't appear to be working. Is this the correct way to do it, or am I overlooking something? <script type="text/javascript" s ...

phphtmlcsswordpresscontent-management-system

Utilize checkboxes to sort through MySQLi data

Currently, I have a page that is populated with various types of posts such as news and blog entries. My goal is to implement checkboxes so that users can select which type of post they want to view. For example, I would like the option to check 'new ...

phpjqueryhtmlmysql

tabs that are vertical without the use of jQuery UI

I'm feeling a bit lost because I can't seem to find any examples or tutorials for vertical or side tabbed content. I want the tabs to be on the left side, but all my searches online have come up empty. Maybe I'm not using the right search te ...

javascripthtmlcsstabs

The modal window does not display a scroll bar

I'm currently facing an issue where the scroll bar is not appearing on my page when more elements are added. In addition, I have a modal that covers the entire page when clicking on an item. However, changing the CSS position: fixed property affects ...

javascripthtmlcssreactjs

What is the role of the CSS URL property in web design?

Occasionally, I enjoy the challenge of "reverse engineering" websites, especially those with a complex design. By dissecting these sites, I aim to gain insight into the techniques employed by other developers. Recently, my curiosity led me to analyze the ...

css

Python: Automate clicking on checkboxes with Selenium

Recently, I've encountered a problem and I'm in search of an answer. Below is some HTML code that I need to work with. My goal is to send a snippet of this HTML to selenium so that it can click on a checkbox. However, I don't want to use the ...

pythonhtmlselenium

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

Can a gradient box arrow be created using CSS 3?

Check out the following link to see a green box with a left-pointing arrow that floats: Is it achievable using solely CSS3? Can the arrow shape and gradient be created to appear in both the box and the arrow? If yes, how would you go about achieving this ...

htmlgradientcss

Preventing right-aligned images from overflowing inside a div on Google Chrome

I am currently utilizing the jQuery cycle plugin to display a slideshow of images that floats to the right within an outer div element. The CSS I am using is as follows: .slideshow { float:right; margin-left: 20px; } The image alignment works per ...

jqueryhtmlcssimagecss-float

Implement a hover animation for the "sign up" button using React

How can I add an on hover animation to the "sign up" button? I've been looking everywhere for a solution but haven't found anything yet. <div onClick={() => toggleRegister("login")}>Sign In</div> ...

javascriptcssreactjsonhover

What exactly is the true intention behind using document.write?

While experimenting with JavaScript, I encountered a behavior that seems unexpected to me. Here is the code snippet in question: Code: <!DOCTYPE html> <head> <meta charset = "utf-8"/> <title> Exercise pro ...

javascripthtml

JavaScript or HTML can be used to store external embed PDF files in a cache

I have a PDF file from an external source embedded on this page. Although it displays correctly, I am concerned about the file being downloaded each time the page is visited. Would using an object tag instead help to cache the PDF and prevent repeated do ...

javascripthtmlobjectpdfembed

Randomly browsing with two clicks in jQuery

Attempting to achieve smooth scrolling on div tags by clicking anchor tags in a list using jQuery. enter code here function scrollThere(targetElement, speed) { // initiate an animation to a certain page element: $('html, body , # ...

javascriptjqueryhtmlcss