Positioning of vertical linear gradients in CSS

Check out this live demonstration:

http://jsfiddle.net/nnrgu/1/

I then adjusted the background position to 0px -70px and observed the changes here:

http://jsfiddle.net/nnrgu/2/

The linear gradient seems to disappear!

Am I doing something wrong, or is this how it's supposed to work? How can I move the linear-gradient with the background-image simultaneously, or keep the linear-gradient fixed?

Thank you.

Answer №1

background-position: 10px -70px, 20px 50px;

This simple code snippet does the job perfectly. By separating multiple background images with commas, you can specify individual positions for each image in a concise manner.

For a live example, check out http://jsfiddle.net/kmepx/8/

I personally find the shorthand version more convenient:

background: <color> img1 pos1 repeat1 attach1, img2 pos2 repeat2 attach2, ... ;

Using this format makes it easier to associate specific positions or repeats with each image using fewer characters.

Pro tip: If a value is set to 0, there's no need to include the unit.

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

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

Shuffle letters in a word when hovered over, then unscramble them back to their original order

I have noticed a fascinating effect on several websites. To give you an idea, here are two websites that showcase this effect: Locomotive and TUX. Locomotive is particularly interesting to look at as the desired effect can be seen immediately when hovering ...

Utilizing CSS to Target IDs Using Classes

Recently, I came across a captivating video on YouTube demonstrating how to create a transitional gallery (http://www.youtube.com/watch?v=4sVTWY608go). Inspired by the tutorial, I attempted to implement a similar slider... However, I now have a new idea. ...

Removing the blue border around a button upon being clicked

Whenever I press my button, an unexpected event occurs. Is there a solution to avoid this issue? Thank you for your help! :) ...

Struggling to eliminate the padding beneath the menu items in Bootstrap?

I'm having trouble adjusting the padding inside my menu. I want to make it less chunky and large, but so far I've only been successful in removing the top padding. The bottom padding just won't budge. Here's the code that helped fix th ...

Changing the cursor to a waiting state following a mouse click

Looking for some help here - when I click a button, the cursor remains standard and doesn't show loading. Any suggestions on how to fix this? Below is the snippet of my code: <div class="signup"> <input type="submit" value="Sign Up" tit ...

How can I fix the issue of the header background image not resizing properly? Any suggestions?

I am currently working on improving the responsiveness of my website when a user resizes their browser window. One specific issue I'm facing is resizing the banner image as the window size changes. The website in question can be found at The CSS code ...

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

The CSS3 rotation transform will rotate by an angle of n degrees

I'm currently working on a cube-like element made up of 4 divs that I am rotating using CSS3 transforms (limited to -webkit for a Chrome extension). But there's an issue, if you visit http://jsfiddle.net/CxYTg/ and click through "one", "two", "t ...

Utilize CSS to break through a backdrop

I have come across a rather peculiar question, and I'd like to elaborate with a code snippet: .container { width: 200px; height: 200px; background: rgba(200, 200, 200, .87); } .pin { position: absolute; left: 50px; top: 20px; } .overl ...

Javascript code creates a blur effect on webpage bodies

On my webpage, I have multiple elements, including a "change BG" button. When this button is clicked, I want to hide all other content on the page except for the button using JavaScript. Alternatively, clicking the button could blur out all other elements ...

The webpage must be designed to be compatible with screen resolutions starting from 800 x 600 pixels and higher, utilizing Angular

I am working on developing a webpage that is specifically designed to work for resolutions of 800 x 600 pixels and higher. Any other resolutions will display the message "This website can only be accessed from desktops." Here is my approach using jQuery: ...

Fixing the body tag's margin-top property in Yii2

The issue I encountered with my Index was related to the positioning of the contents within the body tag. I was able to resolve it by adding the following code to my site.css: margin-top: 340px; Now, my index is displaying correctly! However, after apply ...

Scroll horizontally through the number field in Chrome

I have configured a number input field with the text aligned to the right. Scenario: While testing, I discovered that selecting the entire text or using the middle mouse button to scroll within the input field allows for a slight leftward scrolling of ab ...

The vertical dimension of an element does not increase

Currently, I am working on a webpage with a header, page content, and footer sections. The issue I'm facing is that I set the page's height to height :auto;, but it's not functioning as expected. I actually need the page to automatically ex ...

Aligning floating elements in the center

Presently, I am working with the following code... <!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="UTF-8" /> <link href="verna.css" type="text/css" rel="stylesheet" /> </head> ...

Initial space in model variable not being displayed

Hey there, I am working with a model variable called "name" that is linked to a span element like this: <input type="text" ng-model="name"> <span ng-bind="name"></span> My goal is to display the text entered in the input field without r ...

What is the best way to ensure that the input search bar, microphone icon, and two small boxes adapt to different screen

Upon submitting my exercise for The Odin Project, I was under the impression that everything looked perfectly aligned and centered on my MacBook Pro 15-inch screen. However, when I viewed the completed webpage on a larger computer screen at work, I noticed ...

I am having issues with Tailwind CSS overriding the responsive padding on my website

I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...

Move your cursor over an image to reveal another image on top without impacting the image underneath by using background-image

Is there a way to create an effect where hovering over a specific book image will display a checkmark, indicating selection upon click? Ideally, users should be able to press alt (cmd on mac) to select multiple books simultaneously. Check out the HTML bel ...