388 questions
- Bountied 0
- Unanswered
- Frequent
- Score
- Trending
- Week
- Month
- Unanswered (my tags)
1
vote
2
answers
53
views
Looped background animation without setting px position
I have been using a preprocessor to generate looped background animation like this:
@keyframes anim
{
from { background-position: 0 0; }
to { background-position: ...
0
votes
1
answer
47
views
Setting linear-gradient offset as percentage without background-size
This looks simple and must be asked before, but I cannot find the question.
I have the following animation:
@keyframes bar-animation
{
to
{
background-position-y: 20px;
}
}
....
1
vote
0
answers
96
views
How to make background-position and background-size responsive by using percentages in css?
I want to avoid hardcoding values for background-position and background-size with pixels and I'm trying to set both using percentages. However, if I make it work on one viewport size, say desktop, ...
1
vote
1
answer
64
views
Google Chrome multiple background images position
I would like to display multiple background images on the same element.
My Implementation looks like this: (using bootstrap)
<a class="left-icon icon-share list-group-item list-group-item-...
0
votes
1
answer
41
views
Chrome mobile browser background-position image bug?
I've set up several divs using a class of .polaroid to display in "photo" style border that uses a single sprite background image (made up of a grid of many 100x100px images).
.polaroid {
...
2
votes
1
answer
75
views
background-position animation isn't running smooth in Firefox compared to Chrome and Edge
I'm trying to create a smooth animation using background-position to simulate the background image moving slowly. While the animation works as expected in Chrome and Edge, in Firefox, the animation ...
0
votes
1
answer
74
views
Why background-position with a percentage value does not move the background?
I have an element with a background-image set to a gradient and background-position: 80%; but the background-position does not move the gradient at all.
<div>Hello</div>
div {
...
0
votes
1
answer
83
views
Background-image not taking full width on resizing
I'm building my first website (it's a portfolio), I created 3 different background image for each section that alternate (home, about, skills, etc.). I'm using SASS (SCSS syntax) and I noticed that ...
0
votes
1
answer
40
views
Background position tied to scroll only running once
I'm trying to tie a background position animation to the mouse scroll, yet it only executes once when scrolling up or down, when what I'd like is for the background position to continue changing as ...
-1
votes
1
answer
78
views
Offset Background Image
How do I offset background image in such a way that the background only reveals the bottom half of the image from the top of the parent container while the other top half of the image is hidden as if ...
2
votes
1
answer
171
views
Safari 16.3 (Ventura): background-position is incorrect when browser is zoomed
Here's the demo: https://jsfiddle.net/kasheftin/s9o127r3/6/
.container {
position: relative;
width: 500px;
height: 180px;
border: 1px solid #000;
}
.bg1, .bg2, .bg3, .bg4 {
position: ...
-1
votes
2
answers
213
views
The location of an background image appears not centered when publishing my Website
I have indicated a background image and centered it in its container with:
background-size:cover;
background-position-x:50%;
background-position-y:center;
I use the "Responsive Design Mode" ...
0
votes
1
answer
46
views
Using jQuery to add extra/subtract to background position value based on mouse movement
I am by no means competent in jQuery, I am good at Googling, but that has only got me so far :(
I have a background image on a full width div. Said background image is positioned using
.no-bg {
...
2
votes
2
answers
122
views
CSS background position starting from given pixels on top?
#page {
background-image: linear-gradient(rgba(74, 131, 167, .20) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 131, 167, .20) 1px, transparent 1px);
background-size: 10px 10px, ...
1
vote
1
answer
1k
views
How to get a seamless parallax effect using svg as a background and not reset the animation?
Setup
The setup has three layers(svgs as background on divs), all broader than the parent div, that clips off anything outside of the specified height and width.
* {
margin:0; padding: 0;
...