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. */
}
Related
This question already has answers here:
Can I create a div with a Curved bottom?
(5 answers)
Closed 2 months ago.
I am creating my own website, where I want to give some effect to my header image. My code is given below. I have styled my header using background image and liner gradient.
#mixin header-style {
.header {
padding: 0 3rem;
height: 95vh;
background-image: $gradient-primary, url(../../images/play-img--2.jpeg);
background-size: cover;
background-position: top;
color: $general-color;
Here is my image and I have tried to use path in svg to give some effect to my image as its shown in the blue color but not succeed.
You can use border-bottom-left-radius and border-bottom-right-radius to set a border shape only in the bottom of the image. Just like this:
#mixin header-style{
border-bottom-left-radius:50%;
border-bottom-right-radius:50%;
}
see here the results: https://codesandbox.io/s/test-7tx631?file=/index.css;
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]+"')";
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.
background: url(images/pg96.png) no-repeat;
an image consists of small images which I want to copy separately when opened in browser but don't want to take them separately in html coding?. I am using html with Css and JavaScript.
Your question is very much vague but as I understood - You want to use multiple images but you don't want to specify each image in HTML code.
This can be solved by using multiple backgrounds.
#example1 {
width: 500px;
height: 250px;
background-image: url(sheep.png), url(betweengrassandsky.png);
background-position: center bottom, left top;
background-repeat: no-repeat;
}
See if it helps..
Or I'd suggest you to refine your question