The background is the red rectangle
The screen is the black rectangle
(Fig1) is the original position of my background
If I want to push it all the way to the right, off-screen (Fig2), I just set
background-position: 100vw;
This works perfectly fine. However I want to do the same in reverse, push the background off screen to the left (Fig4). If I set the background-position like so
background-position: -100vw;
It does not work as expected (Fig3- bug) since the original point of background (0,0) is always top-left.
Could you guys show me how to achieve Fig4 position? Thanks
You can change the reference and use right 100vw
body {
margin:0;
height:100vh;
background:
url(https://picsum.photos/id/1/200/200) right 99vw bottom 0 no-repeat;
}
Related question for more details: Using percentage values with background-position on a linear gradient. You will also find a generic way to make the background outside of its container in the section Special cases
Use a wrapper and then transform the background here I set to -90% but you can set to -100%:
<div class="body-bg"></div>
<div class="content"><h1>Some content</h1></div>
.body-bg {
width: 50vw;
height: 50vh;
background: black;
position: absolute;
z-index: 0;
transform: translateX(-90%);
}
.content {
position: relative;
}
h1 {
color: red;
}
https://codepen.io/alexplummer/pen/JjPavBe
Related
I'd like to create the following effect:
There are two full-screen images on top of each other, but only one is visible. When you move the mouse, the second one is revealed within a circle where the mouse is.
I know how to create the circle that follows the mouse using JS. As for the image overlays, I'm stumped. I fiddled with pseudo-elements, with clip-path and opacity, with radial-gradient, with multiple backgrounds -- to no avail.
Radial-gradient would actually be ideal here, but as far as I know it only accepts colors, not images.
Perhaps a third overlay layer? Any ideas? (If there's already a CodePen that does this and that I've missed, please link to it).
Thanks y'all!
short answer: (and all the code below is commented)
I used background property in a <div> instead of using a <img> tag...
the trick is when you use background-attachment: fixed;
in this example, I used 2 backgrounds from Windows 11 OS and you can see really the trick! one dark and one light...
detailed explanation:
so the a <div> and assigned a background-image to the URL of the light-image
the problem here is: when the div is moving with JS, also the image move...
but I find a solution
make the image fixed, which make the image be always in the same position, also if the image is moving
#circle {
background-attachment: fixed;
/* your code */
}
the problem here is: the image isn't responsive,
but I find solution:
make the image size to cover so it will auto-adjust the size and height of the image automatically to the viewport of the device.
#circle {
background-size: cover;
/* your code */
}
for moving is simple... because we can use Javascript, with an eventListener of mousemove
document.addEventListener('mousemove', (e) => {
/* your code */
});
now solved all the problems, however, I will put some documentations below
documentation that can help you:
CSS background-image MDN
CSS background-attachment MDN
CSS background-size MDN
JS mousemove event MDN
here the code
the code can seem to be long,
but not really because I added a lot of comments so everyone can understand
let circle = document.getElementById('circle');
// on mouse move move the circle
document.addEventListener('mousemove', (e) => {
// make the image move relative to the mouse (make sure that in css you applied position: relative; to the div)
circle.style.left = e.pageX - 100 + 'px'; // 100 is half height of circle, so the cursor is in the middle
circle.style.top = e.pageY - 100 + 'px';
});
body {
margin: 0;
overflow: hidden;
}
#bg-image {
position: fixed;
height: 100vh;
width: 100vw;
/*make the background responsive*/
object-fit: cover;
/* under the circle div*/
z-index: -1;
}
#circle {
height: 200px;
width: 200px;
/* make the the div circle */
border-radius: 50%;
/* important using relative for using top and left in javascript */
position: relative;
/* change the url with the link of image you want */
background-image: url(https://laaouatni.github.io/w11CSS/images/0light.jpg);
/*center the background */
background-position: center;
background-repeat: no-repeat;
/* TRICK: making the background responsive*/
background-size: cover;
/* TRICK: the MAGIC is HERE make the image fixed, so is not moving */
background-attachment: fixed;
}
<!-- background image -->
<img id="bg-image" src=" https://laaouatni.github.io/w11CSS/images/1dark.jpg" alt=" ">
<!-- the circle, and moved with javascript -->
<div id="circle"></div>
please see in full mode,
for better results... you can change the values to something like vh or vw for making this more responsive.
I hope this will help you.
You can use a radial gradient as a mask in CSS.
This snippet has an 'underneath' element which is in fact above the background on the body element.
The mask-image cuts out all but the part of its background which is underneath the non-transparent part.
Obviously you will want to alter the dimensions to fit your use case.
Also, the mousemove does literally that (not looking to see whether mousedown for example) just to give a simple demonstration.
Note that some browsers still require a -webkit- prefix for masks.
<!doctype html>
<html>
<head>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
background-image: url(https://picsum.photos/id/1016/1024/768);
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
}
.underneath {
position: absolute;
width: 100%;
height: 100%;
--x: 50vw;
--y: 50vh;
background-image: url(https://picsum.photos/id/1015/1024/768);
background-size: cover;
background-position: center;
-webkit-mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
-webkit-mask-size: 30vmin 30vmin;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
mask-image: radial-gradient(black 0 15vmin, transparent 15vmin 30vmin);
mask-size: 30vmin 30vmin;
mask-repeat: no-repeat;
mask-position: calc(var(--x) - 15vmin) calc(var(--y) - 15vmin);
}
</style>
</head>
<body>
<div class="underneath"></div>
<script>
const underneath = document.querySelector('.underneath');
document.body.addEventListener('mousemove', function() {
underneath.style.setProperty('--x', event.clientX + 'px');
underneath.style.setProperty('--y', event.clientY + 'px');
});
</script>
</body>
I have read that in order to place a background image inside a container block in CSS you can use the background-position property. And you can give labels to it like, top-right-bottom-left-center or css units, mostly percents. And the way it acts is kind of like this:
background-position: 25% 25%, will place the (25%,25%) point of the background image from the top-right edge centered to the (25%,25%) point of the CSS element that contains that background.
So if I would like to center the (50% 50%) point of the background image to the (0,0) point of the container, how can I achieve it?
I know I can do it with pseudo elements (:before, :after) but is there a math calculation that can help me use the background property to make this work? Unfortunately I haven't found a property like a registry point that could allow me to place the point I would like use as my center for the background (background-origin despite the close meaning it is used for something completely different as I discovered).
This question is in regards to any situation but as an example I'm sharing a quick and simple snippet to make it more graphical.
By the way, I'm trying to find the most responsive solution I could. It will be much better if we can assume that I don't know the exact dimensions of the background image so that if I later change that image for another of different size, it stays centered to the same place. This means I prefer % over px.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Thanks in advance
Since you know the size of the background image (200x200), you can use half the amount of those pixel values as negative values for the background position in order to have the image's center exactly at the upper left corner of its div element. In your case, that would be background-position: -100px -100px;:
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: url('https://source.unsplash.com/random/200x200') no-repeat, blue;
background-position: -100px -100px;
}
<! -- Let's supose I would like to center the (50%, 50%) of that image placeholder at the (0,0) of the container div. -- >
<div class='foo'></div>
Second version: If you use a regular image instead of a background-image, you can use transform: translate(-50%, -50%); on it, and overflow: hidden on the parent. So that way using percentage values works.
However, in this case it becomes more complex to add content to the main div if you also need the background color for the rest of the container - You'd have to add an absolutely positioned element for that.
.foo {
margin: 0 auto;
width: 400px;
height: 300px;
background: #bbf;
overflow: hidden;
position: relative;
}
.foo>img {
transform: translate(-50%, -50%);
}
.foocontent {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
<div class='foo'>
<img src="https://source.unsplash.com/random/200x200" />
<div class="foocontent">
Here's some text and even some more text to demonstrate how text content could be placed above the image that serves as a background here.
</div>
</div>
The percentage unit cannot be used to offset the background image because it defines the entire image point relative to its container.
What you can do is define the size and position of the image, which uses pixel units.
Use background shorthand:
background: url(img) -100px -150px / 200px 300px;
body {
background: url(https://images.unsplash.com/photo-1519940640025-75fdf32010d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1234&q=80) -100px -150px / 200px 300px no-repeat pink;
}
I'm attempting to create a background for a webpage that takes advantage of the gradient options in CSS3. What I want it to do is use a gradient that fills the full height of the screen, and then if the screen is scrolled beyond that, to just use the final color.
Unfortunately, all of my attempts end up with either the gradient repeating or staying fixed. Neither of these are acceptable for what I have in mind.
Could any of you help me? The closest I could get so far can be found below, but obviously it stays fixed. Everything else I've tried has pretty much had a repeating issue, even with no-repeat thrown into the mix.
html {
height: 100%
}
body {
background: gold no-repeat linear-gradient(silver, orange, gold);
background-attachment: fixed;
min-height: 100%;
margin: 0px;
}
You could make use of multiple backgrounds and stack them like in the below snippet where the first background is your linear-gradient and the second one is a solid color (which is same as the linear gradient's end color).
By not repeating the gradient (using the no-repeat), we can limit the gradient to be present only for the screen's height whereas the solid color background would by default run through the full size.
Here is what MDN says about multiple background stacking: link
These are layered atop one another with the first background you provide on top and the last background listed in the back. Only the last background can include a background color.
(emphasis is mine)
html {
height: 100%;
}
body {
background: linear-gradient(silver, orange, gold, red) no-repeat, gold;
margin: 0px;
}
/* Just for demo */
div {
min-height: 200vh;
}
<!-- Library included just to avoid prefixes so that users with older browser can view -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div>
Some content....
</div>
Note: I have added a red end color to the linear-gradient just to show how the solid color takes over from the point where the gradient ends.
Actually, it would look like this:
html {
height: 100%;
}
body {
background: linear-gradient(red, orange, gold) no-repeat, gold;
background-size: 100%;
margin: 0px;
}
div {
min-height: 200vh;
}
Here is a fiddle https://jsfiddle.net/v14m59pq/163/
Hope this help you man.
If you want that effect, you need two layers, back layer with the final color and the top layer with the gradient.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
background-color: gold;
}
body {
height: 100%;
background: gold no-repeat linear-gradient(silver, orange, gold);
}
I use the html with a gold color and the body with the gradient, simply means, the parent the main color and the children the gradient with the full viewport height.
Check link to see the result :)
http://codepen.io/TibicenasDesign/pen/VLywpL
I created a <div> first thing in the <body> to draw a top line at the top of the page:
<body>
<div class="bordertop"></div>
.....
</body>
and the style:
body {
font-family: Helvetica, Arial, sans-serif;
-webkit-text-size-adjust: 100%;
margin:0;
}
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
}
However, the top_border image doesn't appear unless I write some text inside the <div> but I don't want to. How could I fix this?
Since the div is empty, there's no content to push it "open" leaving the div to be 0px tall. Set explicit dimensions on the div and you should see the background image.
.bordertop
{
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
height: 100px;
width: 100%; /* may not be necessary */
}
You might need to set the css width and height of your <div> element to whatever size you want
.bordertop {
background-image: url(../images/top_border.png);
background-repeat: repeat-x;
width: 200px;
height: 100px;
}
Give the div a height:1px. That should work. Otherwise your div is 0px high, meaning you won't see anything.
You could also give it padding-top:1px
Another thing you could do is to set the background-image of the line on the body in your CSS. This is assuming the line is the entire width of the body.
See demo
As the answers above me suggest ^^' it's because it has virtually no size, you need either to put content inside to resize it or to set width/height or padding in css bordertop class, or you can put another empty inside it with set size. I was going to skip this answer since there are already answers but I just wanted to add that width/height is not your only option.
On a side note, oh man, people here posting so fast I sometimes wonder if its a race and what is the prize, there must be some, I guess helping other is itself great prize. :) When I was starting to type this there was no answer yet.
The best way I have found is:
for landscape:
width:100%;
height:0;
padding-top:[ratio]%;
for portrait:
width:[ratio]%;
height:0;
padding-top:100%;
You need to determine which side is longer and accept this dimension as 100%
then calculate [ratio] - percentage of shorter dimension in relation to 100% longer dimension. Then use the one of solutions above.
I had the same problem for quite some time, my solution was giving the style lines of: min-height. This opens the div to the height given if there is no elements inside. The height can get bigger with the more elements inside, but not smaller.
Example code:
.fixed-bg {
/* The background image */
background-image: url("img_tree.gif");
/* Set a specified height, or the minimum height for the background image */
min-height: 500px;
/* Set background image to fixed (don't scroll along with the page) */
background-attachment: fixed;
/* Center the background image */
background-position: center;
/* Set the background image to no repeat */
background-repeat: no-repeat;
/* Scale the background image to be as large as possible */
background-size: cover;
}
code gotten from https://www.w3schools.com/cssref/pr_background-attachment.asp
If it is the only div element in the body use the following style to to make it occupy the full-width.
.bordertop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image:
url('../images/top_border.png');
}
I couldn't get my background showing in the div even with the width set up. Turns out i had to put "../" in the url section then it showed the picture i was struggling for quite a while.
left {
width: 800px;
height: auto;
min-height: 100%;
position: relative;
background-image: url("../img/loginpic.jpg");
background-size: cover;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
background-color: crimson;
}
Otherwise, you can just open a <p></p> and in styles, remove the default margin length, that's margin: 0; and add height: 0.1px which doesn't consume much space, so it'll work.
Note: it'll work properly until it's not zoomed out more than 50%, so make sure of the use case before you apply it to the body.
I have looked around for this and it seems simple but i cant seem to work it out.
I have a div with a background.
I want the background to start 20px down and then repeat-y, as in repeat the rest of the way down.
<div class="main_col"></div>
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
}
This is what im trying but it is filling the whole div?
this is what i have tried....http://jsfiddle.net/uzi002/gqqTM/4/
You cannot do this with one class definition in current CSS2 standards.
Use a separate div for the background.
If you want to fiddle with some CSS3, you can check out
background-origin
at
http://www.css3.info/preview/background-origin-and-background-clip/
Be aware of browser support.
You might try to add padding-top: 20px to .main_col and inside it create additional div with this background.
.main_col {
width: 680px;
float: left;
background: url("your image") 0px 20px;
}
Update
this is using giker s example
try something like this
There are 3 CSS properties relevant to achieving this:
background-image { url(/myBackground.png) } // To select the image
background-repeat { no-repeat } // To choose how or if it repeats
background-position { 1px 1px } // To choose the X, Y coordinates of the top left corner of the background image in relation to the top left corner of the element.
Now, that's all quite verbose but it can be condensed into a single rule, as follows:
background { url(myBackground.png) no-repeat 1px 1px }
It is possible to use relative values (such as the % which your code shows) for the background-position, but you will need to use px.
Try using a margin padding.
i.e.
.main_col {
width: 680px;
float: left;
background:#fff;
background-position:50% 50%;
padding-top:20px;
}