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]+"')";
Related
Right away, I have to apologize for not knowing how to correctly phrase my question. Hopefully my point comes across in this description.
I have a full page landing graphic on a website that I'm working with.
What I want to learn to do is to make a part of the graphic change when you mouse over it.
HTML
<header id="full-landing">
CSS
#full-landing{
background: url('../images/Asset 64.svg');
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: flex;
flex-direction: column;
}
Thank you.
IMAGE-I would like to change each hexagon on mouse-over.
So I thought that maybe SVG animation could work for this. But I am not sure. I would like to add a mouse-over to each colored hexagon.
Just add a :hover pseudo selector:
#full-landing:hover {
background-image: url('../images/different-image.svg');
}
What I want to learn to do is to make a part of the graphic change
when you mouse over it.
Though this is more of a graphic related solution vs. code you could copy the original image, slightly alter it to your liking, and use that in your :hover pseudo selector. If not, positioning/overlaying the two could be more trouble than it's worth. Of course this is all without seeing your image(s). I could be wrong.
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/
I’ve been playing around with html, css and JS lately. Right now I have a div that has a background gif. This is what I did:
<div class = "mydiv" style = "background-image: url(play.gif);"></div>
So first, it fills the entire space by repeating the image over and over side by side. I was wondering if there was a way to only have the image show up once and at the center of the div.
Another question I have is if it is possible to “pause” the gif at the beginning and only play it when the user hovers over the div and when they hover-off the gif goes back and stays at the beginning. If this is not possible for gifs, is it possible for videos (.mp4 .webm etc.)
To the first part of your question, yes you can have it show up once in the center. Here is an example.
.mydiv{width:100%;
height:100vh;
background-image:url(http://bestanimations.com/Animals/Birds/Penguins/animated-penguin-gif-5.gif);
background-repeat:no-repeat;
background-position: center center;}
<div class="mydiv">
</div>
You could use something like this:
.mydiv {
background-image: url(static.gif);
background-repeat: no-repeat;
background-position: center;
}
.mydiv:hover {
background-image: url(play.gif);
}
where static.gif would be just the first frame from your gif.
I'm new to Webdev in general and things were going pretty smooth in self study until I hit a slight snag on this one problem I've been having.
For one page on my website, I'm using frames (not iframes, just frames... I realize they're awful I'm just trying to use them for a specific purpose here) and I want an image to scale up completely to fill one frame's height, not just stopping when it fills width. That's already a problem I've seen a few people have, and there is a simple solution I kind of retrofitted onto my code from the people at css-tricks (I expanded the shortform to make it easier for me to understand):
body {
background-image: url('/aboutme/fractal.gif');
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
And that seems to do the trick just fine! But my problem comes from something more specific: I want the image to show up later on, and have there be no background image to start- just a background colour. I also use code to change the background colour every so often before changing to the image. The problem is that I can't figure out for the life of me how to either change the style to work with background colours or to change the background image set setting to work with the html styling. Everything I've tried has resulted in either a blank screen or incorrect input/timing.
My "set image" code, which is what I used before trying out this new code, and it worked only it set just the width to fill:
function toEuphoria() {
document.body.style.backgroundImage = url('/aboutme/fractal.gif');
}
In short: I am trying to set an image to fill up both width and height, but have it only appear later- and have coloured backgrounds appear beforehand. Sorry if I'm not totally clear, it's really late. Any help at all would be appreciated!
You can apply a background 'color' and 'image' to any element simultaneously, just take that in to account in your javascript;
body{
background: #2c2d2e url('/aboutme/fractal.gif');
background-size: cover;
}
function toEuphoria() {
document.body.style.background = "transparent url('/aboutme/fractal.gif')";
document.body.style.backgroundSize = 'cover';
}
Your background-size will be preserved when you swap from a background-color to a background-image and vis-versa.
EDIT
A js fiddle with randomly changing background (color, image, color) that demonstrates the above. https://jsfiddle.net/u5x87q6y/1/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am wondering if the following is possible to implement or not:
Say, I have an image of size 20x20 px and in my website I have a div of 750x500 px and I want to make the image as background of the whole div. I tried to do it by repeating the image but repeating doesn't work good. Background seems distorted in this case. Is there any other way to do this? I searched on internet but nothing came up.
![please check the image][1]
Is this what you're asking? http://jsbin.com/xuxeci/1/edit
<body>
<div></div>
</body>
div {
width: 750px;
height: 500px;
background-image: url(http://placekitten.com/20/20);
}
By default, the above background image repeats in both the x and y dimensions. This can be limited by applying background-repeat-x: no-repeat, or background-repeat-y: no-repeat, or background-repeat: no-repeat(that last one applying to bothxandy`).
Doc for background-repeat: http://devdocs.io/css/background-repeat
If you're not wanting to repeat (tile) the image, but instead to stretch it to fill the div, you probably want to choose a larger image (larger than 20 by 20 pixels, to avoid pixelation), and do this: http://jsbin.com/xuxeci/2/edit
div {
width: 750px;
height: 500px;
background-image: url(http://placekitten.com/2000/2000);
background-size: cover;
background-position: center;
}
Doc for background-size: http://devdocs.io/css/background-size
Doc for background-position: http://devdocs.io/css/background-position
You've added a screenshot, and you asked why you're seeing a grid pattern. That's because you're tiling an asymmetrical image (the edges don't match). If you want the background "smooth" (as you described), why not just use a background color? You could name a color (like gray) or use a hex-code: http://jsbin.com/picep/1/edit
<body>
<div></div>
div {
width: 750px;
height: 500px;
background-color: #5e5e5e; /* One of many hex-code combinations for a medium grey. */
}