I want to mask text with Fixed background image just like this:
https://hitachiglobalweb.plasticbcn.com/
(scroll to bottom --> that air written text masking effect )
I can make a text mask but unable to get that Fixed Background for parallax effect.
There are many tricks to achieve text masking, but none have example of fixed background.
i have tried all these and also tried to give fixed background.
https://css-tricks.com/masking-vs-clipping-use/
<div class="vert_clip_cont">
<div class="vert_clip mask two">CNC</div>
</div>
.vert_clip_cont {
position: relative;
}
.vert_clip {
transform: rotate(-90deg);
font-size: 190px;
font-weight: 800;
padding: 0px 0;
background: url(../images/fi.png);
background-clip: text;
color: transparent;
background-attachment: fixed !important;
background-size: 100% auto;
position: absolute;
left: -100px;
}
So, I know how to mask text but unable to background: Fixed;
Maybe there is not enough space for the background to be fixed, try using min-height
I made a fiddle for you check it https://jsfiddle.net/je85nw7v/11/
Related
I have two background jpeg images that are repeated vertically across the entire left and right borders of my website.
Here is my code:
.gradients {
background-image: url("outer-gradient.jpg"), url("outer-gradient-horizontal-flip.jpg");
background-position: top left, top right;
background-repeat: repeat-y;
}
<body>
<div class="gradients">
<div> website content in here </div>
</div>
</body>
This is what it looks like:
left and right background images
I need a way to make both of these jpegs transparent.
Please don't suggest I just use CSS gradients, I cannot use CSS Gradients because of the color complexity needed to make the left and right images the way they were. These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
I've seen methods of making a single background image transparent by adding an opacity div in front or behind it. How would I do this for my .gradient div, when I have two background images?
I need a way to make both of these jpegs transparent.
As you can't simply give opacity to the gradients div, which would affect the website content as well, you could use pseudo elements, like this, which will not effect the website content
.gradients {
position: relative;
padding: 0 60px; /* for this demo, push the content off the image */
}
.gradients::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/00f);
background-position: top left;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
.gradients::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 50px; /* width of your jpg file */
height: 100%;
background-image: url(http://placehold.it/50/f00);
background-position: top right;
background-repeat: repeat-y;
opacity: 0.5;
z-index: -1;
}
<body>
<div class="gradients">
<div>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
website content in here<br>
</div>
</div>
</body>
I'm not sure what this means:
These jpegs have hundreds of colors for a richer gradient than any CSS Gradient could make.
If you can make them in Photoshop, you can make your gradients in CSS. A gradient is by definition hundreds of colors, as it transitions from one to another (and potentially another). The screenshot you've shared is definitely able to be reproduced using CSS gradients.
However, since you've asked to rule that out, I'd suggest using 24-bit PNGs instead of JPGs. 24-bit PNGs have an alpha transparency channel which would allow you complete control over how transparent they are overall, and how transparent they are per-pixel. There is no background-transparency property at this point, so what you're trying to accomplish can't be done with the HTML markup you have and CSS.
The third option is to have an empty div with opacity for your background:
<div class="gradients"></div>
<div>Website content here</div>
html { height: 100%; }
body { min-height: 100%; position: relative; margin: 0; }
.gradients {
background-image: url('left.jpg'), url('right.jpg');
background-position: top left, top right;
background-repeat: repeat-y;
bottom: 0;
left: 0;
opacity: .5;
position: absolute;
top: 0;
right: 0;
}
Codepen Link, with CSS gradients because I don't have your JPG assets but the effect is the same.
I can think of a couple of ways:
You should put them in separate divs and place these divs underneath the main container / wrapper. You can css-position them accordingly.
You could work with actual .png images that allow for a transparency gradient
You could work with a background image that already has both the gradients and the desired bg-color in one file. Then you could make it background-repeat: repeat-y; and background-size: contain.
So i have this image right here
"http://i.imgur.com/eh71foN.png"
My problem is that whenever i resize the window the Mass Effect image doesnt resize with it.
It becomes like this
"http://i.imgur.com/jaDV7jG.png"
I've been trying to figure this out for a while. Can anyone point me in the right direction?
#MassEffectSign {
background: url(masseffect12.png) center top no-repeat;
top: 25px; left: 750px; z-index: 2;
padding: 250px;
position: absolute;
}
My blue background
#bodyBorder {
background: url(navyblue.jpg) center top repeat-y;
padding: 1000px;
opacity: 0.7;
background-attachment: fixed; }
Use img tag instead background image in CSS.
img {width: 100%}
Use percents for the relevent values.
top: 25px; left: 45%;
This makes the amount of space between the left edge and the image relative to the window size. Play around with the value a little to center it and you should be good.
Your positioning is absolute, so it will move independently of the scale. Put that inside a relatively positioned div and then it will work.
For instance,
<div style="position:relative;">
<div id="MassEffectSign"> </div>
</div>
Hope this helps.
I have a "main-image" containing lots of small images which I "clip" into divs of fixed size by setting the background-position to some negative offsets. This works great!
Now I have a div with a size that changes during the lifetime of the web-page.
The old code had its own backgound-image with the background-size set to "contain". Something like this:
.dump {
display: inline-block;
background-image: url("/some/image.png");
background-repeat: no-repeat;
background-size: contain;
}
And that worked great too.
Now I'm trying to clip that background image from my "main-image".
E.g. My "main-image" has a size 1800px128px
The sub-image I like as background starts #1200px,10px with a size of 200px x 80px.
Is there a way to clip this rectangle and than scale to the dimensions of the containing div (which are unknown at the time of programming)
Thanks for the hint. However, I tried but can't get anything to work:
My problem is, that the div image should follow the height the containing div, so I can't tell size, or scale or zoom or whatever at the time of coding. I give an example:
<div style="width:100%; height:30%; text-align: center">
<div class="dump"></div>
</div>
Now, as I said: The image I want to appear as the background of div.dump is the 200x80px area from the main-image #origin(1200,10) AND I want that resulting image scaled to fit the hight of the container. So, I have a known translation, followed by an unknown zoom. Maybe it's just over my head.
I believe the best way to do this is using css transforms, I found this page for further reference on how to transform a background image and made this fiddle based on it.
The idea is that you will use the classes "icon" and "icon:before" to configure your sprite to fit in an element and use other classes like "smaller" and "bigger" to set the actual size of the element.
.icon
{
font-size: 2em;
text-align: center;
line-height: 3em;
border: 2px solid #666;
border-radius: 7px;
position: relative;
overflow: hidden;
}
.icon:before
{
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0%;
top: 0%;
z-index: -1;
background: url(http://blogs.sitepointstatic.com/examples/tech/background-transform/background.png) 0 0 repeat;
transform: translate(-50%, -50%) scale(1.5, 1.5);
background-repeat: no-repeat;
background-size: contain;
}
.smaller{
float:left;
width: 120px;
height: 120px;
}
.bigger{
float:left;
width: 200px;
height: 200px;
}
Because css transforms support percentage, the background will be clipped and scaled correctly, according to the size defined in "smaller" and "bigger"
I am trying to set a background image on an img tag. Is this possible?
My HTML:
<div id="content">
<img src="my-image.jpg" alt="image" class="img-shadow">
</div>
My CSS:
#content img {
float:right;
margin:0 0 15px 15px;
border:4px solid #ffffff;
}
.img-shadow {
background-image:url('img-shadow.png');
background-repeat:no-repeat;
background-position:0 232px;
}
Using Chrome's "Inspect Element" I can see the path to the background is correct. It's just not showing up in the browser. Below is the desired effect I am going for. By the way. the foreground image dimensions are 258x258 (with border) and the background-image dimensions are 258x40.
An image with no transparency and no padding will cover up its own background image. Images having background images do work, provided there's some gap for the background image to show through.
Adding a padding around the image will suffice, if you just want the background image to show around the image. You can then set a negative margin of the same size, if you don't like the padding taking up space.
Setting the background position to something other than 0 0 will NOT suffice; no matter what the background position is set to, the background will never extend beyond the area taken up by the element (including padding, but excluding border and margin).
Here's a solution using a container element and CSS :after
Demo fiddle
HTML
<div id="content">
<div class="img-container">
<img src="http://placehold.it/258x258" alt="image" class="img-shadow" />
</div>
</div>
CSS
#content img {
border:4px solid #ffffff;
vertical-align: top;
}
.img-container{
position: relative;
display:inline-block;
}
.img-container:after {
content: url('http://placehold.it/258x40');
display: block;
position: absolute;
top: 100%;
right: 0;
}
UPDATE
And using CSS3 box-shadow
Demo fiddle
.img-container:after {
content: '';
display: block;
position: absolute;
top: 90%;
right: 0;
height: 20px;
width: 258px;
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
-ms-transform: rotate(3deg);
transform: rotate(3deg);
-moz-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 10px 10px rgba(0,0,0,0.5);
box-shadow: 0 10px 10px rgba(0,0,0,0.5);
z-index: -1;
}
YES you can put a background image to an image.
.your-image{
padding-bottom:18px; /* <-- height of texture image */
background:transparent /* <-- to manage some-transparent.png don't set a bgColor */
url(txtr-bottom-shadow-divider.png) /* <-- Your bottom right texture */
no-repeat /* <-- */
100% /* <-- align right */
100% /* <-- align bottom */
scroll /* <-- avoid Yoda trolling for spam abuse. Joke */;
}
You noticed the padding? It is to display the background-texture, otherwise, the image will take 100% of available space (width and height) so you won't see anything.
yup. just make sure you set some padding so the background-image will peek through; demo: http://jsfiddle.net/jalbertbowdenii/p6fm4/1/
updated fiddle by removing all the padding. to get the desired "peek" effect set the two corners you are peeking out of with a little bit of padding and the others to 0. like so: http://jsfiddle.net/jalbertbowdenii/p6fm4/5/
Yes,
Here is the easiest way to do it:
In your CSS file
body
{
background-image:url('img-shadow.png');
background-repeat:repeat-x;
background-position:center;
background-size: 100% 100%;
}
It will set it for every page of your site
You do not need to use an IMG tag for background images. It is the best form to set your background image in the css, so that you can easily layer items on top of it. With a IMG tag you need to make sure that everything you place ontop of it is absolute positioning, so it doesn't move. This is a huge pain. Good Luck
What I'm trying to achieve without using JS can be seen on jsfiddle.net/k2h5b/.
Basically I would like to display two images, both centered, one in background and one in foreground:
Background Image: Should cover the whole window without affecting the aspect ratio, which means that the image will always touch two opposite edges of the window, but the image will be cropped.
Forground Image: Should be inside the window without affecting the aspect ratio, which means the image will be always touch two opposite edges of the window, but the image will not be cropped.
It doesn't matter if it's a <div> or an <img> tag, as long as they are displaying the images.
Asume also that the image sizes are known upfront and can be used in CSS or HTML part.
So my question is: is it possible using only CSS or CSS3?
If it's not possible I will accept the answer that will be as close as possible to my goal.
Examples:
When the background image is cropped from the top and bottom:
When the background image when it's cropped from left and right:
After looking at #Kent Brewster's answer, I think I could achieve all the requirements of OP.
This doesn't have the problem of foreground image being cropped and you can also specify constant margin around the foreground image. Also div is being used instead of img tag, because we are using background images. Here is the link and here is the code:
<div id='bg'></div>
<div id='fg'></div>
#bg {
position: absolute;
height: 100%;
width: 100%;
background-image: url(http://i.imgur.com/iOvxJ.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
}
#fg {
position: absolute;
top: 10px;
left: 10px;
bottom: 10px;
right: 10px;
opacity: .7;
background-image: url(http://i.imgur.com/HP9tp.jpg);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
}
Try this:
<html>
<style>
body {
margin: 0;
}
#bg {
position: absolute;
height: 100%;
width: 100%;
background: transparent url(bg.jpg) 50% 50% no-repeat;
background-size: cover;
}
#fg {
position: absolute;
height: 90%;
width: 90%;
top: 5%;
left: 5%;
background: transparent url(fg.jpg) 50% 50% no-repeat;
background-size: cover;
opacity: .7;
}
</style>
<body>
<div id="bg"></div>
<div id="fg"></div>
</body>
</html>
If the scaling requirement is flexible, it might work. See http://jsfiddle.net/k2h5b/5/ to see it run.
Yes, it's possible.
Basically I just made the background image the background for the <body> (doesn't have to be the body of course), and then put the image inside that with a small margin.
<body>
<img id='fg' src='http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg'></img>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
#fg {
margin: 20px 20px;
opacity: 0.7;
}
obviously if the window is too big, there'd be issues. You could (I guess) use media queries to pull in different image sizes based on window size.
edit — OK, well for the image, if you do want it to crop and retain the right aspect ratio, then I think you'll have to know the image size ahead of time to do it so that it works out. Lacking that, here's another revision.
<body>
<div id='fg'> </div>
</body>
css:
body {
margin: 0; padding: 0;
overflow: hidden;
background: url('http://wallpaper.zoda.ru/bd/2006/07/21/2c7b4306fd22f049f331d43adb74a5f7.jpg') no-repeat left top;
}
body, html { width: 100%; height: 100%; }
#fg {
margin: 2%; width: 96%; height: 96%;
opacity: 0.7;
background: url('http://3.bp.blogspot.com/-OYlUbWqyqog/TeL-gXGx3MI/AAAAAAAAHRc/bdqvvvaeC7c/s1600/bald-eagle3.jpg') no-repeat center center;
}
If you know the image dimensions, you could then set max-height and max-width. (I'll try that too :-)
edit again To get the background to crop in a centered way, you'd need to set the position to "center center" instead of "left top". (Or "center top" if you just want it centered horizontally.)
Vertically centering elements with CSS without cutting-edge non-standard features (flexible box layout) is hard. That may be something to do with JavaScript. I'll say that one problem with any JavaScript solution like that is that it really slows the browser down. If you must do it, I would suggest introducing a little time lag so that you don't try to recompute the layout on every resize event. Instead, set a timer for like 200 milliseconds in the future where the work will get done, and each time you do so cancel the previous timer. That way, while a person is dragging the window corner it won't burn up their CPU.
edit even more ooh ooh yes #Kent Brewster's answer with the vertical centering is good - I always forget that trick :-)
There is no way to achieve this effect using only CSS, for two main reasons:
Because you are trying to resize your image, you cannot use the background property and must instead use an <img> tag. Your image will always try to take up as much room as it can if the width and height are not set. Thus, the aspect ratio will not be maintained, or your image will be cropped.
The other caveat of resizing the image is that you will not be able to vertically-align it to the center of your page without knowing its dimensions.