I am trying to adjust the vertical position of a background image in a container that is centered:
<div class="foo"></div>
.foo {
background: white url(../image.jpg) no-repeat scroll center center / cover;
}
Is it possible to move the background image vertically by a fixed value (such as 10px) from its original position using CSS or JavaScript? I would like to achieve something like this:
background-position: center (center - 10px);
Give this calc a shot.
.bar {
background-position: 50% calc(50% - 10px);
}
One technique to consider is using the calc CSS function in combination with a 50% value, which will effectively center an element:
background-position: center calc(50% - 10px);
It's important to note that there may be compatibility issues with IE9, as indicated by caniuse.com:
Partial support in IE9 refers to the browser crashing when used as a background-position value.
Alternatively, you can try using the background-origin property along with adjusting the padding either at the top or bottom of the box, depending on the desired direction for image movement:
background-origin: content-box;
padding-bottom: 10px;
background-position: center center;
This method may not look as visually appealing but it should mitigate any potential crashing problems with IE9.
It seems like this solution is effective, but could you provide further detail on your goals?
background-position: center -10px;
By implementing this code, the background image will shift 10px closer to the top vertically.
I am facing an issue where I need to display an image fetched from an API on app start, but when I try to render it in React, the application crashes with the error message: TypeError: Cannot read property 'icon' of undefined. Although the icon ...
It turns out the xml2js npm package I was using doesn't support converting JSON to XML, which is exactly what I need for my API that communicates with an application only accepting XML format. In my service file shipment.service.ts import { Injecta ...
I have been working on referencing in Node.js using the populate method, but I am unsure about how exactly it works. In my code, I am creating a reference to the user collection from my child collection. I have two collections - one for children and anothe ...
One of the challenges I faced was passing two lists from a Django view to an HTML template. Here is how I achieved it: views.py sale_day = dash[0] sale_amt = dash[1] context_dict = {'sale_day': sale_day, 'sale_amt': sale_amt} return r ...
Our designers love fancy drop shadows, but I prefer to avoid using image sprites. I am determined to create this effect using only CSS3. However, it's proving to be a challenge to replicate it perfectly with CSS3 alone: This is my attempt so far, but ...
Using jQuery, I have created a Tr element like this: var elemTr = $("<tr>", { }); var elemEmpName = $("<div>", { }).data('otherDtls', { recordId: 10 });; Next, I appended elemEmpName to elemTr like so: elemTr.append(jQue ...
Check out this simplified version of my code on CodePen: http://codepen.io/anon/pen/pjZXob I am attempting to create a smooth transition in the height of the .destinationsTopicContent div, from 0 to auto. However, it is nested within a div that has visibi ...
I have been utilizing the angular.ui DatePicker feature. http://angular-ui.github.io/bootstrap/#/datepicker According to the documentation: "Everything is formatted using the date filter and thus is also localized." I am struggling to understand how to ...
I am having trouble with my site's responsiveness in different screen resolutions. I have attempted using CSS code to make the site fit the entire screen, but also allow for scrolling if the screen is too small. I tried wrapping the content in a div a ...
I'm working on creating a new HTML template that features a header that remains fixed at the top of the screen, a footer that stays at the bottom, and the remaining space for text with a scrollbar when needed. The code below functions correctly in Fi ...
Is there a more efficient way to select all rows with data attributes id 1,2.. without specifying each row individually? I need some guidance on the best approach for this. Can anyone help me out? <table id="eTable"> <tr data-empid="A123" data- ...
My journey into web development started just 2 weeks ago, and I'm currently working on building my own website. One of the challenges I've encountered is getting the hover effect to work on a header button, but so far, I haven't been able to ...
I am a beginner in Three.js and I am looking to create a 3D scene with multiple objects floating in the sky and a scale displayed on the screen. The scale should be movable up and down to bring the objects closer or further away, creating the illusion of ...
Currently, I am exploring the integration of Meteor with my Angular project structure and templates. In this quest, I came across a library called Asteroid which is described as "A javascript client (browser and node) for a Meteor backend, Asteroid gives t ...
Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...
Encountered an error when running jest test cases in Angular. All of the test suites are failing due to this issue. The error message typeError: (options.astTransformers || []).map is not a function is displayed during the execution of the test suite in A ...
I'm sure this question may seem simple to some, but as a JavaScript novice, I couldn't find the answer myself. Here is the code snippet I'm working with: Let map = new Map<String,String> map.set('0', select) map.set('1&a ...
I want to create rows of collapsible buttons in my code, but every time I visit the page, all the buttons are already expanded. Additionally, when I click on any button, they all expand or collapse simultaneously. HTML <div id="accordion" *ngFor="let ...
Currently, I have implemented the selectTo dropdown feature in angular material design. Here is the code snippet that I am using: <mat-form-field id="inputClick" appearance="outline" (click)="Valid()"> <mat-label>{{'GENERAL.TITLE' | ...
Can you provide an example of how to integrate a Viewing.Extension.Markup3D extension into a .NET Core project using vanilla JavaScript? I came across an example on this GitHub repository, but it was implemented in react.js. Could you explain how to regi ...