I know I can repeat a single background image in the y direction. But I want to repeat a few of them. I also want to resize them all so they fill the entire screen each. i.e. to give the effect of them being on top of each other.
I know I can use something like fullpage but I'd rather code it myself.
All I have is:
body {
background: url("images/bg1.png");
background-size: cover
}
Here is an ugly example, however it shows a lot of different options:
body {
background-image : url(http://lorempixel.com/400/200/),
url(http://lorempixel.com/400/200/sports/),
url(http://lorempixel.com/400/200/sports/1/);
background-repeat : repeat-y,
repeat-x,
repeat-y;
background-position: bottom right,
top left,
bottom left;
}
https://jsfiddle.net/DIRTY_SMITH/c7Lof03h/2/
Just add the image urls one after the other with their respective properties separated with a comma like this:
background:
url(1.png) 600px 10px no-repeat,
url(2.png) 10px 10px no-repeat,
url(3.png),
url(4.png);
}
Related
I am trying to create a polka dot border around my content. For example:
I have managed to achieve this by repeating an image (of two individual dots).
.dots {
background: url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png'), url('/images/dots.png');
background-repeat: repeat-y, repeat-y, repeat-x, repeat-x;
background-position: right top, left top, right top, right bottom;
}
However it is an imperfect result. On certain sizes the dots will start to overlap.
I'm not sure how to avoid this problem as the image doesn't seamlessly tile.
Is there some other approach I could take for an effect which doesn't suffer from these faults?
You can easily do this with radial-gradient as a repeated background then adjust the values depending on the height/width of the container:
.dots {
width:300px;
height:200px;
padding:60px 70px;
box-sizing:border-box;
background:
linear-gradient(#fff,#fff) 68px 50px/calc(100% - 136px) calc(100% - 100px) no-repeat,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 12px 2px/33px 50px,
radial-gradient(circle at 12px 12px,#000 20%, transparent 22%) 33px 27px/33px 50px;
}
<div class="dots">
The content here
</div>
The problem is occurring because your background image is not as wide as the screen, and is trying to repeat itself.
To correct this, the easiest solution would be background-size: cover. This ensures that the image fills the entire screen, meaning it will never 'wrap around'. Note that this will stretch the image so that some distortion occurs depending on the aspect ratio.
If distortion is a concern, there are other two possible solutions:
Ensure that the image is as large as the largest screen resolution you want to display it on (optimally additionally scaling up the size of the displayed image based on viewport)
Craft the image so that it perfectly overlaps itself when it wraps around, and then make use of background-repeat.
Here's an example of background-size: cover:
.dots {
border: 5px solid black; /* For Snippet */
height: 50vh; /* For Snippet */
width: 50vw; /* For Snippet */
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/6/65/Polka_dots.svg/1200px-Polka_dots.svg.png');
background-size: cover;
}
<div class="dots"></div>
I want to give a container a background image, which is basically a white image, with a fancy border on its left and right side. It is only a few pixels high so gets repeated on the y-axis.
However, the image is a set width, so cannot expand/contract on the x-axis. Is there a way of maybe giving the container 3 background images - 1 for the left border, 1 for the right and 1 for the centre?
That way I can repeat the centre background image and sandwich it between the side background images.
I had two images and did it with that you can add another one http://jsfiddle.net/xksr01v4/
#back{
width: 500px;
height: 250px;
background-image: url(http://placekitten.com/300/301),
url(http://static.comicvine.com/uploads/original/11112/111123678/3503035-3468468-2718720139- batma.jpg);
background-position: left, right;
background-repeat: no-repeat;
}
#container{
background-image: url(image1.png), url(image2.png), url(image3.png);
background-position: left top, right top, center top;
}
There are probably many ways to do this, but this link shows a very simple way of having an expanding background image:
background-size: 100% auto;
I would like to make a text box that has 3 backgrounds, the top, bottom and a general background image that repeats according to how much text there is.
So far I have this: http://jsfiddle.net/6pTje/29/
The background that needs to be repeated doesn't repeat because of the code. But when I take out the no-repeat and put it directly after the images, it doesn't seem to work.
#exampleA {
width: 660px;
height: 400px;
padding: 25px;
background-image: url(http://i.imgur.com/vt6xUmh.gif) left top no-repeat, url(http://i.imgur.com/Qn8iy0u.gif) left bottom no-repeat, url(http://i.imgur.com/8P2nGUp.gif) left top repeat-y;
}
Can anyone take a look and see what I'm doing wrong? Or if what I'm trying to achieve is even possible? For the record I'd like it to scale so the more text there is the longer the box will get!
Thank you for any help!
is this what you are trying to do?
http://jsfiddle.net/6pTje/34/
background-repeat: no-repeat, no-repeat, repeat-y;
http://jsfiddle.net/6pTje/37/
background-position: left top, left bottom, 23px top;
I have a page with 2 background images, one of them needs to show at the very bottom of the page. Currently I've implemented it like this:
body {
background-image: url('/cheri/image/background.png'),
url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
This works fine when page content is higher than the browser window, but if it's smaller an empty white space is left below the background image, like in this picture:
http://img198.imageshack.us/img198/4560/screenshot20120916at851.png
I have tried to set the body as position:absolute, height:100%, but it did not render correctly when scrolling was present. I have also attempted to create a separate div for the background image and absolutely position it to the bottom, but since I have different position properties for some elements that occur at the bottom, the z-indexing didn't work properly.
Thanks for any help!
Use min-height: 100% on both html and body:
html, body { min-height: 100%; }
DEMO
It creates no issues when you have enough content to cause scrolling.
DEMO
Set the HTML element as well:
html {
background-image: url('/cheri/image/background.png'), url('/cheri/image/backgroundB.png');
background-position: top, bottom;
background-repeat: repeat-x, repeat-x;
}
I am working on this site: http://www.problemio.com and I have a requirement to add the background image to the top banner which I did.
What I can't figure out how to do is how to shift it all the way to the right and make it smaller in length so that it only takes up half of the screen width.
Any idea how to do that? So far I have this css for the overall banner div:
.banner
{
width:60em;
margin: 0 auto;
position: relative;
padding: 0.3em 0;
z-index: 1;
background-image: url('http://www.problemio.com/img/ui/problemiotoprightimage.png');
background-repeat: no-repeat;
background-image: right-align
}
but I don't know how to make the background image align right and rescale to be 50% of the entire width of the div. Any ideas?
Thanks!
You can use left, right, bottom, top and center for aligning backgrounds. Also percentages.
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') right no-repeat;
However, you cannot resize the images using CSS2 but in CSS3.
background-size: <width> <height>;
More usage:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') top right no-repeat;
To align bottom and centered:
background: url('http://www.problemio.com/img/ui/problemiotoprightimage.png') bottom center no-repeat;
Use background-position: right; and background-size: [width] [height] (replace values where needed).