Pinegrow Community Support Forum

Background-images and grid

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;
}
1 Like

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.