CSS Background Positioning

Attached is a screenshot for reference: https://i.sstatic.net/XjaO8.jpg

The background seems a bit off in both Internet Explorer and Chrome (although it was working fine before? hence the exact numbers??), while it looks okay in Firefox.

Below is the code that I believed to be very simple... am I overlooking something?

#wrapper{
    width:100%;
    overflow:hidden;
    position:relative;
    background:url(../images/body-bg.jpg) no-repeat ;
    background-position: -20px top;
}

And here's a fix for Internet Explorer:

    
    #wrapper{ background-position: -21px top; }
    
     

I just want it centered actually, so I'll change it to "center top".

Answer №1

In CSS 2.0, the usage of both numeric values (-21px) and keywords (top) in combination was considered prohibited due to reliability issues. A recommended alternative is -21px 0px.

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

determine the quantity of grid items in place without shifting the element

Is there a way to use CSS grid on a specific container without including one direct descendant as a grid-item? I want to achieve this without changing the structure of my HTML. The h2 element should not be included as a grid-item. <article id= ...

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

Select a particular column (utilizing CSS multi-column functionality)

I want to style the second column in a text block with two columns using CSS or JavaScript. How can I achieve this without creating separate containers for each column? I'm aware that I could create two containers and target the second one for styling ...

Zooming Fluidity

These are my specifications: Font size should adjust fluidly from 14px to 22px between 1280 and 1920 Users must be able to zoom normally Finding a solution that accomplishes both has been challenging. I've explored CSS Tricks simplified fluid approa ...

Testing styling with Jest - a comprehensive guide

Currently, I am working on a React project that utilizes SASS (SCSS syntax) for styling and Jest for unit testing. I've run into some difficulties when it comes to testing the styling in my project. To illustrate this issue, let's consider the fo ...

Take a break in between keyframe animations

I have a basic animation set up with keyframes. @-webkit-keyframes rotation { 0% { -webkit-transform: rotate(10deg); } 25% { -webkit-transform: rotate(5deg); } 50% { -webkit-transform: rotate(10deg); } 75% { -webkit-transform: ...

Default modal overlay closure malfunctioning; encountering errors when manually managed through jQuery

A custom overlay has been designed and implemented. <div class="overlay modal" id="11"> <div class="background-overlay"></div> <div class="description"> <div class="hidden-xs"> <img src=' ...

How can we allocate array elements dynamically within div elements to ensure that each row contains no more than N items using only HTML and JavaScript?

For instance, if N is 3 in each row, as more elements are added to the array, the number of rows will increase but each row will still have a maximum of 3 elements. I am currently using map to generate corresponding divs for every element in the arr ...

Tips on personalizing Materialize modal components

I am struggling to get the modal to appear on the right side of the screen with a specific width and height. However, it seems to be displaying differently on different screen sizes. For instance, on small screens, only half of the modal is visible while ...

Positioning a div on the right side of its parent div

Hi there! I'm currently working on a small navbar that has two sections: the left section with an arrow icon and the right section with two icons - an envelope and an exclamation triangle. I've been trying to position the right section in the top ...

Guide on Implementing Right-to-Left (RTL) Support in Material UI React

Currently, I am in the process of developing an application designed for LTR usage, but I am interested in adding RTL support as well. The application itself is built on top of Material UI React. By using CSS Flex Box, I have managed to rotate the applicat ...

The 'refresh' function in jQM listview is causing issues with inset lists

For some reason, I am struggling to understand why this issue is occurring: In jQuery Mobile, I have an unordered list with data-inset="true". Initially, it displays perfectly with rounded top and bottom edges. However, on dynamically adding new elements t ...

I designed my radio buttons to ensure they cannot be selected multiple times

I have developed a basic React custom controlled radio button: export const Radio: FC<RadioProps> = ({ label, checked, onChange, disabled, }) => { const id = useId(); return ( <div> <label htmlFor={id} ...

Using Rails' `link_to` method within templates

Whenever I insert a link_to into an existing bootstrap template, the link appears below the navigation icon. I'm uncertain whether this issue is related to CSS or if there's an error in my code. <li><a href="#"><i class="icon-off ...

The Gulp task is not being recognized when I open the project in Visual Studio Code

Whenever I open gulp, I encounter an error related to minifying css and js files using gulp tasks. Despite my efforts to find a solution, the problem remains unresolved. Error Message: assert.js:374 throw err; ^ AssertionError [ERR_ASSERTION]: Task fu ...

Is there a way to incorporate the Bootstrap 4.0.0 Collapse feature into an HTML table?

Hi there! I have a question about adding collapsible elements to an HTML table. Below is my code: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5b7babaa1a6a1a7b4 ...

Is there a way to utilize JavaScript in order to trigger a CSS animation to occur at a designated time during a video

I have a cool animated image element that I want to play at a specific point in time during a video using JavaScript. I'm not sure how to make it happen, but I know the .currentTime property could be the key. My goal is for the animation to only play ...

Challenges with JQuery content sliders

I need some guidance in web development as I am new to it. My goal is to create a basic slider using JQuery, but I encountered an issue with slide3. It remains visible while moving across the screen when transitioning to left:0. I'm unsure of what wen ...

"Stay entertained with a captivating animated gif that appears when you refresh the

I just implemented this code snippet to enable animated gifs to work after refreshing a webpage. It's functioning properly in Chrome, Safari, and Internet Explorer except for Firefox. Can someone please offer assistance? jQuery: $(img).css("backgrou ...

How about this: "Is the text in the columns of the <table> body aligned to the

In my HTML5 table, I have 3 header columns with a colspan of 2 each, making it a total of 6 columns wide. Below each header are 2 body columns corresponding to that header. While the individual columns are aligned left, I am now looking to center align the ...