search

creativetimofficial / ct-light-bootstrap-dashboard-pro-react

LBD Pro React Version
20 stars 8 forks source link

[Bug] Main Content Image is not scrolling with long content renders #46

Closed ruegreen closed 5 years ago

ruegreen commented 5 years ago

Version

1.1.0

Reproduction link

https://Igotnolink.com

Operating System

MAC

Device

Laptop

Browser & Version

All

Steps to reproduce

When I use a background image provided by the template, if my main content is longer in render than the image size I get white spaces at the bottom. Is there a way to force the image to always be .. behind the main content and not allow the image to stay static and scroll up and off the page?

What is expected?

background image on main content area should not scroll off the page ever.

What is actually happening?

background image scrolls up until white spaces show up on the bottom of the page.

Solution

Additional comments

einazare commented 5 years ago

Hello there, @ruegreen ,

Thank you for your interest in working with our products. I can see that everything works fine on my end: https://we.tl/t-DLC2ggXieC Could you please detail your issue?

Best, Manu

einazare commented 5 years ago

Also, the link you have provided does not work.

ruegreen commented 5 years ago

If I place one of your background images on a page and I render content on top of it...if the content is longer than the image length...once I get the bottom of your image with my content say in a card either the image is repeated "tiled" or it goes to a white background. It could be how I am setting up the image for the page, is there some guidance on how I should set the background image on a page so it always scrolls behind my foreground components ? I am trying to place a background image behind content rendered in say dashboard.jsx, not the sidebar but the main content panel. The code I am using to do this is:

<div className="main-content" style={{ backgroundImage: "url(" + require("../../assets/img/" + "matrix.jpg") + ")" }}>

Your original code does not place a background image in the main content pane, it simple does just this:

<div className="main-content">

einazare commented 5 years ago

Hello there, @ruegreen ,

Now I get what you are trying to achieve. To be honest, our product was not thought to work this way, but I figured out a solution for you:

<div className="main-content" style={{backgroundImage: "url("+require("assets/img/full-screen-image-1.jpg")+")", backgroundSize: "cover",
    backgroundPosition: "center center"}}>

Hope this helps.

Best, Manu