Snippet of code: https://jsfiddle.net/foy4m43j/
HTML:
<div id="background"></div>
CSS:
#background {
background-image: url("http://i.imgur.com/hH9IWA0.png");
background-position: 0 0;
background-repeat: repeat;
height: 100%;
width: 100%;
position: fixed;
}
From here, I'd like to produce this sort of effect using it's background-position to include a fade and the new colour (black lines to show the direction we're moving):
Example images (please excuse the bad exports):
Is this possible through jQuery or CSS? I'm scratching my head on how I can do this with background-position and multiple images.
This is my awful attempt so far. I don't understand why the gradient is going the other direction and I'm not sure how to make the yellow repeat itself to the right X axis only:
https://jsfiddle.net/foy4m43j/1/
I hope I'm clear enough. I can't find any other questions similar apart from one that had no response.
You can use CSS gradient. By far the best solution, and it is easy to make:
www.colorzilla.com
Related
I used jquery-ui plugin to realize vertical slider function. I want to realize gradient effect, so I use background images, include bg/range and slide handle. The question is when I slide dot handle to bottom, bg image is compressed. Here is my example code.
jsFiddle
#head_slider .ui-slider-range {
background: url(https://image.ibb.co/hTvN6a/head_slider_h.png) 0px center no-repeat;
}
#head_slider_bg {
position: absolute;
width: 72px;
height: 704px;
right: 100px;
background: url(https://image.ibb.co/mUfpma/head_slider_n.png) center center no-repeat;
}
and the same way to horizontal slider is fine! That's confusing me. Thanks for your reading and help.
The problem is not that the background image is compressed, but the CSS rule border-radius applied to the verticle bar becomes different. When slider slides to the bottom, the height of the verticle bar is less then 60px (the value you set to border-radius), thus the actual border radius will be decreased.
A simple fix to this problem is add a min-height constraint to that element, which you can refer to the updated fiddle (add min-height: 60px at Line 79 of CSS).
For more detail about the behavior of browser handle border-radius, refer to Cornor Overlap section of specification.
I want to create an effect that when a user hovers over text it creates a market felt effect it - exactly like done here: http://courtneycarman.com/
I want it to animate in the same way.
Any pieces of code to how to do this would be greatful.
Thanks
Next time right click, inspect element.
It's right there. But, if you don't know what you are looking for it might be hard to figure out.
The effect is accomplished by a :hover style that will only activate when the element is hovered. In this case it has a gradient background that is normally 'hidden'by a 0 size.
When it's hovered it's set to 100% size.
Then there is a 'transition' defined, that will take care of the animating effect.
.semibold:hover {
background-size: 100% 100%;
}
.semibold {
background-image: linear-gradient(180deg,transparent 55%,#ffde17 0);
background-size: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.4s ease;
<p>here is some text and stuff<strong class="semibold">and this is semibold</strong></p>
The issue I’m having here is with the x-ray image behind the one in the front. They do not line up. It only does when i stretch the browser out to 1920px. Anything smaller than that causes it to misalign. Note that I purposely set the image to be at 100% width which I know is not responsive.
I want to keep the effect of the image getting cut off on the right and left of the browser. Ideally I'd like both images to be centered and aligned when I decrease the size of the browser.
Here is the Github link:
https://gist.github.com/siravani/71b8d447acaca8b34acfcab82af58c06
If you added a fiddle that would have been a lot easier but all you need to do is add background-size:cover to #flesh css rule
html, body, #flesh {
position: relative;
margin: 0;
height: auto;
max-width: 100%;
background: url("http://www2.yapstone.com/l/109192/2017-04-04/4c61s2/109192/37539/buildings.jpg") no-repeat;
background-position: center;
background-size:cover;
}
this way your background image will fit in container and will match with the original image.
Here is a working fiddle https://jsfiddle.net/w2jjaLn5/
How can I make it so that a 100 by 100 image repeats itself all throughout the webpage. I want the image to duplicate itself and fill the screen.
for example lets say I had this picture:
and I wanted it to look like this:
The spacing doesn't matter, but how would I do this?
You would use a repeating background image in CSS. Then you can control the size of the image with background-size.
body {
background: url('https://i.stack.imgur.com/LtCRM.png') center center repeat;
background-size: 2em;
}
CodePen: http://codepen.io/oculusriff/pen/VmZdzg
Edit: As per nicovank's comment - if you are new to CSS, here is the separated version of the above code.
body {
background-image: url('https://i.stack.imgur.com/LtCRM.png');
background-position: center center;
background-repeat: repeat;
background-size: 4em;
}
This is the closest I got to what I wanted. Sorry for not wording the question right.
https://codepen.io/anon/pen/ZBzRaX
I don't know what is making it repeat, but I think it's this. Now I just have to figure out how to make the button fit the whole screen. The button is only a sliver at the top right now.
document.body.style.background = "url('"+links[i]+"')";
Ok, to start off, I'm sure out in the internet there is a good tutorial about this, but I can't even manage to "write down" a possible title for the problem, and I apologise for that.
I like a responsive and simple makeup:
<div class="gallery-container">
<img src="/your/image/url.jpg">
<img src="/your/image/url2.jpg">
<img src="/your/image/url3.jpg">
......
</div>
My problem is: I have different aspect ratio images to show off all with the 3:2 aspect ratio.
An easy solution would be to insert the images as a background to the a element with CSS, set it to be centred contained and then, with a simple JS script define a height to be 75% of the a width.
I used this solution before, but this time is not working for me: I need to dynamically insert the images with PHP.
How can I get a similar effect to the above explained CSS technique but with the images declared in the HTML?
UPDATE: something like this: http://jsfiddle.net/fF6GL/ - but I need the above makeup, this one would not work in that case
P.S. if possible, I would like a solution without using a JS library.
If you can put those linked images into a list, this might work:
http://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/
Ok I got a solution that is working for me, a demo is available here: http://jsfiddle.net/fF6GL/3/
Essentially, I'm just adding the background image on the CSS directly on the HTML:
<div>
</div>
And this is the CSS:
div {
width: 90%;
margin: 0 auto;
}
div a {
display: block;
float: left;
width: 50%;
position: relative;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
For the height, I'm using a small clever trick here:
div a:before {
content: "";
padding-top: 75%;
display: block;
}
This won't work on IE, but sincerely, I don't care.