Related
I want to place a background image in each corner of the web browser (left upper, left lower, right upper and right lower). I placed this code in the css external style sheet:
body{
/* Four background images */
background-image:
url(Bookclubwebsite/cornertl.jpg,
url(Bookclubwebsite/cornertr.jpg,
url(Bookclubwebsite/cornerbl.jpg,
url(Bookclubwebsite/cornerbr.jpg;
/*Their positions*/
background-position:
top left,
top right,
bottom left,
bottom right;
/* These apply to all images above */
background-repeat:no-repeat;
background-attachment:fixed;
}
Instead I get all 4 images next to each other at the bottom of the web page. The images don't overlap but are next to each other with space between each image from the other image.
In order to apply, your CSS needs to be valid.
So you need to close the parenthesis of each url() in your background-image rule:
body{
background-image: url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50),
url(http://via.placeholder.com/100x50);
background-position:
top left,
top right,
bottom left,
bottom right;
background-repeat:no-repeat;
background-attachment:fixed;
}
Here's the exact snippet you need to copy/paste in your CSS on your website for background to work:
body {
background-image: url(Bookclubwebsite/cornertl.jpg), url(Bookclubwebsite/cornertr.jpg), url(Bookclubwebsite/cornerbl.jpg), url(Bookclubwebsite/cornerbr.jpg);
background-position: top left, top right, bottom left, bottom right;
background-repeat:no-repeat;
background-attachment:fixed;
}
Here is my CSS that is working fine for 4 background images for each corner of the web page. You can modify your CSS accordingly.
body {
background-image: url('w3css.gif'), url('w3css.gif'), url('w3css.gif'), url('w3css.gif');
background-repeat: no-repeat;
background-position: left top, right top, left bottom, right bottom;
}
I am trying to achieve a CSS animation which scrolls a repeating background image infinitely. To make the scrolling as smooth as possible, I want the animation to cycle at a point when the image is in the exact same position it was when it started. And in order to make the animation look good regardless of any particular user's viewport size, I will be using an SVG graphic and I would like the background-size property to be set to 100% or the cover keyword.
My specified parameters do not work as expected. However, any other background-size value I choose does.
Why does my scrolling animation not work when background-size is 100%?
For a working example, see this code pen or use the following code:
HTML
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
CSS
#keyframes scroll {
0% { background-position: 0% center; }
100% { background-position: 100% center; }
}
#element{
padding: 10px;
color: white;
background: black;
text-shadow: 0 0 4px black;
animation: scroll 8s linear infinite;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
background-repeat: repeat;
/* Works:
========================= */
background-size: 50%;
/*background-size: 20%;*/
/*background-size: 200%;*/
/*background-size: 100px;*/
/*background-size: 10rem;*/
/* Does NOT work:
========================= */
/*background-size: 100%;*/
}
Although I could use another solution like this one by CSS-Tricks, I like mine better because it is more efficient, since I do not have use a large, redundant graphic.
As per the w3c spec:
'background-position'
percentage
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box. For example, with a value pair of '0% 0%',the upper left corner of the image is aligned with the upper left corner of the padding box. A value pair of '100% 100%' places the lower right corner of the image in the lower right corner of the padding box. With a value pair of '14% 84%', the point 14% across and 84% down the image is to be placed at the point 14% across and 84% down the padding box.
This means that the percentage that you set in the background-position specifies which point of the image should match with the same point in the element.
BUT when the size of the container and the image are equals, all the points of the image match the point of the container, any percentage in the background-position has the same result (that is, the image fitting the container, centered). So, then the background won't move !
If you watch the animation, the image scrolls based upon the right edge of the image(svg), from the starting point (background-size) to 100%, or until the right edge of the image reaches the right edge of the container. Then the animation repeats.
If the starting point of the animation is 100% (or cover) you are placing the right edge of the image at the right edge of the container. So, the animation is visibly non-existent. Basically, the image is repeating in the same position.
This is a bit difficult to see based upon the image you are using. But if you use an image with a clear right and left edge, you can see it easier:
http://codepen.io/anon/pen/wMpYjN?editors=110
Watch the right edge of the image.
It appears it won't work using percent (as vals so nicely answered), and I can't yet say why.
If to change to pixel it does work though, as you can see in this sample, so in combination with media query one might be able to "fill" the width anyway.
#keyframes scroll {
0% { background-position: 0px center; }
100% { background-position: 600px center; }
}
#element{
width: 600px;
padding: 10px;
color: white;
text-shadow: 0 0 4px black;
animation: scroll 8s linear infinite;
background: black url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg") left center repeat;
background-size: 600px;
}
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
As a workaround, which will do exactly what a percentage would do with the original set up, you could use pseudo element.
Set the pseudo to 200% width, the background size to 50% and background repeat to repeat, and it will make the visible part equal to 100% of your original image, and then animate its left value.
(and IMHO, it will be better than the one by CSS-Tricks, efficient and without the need of large, redundant graphics)
#keyframes scroll {
0% { left: -100%; }
100% { left: 0%; }
}
#element{
position: relative;
padding: 10px;
color: white;
background: black;
text-shadow: 0 0 4px black;
overflow: hidden;
}
#element:before {
content: " ";
position: absolute;
top: 0;
height: 100%;
width: 200%;
animation: scroll 8s linear infinite;
background-image: url("https://upload.wikimedia.org/wikipedia/commons/3/30/Vector-based_example.svg");
background-position: left center;
background-repeat: repeat;
background-size: 50%;
z-index: 1;
}
h1 {
position: relative;
z-index: 2;
}
<div id="element">
<h1>Scroll endlessly I say!</h1>
</div>
Your animation won't work when background size is 100% because of background-repeat: repeat; property which cause your image to repeat it self, as your image size is 100% image actually repeats it self, we are just unable to see it. You may check it if you set your background size to 98%.
Because you are attempting to reposition the background image based on a distance between 2 points that are in the same place.
From the specification:
A percentage X aligns the point X% across (for horizontal) or down (for vertical) the image with the point X% across (for horizontal) or down (for vertical) the element's padding box.
This means that to decide where to position a background image:
A point the percent you defined across or down the element is picked.
A point the percent you defined across or down the image is picked.
The image is moved, relative to the point picked on it, to the point picked on the element.
Let's take for example an arbitrary situation where you want to position a background image inside of an element. There are two broad situations which exist:
the image and the element are the same size, or
the image and the element are a different size.
In the former situation, it does not matter what percentage you chose. The distance between a point that percent from the edge of the image will be exactly the same as the distance between a point that percent from the edge of the element because they are both the same size (X% of Y is X% of Y). That means that no noticeable repositioning can be done because moving an image to where it already is is just like not moving it at all.
In the latter situation, however, the distance between a point X% from the edge of the image will always be different than the distance between a point X% from the edge of the element, so a move can be made.
I'm stuck on a CSS problem.
I would like to get a CSS stripe as background of my page like i did here, except that i want the stripe to be located on the bottom right corner of the page.
Moreover i want it to be a fixed background attachment.
I tried what is suggested here : How to position background image in bottom right corner? (CSS) but it seems to work only for background images and not for background gradients.
I tried changing offsets in the gradient definition but it's still relative to the top left corner, and the result would differ if the window size changes.
Here's my current code :
body
{
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0 !important;
background-attachment: fixed !important;
/* background-position: 80% 80% !important; */
background-repeat: no-repeat !important;
}
Any advice is welcomed !
I think you are correct, in that the background-position property only works for images and not gradients. At least that's what I'm finding by playing around with it.
So this isn't an answer to "how to make background-position work for gradients", but rather a suggestion to put your gradient on a different element and position IT to the bottom right.
Like:
div {
position: absolute;
right: 0;
bottom: 0;
width: 160px;
height: 160px;
background: linear-gradient(
150deg,
rgba(180,214,14,0.0) ,
rgba(180,214,14,0.0) 70px,
rgba(180,214,14,0.4) 80px,
rgba(152,197,10,0.5) 150px,
rgba(0,0,0,0.4) 151px,
rgba(0,0,0,0) 160px
), no-repeat 0 0;
background-position: center;
}
Granted, you'll probably have to change the gradient to fit better within that element, but I think this might be the only way to achieve what you're trying to do.
Also, you'll want to make sure that body has position: relative (or whatever the containing element is).
I'm trying to skew one single corner of my div background as shown at the green checkmark in the image below:
In CSS3 I'm however unable to achieve that, skewing completely skews every corner. I just want to skew the bottom right corner to the left (say 25px) and maintain the perspective (as shown in the image above).
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
Fiddle: http://jsfiddle.net/3eX5j/
My code is:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);
}
All you need to do is to think in 3d:
div {
width: 300px;
height:80px;
margin-left:40px;
background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: perspective(100px) rotateX(-25deg);
-webkit-transform-origin: left center;
-moz-transform: perspective(100px) rotateX(-25deg);
-moz-transform-origin: left center;
}
fiddle
explanation: you are rotating the element towards you in the upper part. But, the perspective (handled though the transform origin, it's a function !) makes the left hand rotation not to translate in an horizontal movement.
See how can be controlled what is the final size
fiddle with multiple options
I've got three background images, all of width 643px. I want them to be set out like so:
top image (12px height) no-repeat
middle image repeat-y
bottom image (12px height) no repeat
I can't seem to do it without getting them to overlap (which is a problem because the images are partially transparent), is something like this possible?
background-image: url(top.png),
url(bottom.png),
url(middle.png);
background-repeat: no-repeat,
no-repeat,
repeat-y;
background-position: left 0 top -12px,
left 0 bottom -12px,
left 0 top 0;
Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom.
One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can be seen here (the opacity in the demo is just to show that there is no overlap going on). Without opacity, see here. The relevant code (tested in CSS3 browsers: IE9, FF, Chrome):
CSS
div {
position: relative;
z-index: 2;
background: url(top.png) top left no-repeat,
url(bottom.png) bottom left no-repeat;
}
div:before {
content: '';
position: absolute;
z-index: -1; /* push it to the background */
top: 12px; /* position it off the top background */
right: 0;
bottom: 12px; /* position it off the bottom background */
left: 0;
background: url(middle.png) top left repeat-y;
}
If you needed or wanted IE8 support (which does not support multiple backgrounds), then you could put the top background in the main div, and put the bottom background in by using the div:after pseudo element positioned to the bottom of the container.
If you can add padding/borders to the block equal to the backgrounds you want to position without overlapping other block, you can use the background-clip & background-origin to position the top and bottom backgrounds over the paddings/borders, and the repeating background over the content/paddings+content.
Here is an example: http://dabblet.com/gist/2668803
For your code, you'll possibly need to add something like this:
padding: 12px 0;
background-clip: padding-box, padding-box, content-box;
background-origin: padding-box, padding-box, content-box;
or
border: solid transparent;
border-width: 12px 0;
background-clip: border-box, border-box, padding-box;
background-origin: border-box, border-box, padding-box;
And you'll get what you need. If you can't get the paddings/borders, the pseudo-element like ScottS mentioned would work perfectly.
Try do it like this:
background: url(PICTURE.png) left top no-repeat, url(PICTURE2.png) right bottom no-repeat, url(PICTURE3.jpg) left top no-repeat;
}
EDIT:
Was just an example, but here's the css with your css:
background: url(top.png) left 0px top -12px no-repeat, url(middle.png) left 0px top 0px repeat-y, url(bottom.png) left 0px bottom -12px no-repeat;
}
I actually found a simpler fix, because I was having this same issue with a horizontal navigation.
Rather than adding code like the other answers you just have to list it differently in your CSS. The center image that repeats needs to be listed last, not first or second.
In my code it looks like this:
background-image: url(../images/leftNav.gif), url(../images/rightNav.gif), url(../images/centerNav.gif);
background-position: left, right, center;
background-repeat: no-repeat, no-repeat, repeat-x;
to use backgroud-position with 2 arguments, must to Write in extended writing backgroud-position-x and backgroud-position-y
background-position-x: left 0;
background-position-y: top -12px, bottom -12px, top 0;
A radical but effective way to deal with this, if:
you want to apply backgrounds with no overlapping to a ":before"
the ":before" element as a known max height
&:before {
background: url('vertical-line.png') no-repeat 0px,
url('vertical-line-repeat.png') no-repeat 140px,
url('vertical-line-repeat.png') no-repeat 200px,
url('vertical-line-repeat.png') no-repeat 260px,
url('vertical-line-repeat.png') no-repeat 320px,
url('vertical-line-repeat.png') no-repeat 380px,
url('vertical-line-repeat.png') no-repeat 440px,
url('vertical-line-repeat.png') no-repeat 500px,
url('vertical-line-repeat.png') no-repeat 560px,
url('vertical-line-repeat.png') no-repeat 620px,
url('vertical-line-repeat.png') no-repeat 680px,
url('vertical-line-repeat.png') no-repeat 740px;
}
Here's a method that uses 3 div's for each of the Top, Middle, and Bottom images that are transparent to apply to your webpage.
Background wallpaper is optional.
Tested in modern browsers and is IE8 friendly.
This method allows you to treat the body element as it should be treated, i.e., your webpage markup does not need to be in a wrapper or containing element.
jsFiddle Example
jsFiddle Example with centered filled
Since the above example uses image place holder content that is without transparency for Top and Bottom images, you can verify markup works with transparency with this jsFiddle that uses mini transparent icons in repeat mode HERE.
The only (practical, non hair-threatening) way I see is do do that in Javascript, when the page has loaded, and when it is resized, with a canvas sized to fit the innerHeight and the 3 images: draw the first one once at the top, draw the second as many times as required to cover the remainder of the canvas, and draw the 3rd one at the bottom of the canvas. Position the canvas at 0,0 with a ridiculously negative z-index.
I had a go at it with 3 images (643 x 12, 100 and 12) and of course the first issue I saw is that the 3rd image is drawn over part of the last iteration of the 2nd image -- unless you have a window height of exactly 12+12+(p2.height*X), you'll have some overlap. But that's expected, right?
I think z-index will fix this because z-index only affects CHILD elements, meaning you can't mess up anything else on the page that uses z-index.
top and bottom images z-index:3;
middle image z-index:2; background-repeat:repeat-y;