Hi,
I’m trying to place a/two background images on a page which has a grid covering the majority of the page. When I do, it appears the images are block elements and the grid won’t sit above them. My image are at the top of my page and my grid is pushed down to make space for them.
Is this a limitation of CSS/PG or is it more likely my code which is wrong? if my code, any ideas where I’ve gone wrong?
Thanks
are you using CSS to bring in the background image or are you putting it into the html?
CSS should not change the flow, but if you are using html then the browser will try to “do” somthing with that img element.
I’ve got it in my css file.
.html file:
< body>
< div class=“bgImgDesktop”>
< div class=“main”>
< nav class=“nav”>
.css file:
.bgImgDesktop {
background-image: url(‘images/BridalBWDoorway.jpg’);
mix-blend-mode: screen;
filter: saturate(0%);
opacity: 0.5;
filter: alpha(opacity=50);
background-position: 92% 0px;
background-repeat: no-repeat;
background-size: auto 75vh;
height: 75vh;
}
those last two size statement might be stepping on each other and the position statement may be at play too.
what element in the html is this .bgimgdesktop class applied to?
what sizing is put onto that element?
just throwing out ideas
I’ve updated my previous post because the HTML tags were interfering with the post.
I want the image to be 75vh high and to keep the aspect ratio.
use “cover” and only set the height on the html element then, otherwise it might be over constrained.
You can enter code into the forum by using a series of three tilda ``` marks at the beginning and end of the code, and it will appear as code. For example…
< body>
< div class=“bgImgDesktop”>
< div class=“main”>
< nav class=“nav”>
.css file:
.bgImgDesktop {
background-image: url(‘images/BridalBWDoorway.jpg’);
mix-blend-mode: screen;
filter: saturate(0%);
opacity: 0.5;
filter: alpha(opacity=50);
background-position: 92% 0px;
background-repeat: no-repeat;
background-size: auto 75vh;
height: 75vh;
}
So things still aren’t working for me. Having found the following: See the penultimate pen I have tried to implement this into my design. My code is now:
<head>
</head>
<body>
<div class="main bgImage">
<nav class="nav">
</nav>
<section class="landingPage">
</section>
</div>
and
body {
margin: 0;
padding: 0;
font-size: 16px;
font-family: OratorStd, abel;
color: var(--ATP_Lt_Grey);
}
.main {
height: 100vh;
width: 100vw;
position: relative;
}
.landingPage {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 3fr 1fr 100px;
grid-template-areas: 'Title' 'ButtonsBoxes' 'Signposts';
grid-gap: 0;
height: 90vh;
color: var(--ATP_Lt_Grey);
}
.bgImage {
background-image: url('Images/image1.jpg');
background-repeat: no-repeat;
background-size: contain;
}
.bgImage:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100vh;
background-image: linear-gradient(to bottom right, var(--grad_1), var(--grad_2));
background-color: fff;
mix-blend-mode: screen;
filter: saturate(0%);
filter: alpha(opacity=50);
opacity: .5;
}
.bgImage > * {
z-index: 10;
}
The result is a full opacity colour image in the right place but with no linear gradient covering the landing page section that should overlay the image. The image should also be half opacity and blended in screen mode with colour image and my gradient.
Its worth noting that the linear background and the screen mode blend do work on the image when done as separate divs and not using the ::before or ::after, however, this produces an effect where the image pushes the content of my landing page down to the bottom edge of my background image and won’t overlap.
Any further help would be greatly appreciated.
Thanks
using cover will give you greater flexibility to manipulate and size the element without affecting the image.
when taking code from articles like this, and they don’t work… it helps me when troubleshooting sometimes to strip it back down to bear essentials and build my way back to the example in smaller steps.
PG is great at helping you do that by commenting out selected things to see what effect they have.
also, it’s ok when troubleshooting to repeat your selectors for each new rule to give you greater control for when (and in what order) to implement them.
that way you can see which new addition is breaking the layout.
A good suggestion and one I’ve tried. I’ve had the background working ok with my previous iteration of my landing page but the page didn’t have a grid on it. Perhaps I’m destined to use flexbox instead, although I’m loathed to do so as I don’t find it as easy to use - although it may end up giving an as good, if not a better result.
Thanks for your response.
i think one of the limitations of grid (by design) is that you can’t style the grid itself, so yeah trying to put a background image on it would be futile.
generally want to use flexbox within your grid elements tho, so getting comfortable with display: flex is not a waste of time.
Don’t get me wrong, I agree it’s not a waste of time, but for a full page with multiple elements on multiple cross axis’ makes it quite a complicated beast I feel is more suitable to a display:grid solution.
My background is being applied in the parent div to my landing page section which has the page grid on it. Is that still a potential cause of the issues?
my still fledgling understanding of grid is that you CAN have a grid within a grid, that’s not an issue.
but getting a background to show behind a grid is a problem.
perhaps you need a separate div for the background and then put your div with the grid on top of that… so you don’t have the background and grid fighting it out on the same element.
it’s worth a shot.
UPDATE:
I’ve now become aware of the stacking order and how that affects my issue.
For the gradient to be on the top and the image below, I need to define the gradient first and then the image:
background-image: linear-gradient(to bottom right, var(--grad_1), var(--grad_2)) url('images/image_1.jpg;
but I now struggle to apply my desaturation and opacity filters to my image separately to the gradient. If I do it all together I get a desaturated, low opacity gradient too, which is not what I want. So my question is now
How do I apply my desaturation and opacity filter to my background-image before the result is blended with my linear gradient?
I have tried the ::after pseudo selector but this doesn’t work:
.bgImage {
background-image: linear-gradient(to bottom right, var(--grad_1), var(--grad_2));
width: 100vw;
height: 100vh;
background-blend-mode: screen;
background-position: left top;
}
.bgImage::after {
content: "";
width: auto;
height: 75vh;
background-image: url('Images/BridalHair_h720_72dpi.jpg');
background-color: var(--grad_1);
filter: saturate(0%);
filter: alpha(opacity=50);
opacity: .5;
}
Anyone got any ideas how I can achieve this multi stage affect?
Why use before and after when using grid ? Set your effects in divs set to postiion relative. Do the same with the background image. You can then adjust z-index on them to bring forward or backward. Use line based postioning or/and name area positioning for x y positioning of each element. Put anything above this in a containor set to relative for your text, buttons etc. and the top z-index postion relative again.
@BeyondBeta Requesting update please: Did the above suggestions (or any others) solve your issues? (Speaking as someone also working with a large background image in grid.) Thanks
i just went over the CSS Grid tutorial on the PG site again to see if i’d missed anything from my first go at it last year and near the end it shows how to place an image “behind the grid” so to speak. i’d forgotten how this was a possibility and it does offer some creative opportunities.
using named lines and z-order you can position an image behind other elements on the same grid… so it looks as tho there is a background image on the grid element (or part of it).
ur still limited to a rectangular area (no L shapes), but with z-order you can stake things so it looks like more than a simple tiles arranged on the screen. Grid is cool.
Thanks @droidgoo for confirmation that I’m on the right track as I also work through the Summer Nights / CSS Grid tutorial, hoping that was the best way to accomplish what I’m trying to do: Place a full-screen image into background with type/headline and nav elements in front (z-order). Grid seemed like the right way to go.
I was wondering how this worked out for BeyondBeta
I was also thinking of adding similar (but different) effects as BeyondBeta mentioned: I hope to figure out some animation things for the first time (such as to make background image (of landscape/sunset shot) pan slowly sideways in a KenBurns-like effect, after which second layer of solid black slowly transitions from zero to full transparency for a fade-to-black effect on the photo.) Probably simple stuff, but all new to me.