How would I be able to position this text properly?

HTML-CSS
1

> Question

Im reworking on the tribute page project and Im stuck trying to set up the main flow of my website. I want to position text over the right portion of the header image (the black area).

> Bonus Points:

Im having a hard time figuring out how to properly use CSS grid. My main objective of this project is to split the webpage into 3 sections; the header - where I will have an image and header text overlapping the black portion of the image, the main section - where I will add either 1-2 subsections, one being the timeline and the other being an introduction into my subject for the project, the footer - where I will have closing information. When setting up css grid, I set up values but what happens in this case where the image I selected is actually larger than the grid section I set? I like how it looks right now, but I basically want to be able to set up pages more easily and learn how to position elements properly.

If anyone has useful links for css grid or anything related to css positioning of elements I would greatly appreciate it. Every time I come back to web dev, i find myself struggling with positioning elements.

Thanks for reading! I will link my project below, any help is much appreciated!

> Link:

2

If you want the image in the background you can use background in css and give it an opacity if you’re going to put text on top of an image.

flexbox will probably be easier to understand than grid and better to use for your cases

3

When I used background in css, I had some complications because of how I set up css grid (the image would zoom in completely to fit the width of the page, i set it up so the site wont scroll left to right). I will look into using flexbox like you recommended. I want the image to stay positioned exactly how its like now, but by using whatever method makes the most sense setting up the structure of the site.

4

Does this not work

  background:url(yoururl);
  background-size:cover;
1 Like
5

Im noticing now that my image isnt actually filling the container properly when I inspect element.

6

I think it is working properly but my CSS Grid is cutting off the image. Do you know how to set up grid responsively? So that the area for my header in this case fits perfectly with the image I want to use.

7

Its just about working but some of the image is cut out.

8

Did you save, because it still looks the same for me

1 Like
9

Yea I had, when you saved it did you remove the image element from the html? I tried adding the code you sent to header, body, .container and #header-img and all of them have a portion of the image cut out (I had done these on separate attempts).

10

If you’re referring to the bottom portion, then that’s because you need to give a bigger height
do something like height:100vh;

1 Like
11

what class are you putting this code within? Just to make sure Im setting it up properly.

12

maybe this will help


html, body , .container {
  margin: 0;  

}
html {
  background:url(someurl);
  background-size:cover;
  height:630px;
}
1 Like
13

Ok, I got this to work and yes it does accomplish keeping the image in that space. The thing is, I don’t think this method is ideal because it doesn’t adapt when I resize the page. When I zoom in and out the image is now locked to its background position, and the rest of the elements resize and ultimately cover up the image. Im really just stuck on this, its frustrating because I feel like it should be a simple task to layout the page with an area for a header, content, and footer that reacts and adapts to changes.

14

You’ll have to play around with the size attributes to get what you want

Alternatively you can do what you originally did and use position:absolute; to absolutely position the text elements and use Top,bottom,left,right though I tend to avoid positioning elements like this

1 Like
15

I got it after tinkering around for it. Exactly like you were just saying. I had used position: absolute and then position: relative for the parent class. I think used the top/bottom/right/left properties and set up my page from scratch. Im not longer using CSS grid and its working exactly how I want it. Thank you for the help

16

Check it out now, it’s coming along much better. I changed up a lot.

18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.