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.
Related
I am working on a promo site with angular 7,
the designer gave me 2 background pictures that complete each other, 1 of them is a real footage with a highlighted part (already in the photo) that should be aligned with the other background.
1) What i should do in order to align between the two and make them responsive.
also should i use img tag or background css.
2) What is the better approach for this kind of issues (should i ask the designer to give me the full background with all elements?)
The last thing i tried is using the img tag which was fine until i added some text with z-index to be on top of the image. i used position: absolute and position:relative in order to insert the elements on top of the background but that scramble everything.
Here is the html:
<div class="main-page-container">
<div class="join-company-container">
<img src="assets/img/photo-bg.jpg" class="responsive" alt="Standing">
<app-join-company class="app-join-company"></app-join-company>
</div>
<div>
<img src="assets/img/rectangle-fill-left.svg" class="responsive-image-left" alt="Smiley face">
</div>
</div>
Here is the css:
.main-page-container {
height: auto;
}
.responsive {
width: 100%;
height: auto;
z-index: -1;
position: absolute;
}
.responsive-image-left {
width: 29.2%;
height: auto;
z-index: -1;
}
.app-join-company {
position:relative;
z-index:1;
}
** app-join-company - is the component that has the text + other elements on top of the first background.
Please note that you don't have any class app-join-company . Only a component called like that (you only have class join-company-app ). I am guessing there is the text. But the text is not actually positioned relative due to the typo.
Also you don't use the class responsive-image-right anywhere.
In adition to this z-index only works on positioned elements(position: absolute, position: relative, position: fixed, or position: sticky). So it won't work for .responsive-image-right or .responsive-image-left.
Inside the body, pass the urls of the background images separated by commas, set the size of each image in the background-size property (separated by commas). Position the background images as needed using the background-position property by setting the top/bottom and left/right for each image (the first value sets the position of the first image and so on).
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background-position:
top 16vh left -9vw,
top 77vh left 24vw,
top -30vh right -10vh,
top 91vh right 8vw,
bottom -126vh left 0em
;
background-size: 30%, 20%, 56%, 25%, 100%;
background-repeat: no-repeat;
background-image:
url('/assets/images/img1.svg'),
url('/assets/images/img2.svg'),
url('/assets/images/img3.svg'),
url('/assets/images/img4.svg'),
url('/assets/images/img5.svg')
;
}
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/
I have setup streched background on the homepage of https://picup.it through the class
<div class="bg-background">
Which is defined as below:
.bg-background {
height: 100%;
}
.bg-background:after{
background: url({% static "images/picup-bg-01.jpg" %}) no-repeat;
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
};
However, it looks slight different on localhost. In production (picup.it) background image is stretched to the screen size - you can observer that after scrolling down a div with panel is going out of the background image.
On localhost however, background image covers full div and goes below the scrolling - until the place where div ends.
Why? Same with Chromium and Firefox.
add a background image to your body and fix that image
body
{
background: #fff url(/static/images/picup-bg-01.jpg) no-repeat fixed;
}
try this syntax instead
.bg-background {
background:url({% static "images/picup-bg-01.jpg" %}) center no-repeat;
height:565px; /* just pick a random height */
width:100%;
position:absolute;
opacity: 0.6;
background-size:100%;
z-index: -1;
}
It may also due to you didnt specify a height, thus it scaled differently.
second explanation, upon inspecting your html dom struture you did.
<body>
<div class='bg-background'>
<!--- html content -->
</div>
</body>
should be this instead
<body>
<div class='bg-background'>
</div>
<div id='body-content'>
<!-- html content -->
</div>
</body>
Do you have any browser extension? It might be CSS code is being injected into the page.
Second idea:
You could try changing your code into:
background-image: url('images/picup-bg-01.jpg');
for one, and keep:
background-size: 100%;
content: "";
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
EDIT:
If you use the Tryit Editor from the w3schools website, you'll see that your CSS code appears exactly as it does on your website (with the unstretched height), whereas using background-image in the same editor does provide you with the expected 100% height size.
EDIT #2:
Actually, it's not exactly what I said while writing EDIT #1. If I use your style code for the body of the page in the editor I get what you currently have on your website. If I use it in a div, however, it is properly scaled.
The code I provided seems to be working on both scenarios, though.
I am looking for some help. I have built a site where I want to have a patterned background image (works fine) but, I want to have a border image on top of the background image across the top.
I have tried using position: absolute and setting the z-index on each element but each time it cuts the background image in half and doesn't overlay at all.
Help!
Here's the code I have so far. I am new to coding so excuse any poor code!
body {
color:#787371;
background:url(images/line-top.png) repeat-x top;
position: absolute;
z-index: 1;
}
#bodychild {
background:url(images/bg-body.jpg);
border:0;
position: absolute;
z-index: 10;
}
use multiple backgrounds:
body {
background:
url(http://subtlepatterns.com/patterns/dark_fish_skin.png) center top repeat-x,
url(http://subtlepatterns.com/patterns/food.png) center top repeat;
}
more info: http://css-tricks.com/stacking-order-of-multiple-backgrounds/
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.