Question 44829 in Html Question posted in
Some basic documentation can be found here.

Center CSS grid content and create background image – Html

I have been stuck on this for quite some time and I am new to css in general. My goal here to to make a 3 column layout where the first and last columns are empty, and they will serve as the margin (not sure if that is the correct word since I know there is a margin property) for the page. In the center column I am trying to put a flexbox for each row to center a title, quote, and slogan. Artist credits will be displayed in the bottom right of the middle column. However, I have noticed that the content is never centered on my monitor and I have not idea why. Additionally, I cannot seem to figure out how to make a background image span the whole container or center column. I was hoping the content (title, slogan, quote, artist credits) could be on top of the background image and that the background image could have a max width similar to the center column. Here is some code (I commented out the background image stuff for now to see spacing):

html

<section class="welcome">
    <div class="welcome-container">
        <div id="welcome-title">Some Title</div>
        <div class="welcome-slogan">Slogan</div>
        <div class="welcome-quote fst-italic">"A quote" -Person</div>
        <div class="artist-credit">Image by <a href="https://google.com">Artist</a></div>
        <!-- <div class="welcome-cover"><img src="/images/welcome_image_bw.png"/></div> -->
    </div>
</section>

css

.welcome {
    z-index: 2;
}

.welcome-container {
    display: grid; // make the homepage container a css grid (exclude header/footer)
    grid-template-columns: auto fit-content(1200px) auto; // 12 cols (max) and can style as desired
    grid-template-rows: 400px, auto, 100px, 100px; // title, slogan, quote, creds
    justify-content: center; // content is left to right
    
    z-index: 1;

    // background: 
    //     url("https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg") green
    //     scroll // fixed to keep img despite scroll
    //     no-repeat;

    // background-size: 20% auto;
}

#welcome-title {
    grid-column: 2 / span 1; 
    display: flex;
    justify-content: center;


    font-size: 60px;
    font-family: 'Roboto Mono';
    font-weight: 400;
    color: var(--color-dark);

    
}

.welcome-slogan {
    
    grid-column: 2 / span 1; 
    display: flex;
    justify-content: center;

    font-size: 28px;
    font-family: 'Roboto Mono';
    font-weight: 300;
    color: var(--color-med);
}

.welcome-quote {
    grid-column: 2 / span 1;
    display: flex;
    justify-content: center;

    font-size: 18px;
    font-family: 'Roboto Mono';
    font-weight: 300;
    color: var(--color-dark);
}

.welcome-cover {
    grid-column: 1 / -1;
    position: relative;
    width: 100%; // make sure doesnt exceed page horizontally
    height: 100%;
    object-fit: cover;
    z-index: 0; // image in background
    background-color: var(--color-dark); // in case img doesnt load
}

Here are some screenshots to show how the page is not aligned:
fullscreen

fullscreen ruler

fullscreenn grid

To summarize, I am trying to accomplish the following:

  1. How to center the center column of the grid? How can I set the max width of this center column (I tried fit-content()). Why are there extra grid cells appearing in the inspect element panel?
  2. How to set a background image inside of welcome-container? I tried in both css and html and I ideally want it to be responsive. I was thinking of later making a media query to stop the image from stretching if the container becomes wider than the image. Is this a good approach? Or should I instead make the image fill the center column and it can be limited by the max width there?
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the answer to 1. I ended up changing to a 5 column layout and then centering the content there with justify-content and text-align. However, setting a background image across an area of the grid is still a challenge.

    edit: I found an answer to 2, although not elegant. In the html I had to put an image tag not inside of a div and then follow how to make content overlap in a grid from here: How to overlay one div over another div and here: https://www.youtube.com/watch?v=-qOe8lBAChE&ab_channel=TraversyMedia


  2. 0

    It’s not the best idea to set up columns just to leave them empty. You can set margins/padding as part of the grid.

    As you asked for a 3 column grid, you may check the code snippet I’ve attached. For future reference, "text-align: center;" does the trick. When it comes to grids, I advise you to check the justify-self and align-self properties (mdn docs).

    I added some padding and borders to make it easier for you to see how everything is structured. You can get rid of that.

    .container {
  display: grid;
  padding: 10px;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid red;
  column-gap: 20px;
}

.column {
  border: 1px solid blue;
  text-align: center;
}

.center-column {
  background-color: yellow;
}
    <div class="container">
    <div class="column left-column"></div>
    <div class="column center-column">
      <h1 class="title">Some title</h1>
      <div class="slogan">Slogan</div>
      <div class="quote">Some quote</div>
      <div class="artist">Image by <a href="#">Artist</a></div>
    </div>
    <div class="column right-column"></div>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search