Question 46056 in CSS Question posted in
Some basic documentation can be found here.

Background Image for Main Section – CSS

I’m writing a React web application and I also use Chakra-UI. In general, I have a header, main section and a footer. Like this

https://jsfiddle.net/7cmasxLq/

<div id="header">
  header
</div>

<div id="main">
  Main
</div>

<div id="footer">
  Footer
</div>

and

#header {
  background-color: red;
}

#main {
  background-image: url('https://www.epfl.ch/schools/ic/wp-content/uploads/2019/02/EPFL-aerial-Rolex-towards-East-1920x1080.jpg');
}

#footer {
  background-color: yellow;
  padding: 10px 0;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

So the header is always at the top and the footer is always at the bottom.

Now for the landing page, I’d like to add a background image that spans the space between the header and the footer but I’m unsure what the best approach is, especially when using Chakra-UI.

In my example, I use background-image but I’ve read that one should rather use an image element but in the light of me using Chakra-UI, it’s even more confusing.

What is a good solution?

Tags:

2

Answers


  1. 0

    I created a simple example in the chakra-ui playground: play.chakra-ui.com

    So, you can use the Box component as main building block for header, main and footer. Also, you can add a background image to the Box.

    import { Button, Box } from '@chakra-ui/react'

export const App = () => {
   return (
    <Box display="grid" gridTemplateRows="auto 1fr auto" minHeight="100vh">
      <Box id="header" bg="red">
        Header
      </Box>

      <Box
        id="main"
        bgImage="url('https://www.epfl.ch/schools/ic/wp-content/uploads/2019/02/EPFL-aerial-Rolex-towards-East-1920x1080.jpg')"
        bgSize="cover"
        bgPosition="center"
      >
        <Box>Main</Box>
      </Box>

      <Box id="footer" bg="yellow" py="10px" position="fixed" left="0" bottom="0" width="100%" textAlign="center">
        Footer
      </Box>
    </Box>
  );
}
    Login or Signup to reply.
  2. 0

    This isn’t Chakra specific, but the problem is that your main content isn’t filling the space – it’s only as tall as the content within it.

    To get it to stretch and fill the space you could use flexbox:

    body, html {
  /* Remove any margins so wrapper takes all space */
  margin: 0; 
}
.wrapper {
  /* full height the wrapper, and flex col so it's vertical */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  background: yellow;
}

.content {
  /* flex-grow the content so it takes any empty space in the wrapper */
  background: blue;
  flex-grow: 1;
}

.footer {
  background: green;
}
    <div class="wrapper">

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>

</div>

    as for your background-or-image question, i prefer to use backgrounds in this case – that’s what this is at the end of the day! plus, if the background doesn’t load in you don’t end up with an ugly broken image icon appearing

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search