Stop chrome from cropping background images on body while using background-position

The body tag of my website has a background image of a paper airplane. However, I'm facing an issue where the very tip of the image is being cut off in Chrome. Interestingly, resizing the browser window causes the full image to reappear.

This problem is isolated to Chrome and doesn't occur consistently. Sometimes refreshing the page or hovering over the image resolves the issue. Removing background styles such as background position and no-repeat displays the entire image, but it disrupts the positioning. The same issue persists on other pages of my website as well ().

Despite extensive debugging and searching, I haven't been able to find any references to this issue or possible fixes. Could this be a Chrome bug related to background-position?

Does anyone have any suggestions or workarounds? Thank you!

//EDITED// Below is the relevant code snippet, although it appears to be standard. The issue may be caused by something else on the site:

.home {
   background: url("../img/airplane.jpg") no-repeat center; 
   background-size: 70%;
   background-position: 10% 98%;
}
cssgoogle-chromebackground-position

Answer №1

The position of the background image is currently set to center, so the behavior you are experiencing is expected, especially depending on the size of the window. If you want to change this, you can modify the CSS declaration like this:

.home {
    background: url("../img/airplane.jpg") no-repeat center top;
    background-size: 70%;
}

By anchoring the image to the top of the screen, it will not get clipped, but keep in mind that this might not be the desired outcome.

There is also another CSS rule that might be causing issues. I recommend removing it completely:

@media (min-width: 1200px)
.home {
    background-position: 20% -10%;
}

Answer №2

Big shoutout to all the amazing individuals who shared their suggestions - with your help, I was able to come up with a clever workaround! I successfully maintained the background styles while placing everything within a :before pseudo element on the body tag. If you're curious, feel free to check out the updated code at cogo.goodfolk.co.nz or simply refer to it below:

.home {
   position: relative;
   min-height: 860px;
}
.home:before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   background: url("../img/airplane.jpg") no-repeat center;
   background-size: 70%;
   background-position: 50% 15%;
}

Answer №3

Change the display to "inline-table".

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

Can someone show me how to code a function that transforms my paragraph into an image when I hover over it?

< p id="p1" onmouseover="this.style.color='transparent';flipPara()"> < p id="p2" onmouseover="spookyPara()"> function spookyPara() { document.getElementById("p1").attribute = "All_Images/ghost.png"; } I currently have this code sn ...

javascripthtmlcssimagefunction

Is there a way to switch out the WordPress page title for an image instead?

I am trying to change up the appearance of my WordPress site by replacing the text on page titles with images. Working on a child theme locally, I need to customize each page individually as they will have different images. The current state is as follows ...

csswordpressimageparent-child

What is the best way to show the initial image within every div that has the class name .className?

I am looking to only show the first image in each div with the class name "className." This... <div class="className"> <p>Yo yo yo</p> <p><img src="snoop.jpg" /></p> </div> <div class="className"> Hel ...

javascriptjqueryhtmlcss

Menu with a carousel feature in between each item

I am experiencing an issue with a carousel embedded within a menu using Twitter Bootstrap. <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="carousel slide" id="CarouselTest"> <div class="carousel-i ...

jquerycsstwitter-bootstrap

Store user input as cookies and showcase it to the user upon their return visit

I'm looking for some assistance in saving user input to cookies and displaying it to the user. The goal is to have the text entered in the input field change into a div and be displayed to the user every time they revisit the page. Currently, I only ...

javascriptjqueryhtmlcsscookies

Transforming a Fixed Bootstrap Site into a Mobile-Friendly Design

I am facing an issue with my bootstrap website as it is not responsive to different view sizes. I would like to make it responsive but I am unsure of how to do so. Additionally, I am using LESS to modify the twitter bootstrap css. Currently, my site is str ...

htmlcsstwitter-bootstrapresponsive-designless

Angular single page application with a sleek, user-friendly navigation bar for easy browsing

