I'm trying to use webkit-mask-size to make a mask image smaller. Like this:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask-size: 50% 50%;
-webkit-mask: url(../css/images/myimage.png) center center;
}
The div which has myClass applied to it has a parent container which has a fixed height set on it.
Whatever I set -webkit-mask-size to it makes no difference.
Just swap the order:
.myClass {
width: 100%;
height: 100%;
background: #ffffff;
-webkit-mask: url(../css/images/myimage.png) center center;
-webkit-mask-size: 50% 50%;
}
When you specify the whole property, -webkit-mask, it contains values for all the subproperties, so it resets the -webkit-mask-size.
If you set that the last, that won't happen.
Alternatively, specify the subproperties individually (image, position, size ...)
Hmm. I think it might be that center center after your webkit mask url. Also you should set a webkit-mask-position. Take a look at this code:
.myClass {
width: 100%;
height: 100%;
background: red;
/*-webkit-mask-size: 50% 50%;*/
-webkit-mask-position: 0 0;
-webkit-mask-size: 200px 200px;
-webkit-mask-image: url(https://dl.dropboxusercontent.com/u/535060/mask.png);
}
It works for me... Here is the fiddle: http://jsfiddle.net/U9axq/
Related
Is it possible to use CSS to make the background of the top 5% of a page a solid color, and two different background images for the remaining 65% and 30%?
This is how I need it to look:
Edit 2: So there are numerous ways to accomplish this.
Pseudo elements: I think this is the best method, as it avoids extra elements in the markup and allows good control of scaling/cropping. Example below.
Multiple containers: Works just like pseudo elements, but with the added disadvantage of extra elements in the markup. The best support across older browsers, but these days, pseudo elements are quite well supported. Example below.
Multiple backgrounds: This may be suitable for solid colors or gradients, but for most images scaling and cropping will be problematic if using percentages for size. Example below.
1. Pseudo Elements
Just add ::before and ::after pseudo elements to the pagewrapper, supply background images, and position accordingly.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.pagewrap::before {
content: "";
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.pagewrap::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
</div>
2. Multiple Containers
Just replace the pseudo elements in above example with container divs in the html.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: relative;
height: 100%;
background-color: green;
}
.mid65 {
position: absolute;
top: 5%;
left: 0;
height: 65%;
width: 100%;
background-image: url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: cover;
background-position: center;
}
.btm30 {
position: absolute;
bottom: 0;
left: 0;
height: 30%;
width: 100%;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg");
background-size: cover;
background-position: center;
}
<div class="pagewrap">
<div class="mid65"></div>
<div class="btm30"></div>
</div>
3. Multiple Background Images
Use multiple background images:
background-image: url("image1.jpg"), url(image2.jpg);
then use the same comma separated syntax
for background-repeat: no-repeat, no-repeat; (same value need not repeat)
and background-size: 100% 30%, 100% 65%;,
etc..
The background position is the tricky part though, because it doesn't seem to work as one might expect (Temani Afif kindly provided a very informative link in the comments below ). But this seems to achieve the desired result of 5% 65% 30%:
background-position: bottom left, 0% 15%;
Edit: Replaced gradients with actual images so you can see how image stretching may be an issue with this method. More suitable for solid colors or gradients.
html, body {
height: 100%;
padding: 0;
margin: 0;
}
.pagewrap {
position: fixed;
width: 100%;
height: 100%;
background-color: blue;
background-image: url("https://i.postimg.cc/qvDLXqB3/Optical-Illusion-Brain-washer-27.jpg"), url("https://i.postimg.cc/nckTrT6T/21.jpg");
background-size: 100% 30%, 100% 65%;
background-position: bottom left, 0% 15%;
background-repeat: no-repeat;
}
<div class="pagewrap"></div>
I'm trying to add a stylish "wave" element to the top of a div, however with my attempts, the svg moves from its position and leaves a gap when the browser resizes.
Here's a mockup of what it should look like:
CSS:
.wave {
position: absolute;
top: -72px;
}
.container {
background: #eee;
}
.col-1 {
height: 200px;
}
.col-2 {
position: relative;
background: #fff;
height: 100px;
width: 100%;
margin-top: 100px;
}
My other attempt was using background-image: url(wave.svg); in a :after selector, but same results.
Here's a codepen:
https://codepen.io/anon/pen/LmRyLK
How can I get the wave to keep put as is when it's resizing and when it's not?
Set your SVG as a background image on the element where you have your funky purple bit, you can stack the background images on each other, like so:
.purpleElement{
background: url("/path/to/asset/image.svg") bottom center no-repeat, purple;
background-size: 100%;
/*I've set a height here to replicate content*/
height: 70vh;
width: 100%;
}
I've forked off your codepen to show what will happen
This question already has answers here:
Using percentage values with background-position on a linear-gradient
(2 answers)
Closed 3 years ago.
Everywhere I read says this should be working fine, but for some reason it's not.
This was to fix someone else's issue so fixing it doesn't matter to me, I just want to know why. The problem is on .br .bg-image. I know I'm trying to use calc() but using a simple background-position: 50% doesn't work either.
http://jsfiddle.net/uLaa9fnu/2/
html {
height: 100%;
width: 100%;
}
body {
margin: 0px;
height: 100%;
width: 100%;
overflow: hidden;
}
.bg-image {
height: 600px;
width: 800px;
background-image: url('http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-267a.jpg');
background-size: 100%;
background-repeat: no-repeat;
}
.relative {
position: relative;
}
.containeroverlay {
background-color: rgba(0, 0, 0, 0.6);
height: 100%;
width: 100%;
}
.framesizer {
height: 340px;
width: 300px;
overflow: hidden;
position: absolute;
}
.frame {
background-image: url('http://i.imgur.com/4AcIXsD.png');
background-repeat: no-repeat;
background-size: 100%;
height: 340px;
width: 300px;
}
.tl {
top: 30px;
left: 30px;
}
.tl .bg-image {
background-position: right 30px bottom 30px;
}
.br {
top: calc(100% - 340px - 30px);
/* Height of frame, plus 30px spacing */
left: calc(100% - 300px - 30px);
/* Width of frame, plus 30px spacing */
}
.br .bg-image {
background-position: right calc(800px - 300px - 30px) bottom calc(600px - 340px - 30px);
/* Background Position doesn't like percentages for some reason */
}
<div class="bg-image">
<div class="containeroverlay relative">
<div class="framesizer tl">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
<div class="framesizer br">
<div class="bg-image">
<div class="frame"></div>
</div>
</div>
</div>
</div>
Solving the problem
After some fiddling I've found what is causing the issue. background-position stops working when the background is as big (or bigger) as the frame it contains.
This is also why dognose's solution works. It removes the background-size.
As proof, I've changed the CSS of the .br-frame and .br .bg-image to the following:
.br {
top:calc(100% - 340px - 30px);
left:calc(100% - 300px - 30px);
}
.br .bg-image {
background-position: calc(100% + 30px) calc(100% + 30px);
/* 100% puts it bottom right, + 30px offset from .br */
background-position: right -30px bottom -30px;
/* or simply use this */
height: 100%;
width: 100%;
background-size: 800px 600px;
}
This way the background-size doesn't equal the frame anymore, causing the background-position to work as it is supposed to.
See the fiddle
The why
The reason it doesn't work with percentages, is because the background-position depends on the background-size, literally. Because background-position: 0% 0%; is top left, and background-position: 100% 100%; is bottom right. If the background image is as big as it's containing frame, there is no more difference between 0% and 100%.
Using this theory in combination with calc(), all it does is:
calc(100% - 340px - 30px) place it to the right (100%), which doesn't move it at all, then move it a total of 370px (-340px - 30px) to the left.
In your case it goes to the right, because you prefixed right before your calc().
background-position
Initial value 0% 0%
refer to the size of the background positioning area minus size of
background image; size refers to the width for horizontal offsets and
to the height for vertical offsets
So any differences on the size of the background image and the size of the element
are welcome and that what makes background positioning work with percentages. Otherwise they don't.
Example:
Consider an image with a size of 500X500 px;
Using a background-position: 50% 50%;
If your div has a width of 600px;
your background image will be shifted to the right by
50% * (600px - 500px) that is 50px
Similarly, if the div has a height of 700px your background image will be shifted down by
50% * (700px - 500px) that is 100px
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: 50% 50%;
border: solid grey;
width: 600px;
height:700px;
}
<div></div>
In case the div is narrower than the image
Now you're div element is 300X400 px,and you want to position your background image the same as before (50px right and 100px down)
You will need to specify a negative background-position: -25% -100%;
Because -25% * (300-500) = 50px and -100% (400-500) = 100px
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: -25% -100%;
border: solid grey;
width: 300px;
height:400px;
}
<div></div>
In the case where both div and image have the same size:
Any percentage you specify at background-position would be multiplied by zero.
And the image will be always aligned with the top left corner of the div. To fix that make the image smaller or bigger by resetting background-size:80% or 120%;
div{
background-image: url(https://i.imgur.com/gcnJ2Qi.png);
background-repeat: no-repeat;
background-position: 50% 100%;
border: solid grey;
width: 500px;
height:500px;
background-size:80%;
}
<div></div>
The docs
GEspinha is somewhat right. This example works as you might expect:
.br .bg-image {
background: url('http://media1.santabanta.com/full') 50% 50%;
}
while having this - it wont work.
.br .bg-image {
background-position:50% 50%;
}
http://jsfiddle.net/gtj5p0px/ (if this is your expeted output for the bottom right frame)
I'm trying to accomplish the following:
I have fixed left sidebar with percent width like so:
.sidebar {
position: fixed;
background-color: tomato;
width: 35%;
height: 400px;
}
.. and a right container with a fixed background image:
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat fixed;
height: 400px;
}
How can I make the background image start where the width of the sidebar ends and not be below it?
Here is a fiddle: http://jsfiddle.net/EKqPg/ (the opacity propery is there for demo purposes)
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no- repeat fixed;
min-height: 400px;
background-size: 65%;
background-position: left 100% top 0px;
}
http://jsfiddle.net/aronez/EKqPg/4/
something like this?
I think this is what you're looking for:
add background-position property to .right
information regarding this property: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
.right {
background: url('http://farm7.staticflickr.com/6212/6365239995_8f5d03fb30_b.jpg') no-repeat;
height: 400px;
background-position:289px,0px;
}
updated fiddle:
http://jsfiddle.net/EKqPg/1/
From what I understand, you never want to have any content inside .right on the 'left' anyway, so why not give it (100-35)% = 65% width and float it to the right?
.sidebar {
width: 35%;
float: right;
}
Fiddle: http://jsfiddle.net/Q4Hey/
The only reliable way to do this by using background positioning properties will end up ruining the aspect ratio, unless you can define an absolute width (not a %):
.sidebar {
background-position: 100% 50%;
background-repeat: no-repeat;
background-size: 65% 100%;
}
Fiddle: http://jsfiddle.net/K9N8p/
I have a footer that is 1024px in width with a background image 1024px by 482px.
I want to put an x-repeating background to the left of it and an x-repeating background to the right of it. How do I do this?
This is what I have:
.footer {
background:
url("footerleft-bg.png") repeat-x,
url("footerright-bg.png") repeat-x 0 0 #fff;
height:482px;
width:100%;
}
But it makes the left background image completely cover the right one.
You could do it like this:
demo
footer {
position: absolute;
bottom: 0;
width: 100%;
min-height: 10em;
background: black;
}
footer:before, footer:after {
position: absolute;
top: 5%; bottom: 5%;
width: 40%;
background-repeat: repeat-x;
background-size: 1px 100%;
content: '';
}
footer:before { left: 5%; background-image: linear-gradient(crimson, black); }
footer:after { right: 5%; background-image: linear-gradient(black, dodgerblue); }
However, there is no way to do it without using nested elements or pseudo-elements. A background repeats itself or it doesn't. It doesn't repeat itself just on an interval from point A to point B (though I would sometimes find that useful as well).
CSS2 does not support multiple background images. You'll need to nest another HTML element to make this work.
See: http://www.quirksmode.org/css/multiple_backgrounds.html