I have been attempting to solve the issue at hand without much success. As a newcomer to web development, I have been working on creating a basic app using angularjs and bootstrap. My pages are fairly sparse, consisting only of a few inputs and buttons t ...

javascripthtmlcssangularjstwitter-bootstrap

Is there a way to adjust the size of a table display to ensure that both vertical and horizontal scroll bars are constantly visible?

[edits added below per the request to see code. Edits also added to the original post to clarify the ask - marked in bold] My application features a broad table with the potential for many rows, generated by django-tables2 using the bootstrap5-responsive ...

htmlcssbootstrap-5css-tablesdjango-tables2

Trouble with importing scss file in sass and bootstrap collaboration

I am using Sass with Bootstrap 4, and now I'm facing an issue in my Sass folder where I have an app.scss file that includes: @import _customVariables.scss @import node_modules/bootstrap/scss/functions @import node_modules/bootstrap/scss/mixins Howev ...

csssassbootstrap-4

How can you enable a button to be clicked from within a drawer?

Hey there, I've got a div that toggles hide/show like a drawer when clicked. When the drawer is in show state, it contains a button. How can I make the button clickable without toggling the drawer? Any ideas on this?! `zIndex` doesn't seem to be ...

javascriptcssreactjs

The CSS 'd' attribute for the <path> element is not functioning properly in Firefox

My generated code cannot be directly modified due to its association with a large JS code. A portion of this code creates an SVG shape, which I attempted to override through CSS. However, my solution does not function properly in Firefox! Below is the ori ...

cssfirefoxsvg

Create engaging text animation by transitioning from horizontally displayed text to vertically displayed text with the letters standing upright using An

I'm trying to create an animation where an acronym is displayed horizontally in the middle of the screen and then flips vertically. The challenge I'm facing is rotating individual letters once they are vertical so that the text reads from top to ...

htmlcssjquery-animate

Issues with the use of overflow:hidden

I need to create 5 divs aligned horizontally next to each other, spanning the width and height of the window. Each div should occupy 20% of the window width, and any overflow content should be hidden. Below is the CSS code for two of the divs: #container1 ...

htmlcss

Trigger an input file click automatically using vanilla JavaScript with an AJAX request in Google Chrome

Currently, my webapp operates in a way that every button click triggers an ajax request to the server. The server then validates and sends JavaScript code back to the client. Unfortunately, the framework I am using does not allow me to incorporate jQuery a ...

javascripthtmlajaxgoogle-chrome

Guide to adding a CSS class to an Ionic2 toast

i found a helpful resource on applying cssClass to my toast component. within my HTML, I have buttons: <button ion-button (click)="presentToast()"> toast</button> Here is the code snippet from my .ts file: presentToast() { let toast = t ...

cssangularsassionic2toast

Tips for personalizing your Magento 2 theme

As someone new to Magento 2 and front-end development with a basic knowledge of HTML and CSS, I am eager to customize the blank theme in Magento 2 to gain a deeper understanding of how things work. However, despite reading through the documentation, I am u ...

cssxmlmagento2

What CSS selector should I apply to create a circular profile image for Buddypress users?

In my current WordPress project, I am utilizing the BuddyPress, WooCommerce, and WC Vendors plugins for enhanced functionality. To personalize each vendor's product listings, I decided to display their BuddyPress profile picture alongside their produ ...

csswordpresswordpress-themingbuddypress

Div overlaid on top of another div

My goal is to recreate the YouTube thumbnail with a timestamp at the bottom right corner of the image, like this: However, I'm struggling to figure out how to overlay the timestamp on top of the image and position it correctly. Here's the JSFid ...

htmlcsstwitter-bootstrap

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

cssangulartypescriptchart.js

What is the best method to eliminate the .invisible div entirely from your website?

I want to hide a select tag and only display it when necessary. To achieve this, I tried using the .invisible class from Bootstrap, but the issue is that even when hidden, it still takes up space. <div class="row invisible"> <div class="fo ...

htmlcssbootstrap-4