Css media

How to Add a Header Image – HTML & CSS – SitePoint Forums

That’s what I did, how could I fix it?

or, is it okay with you?

https://jsfiddle.net/pebrfh6o/

.ratio-keeper2 {
  position: relative;
  height: 0;
  padding-top: 42.85%;
  margin: auto;
}

.header {
  margin: auto auto 20px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  background: url("https://i.imgur.com/WWo2qrS.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid red;
}
  


If my eyes aren’t deceiving me, you could probably do it like this with an element.

/*
.ratio-keeper2 {
  position: relative;
  height: 0;
  padding-top: 42.85%;
  margin: auto;
}
*/
.header {
  position: relative;
  margin: auto auto 20px;
  max-width: 640px;
  border: 21px solid;
  border-radius: 12px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  background: url("https://i.imgur.com/WWo2qrS.jpg");
  background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;
  aspect-ratio:320 / 137;
    outline: 1px solid red;
    outline-offset:-21px;
}

/*
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  outline: 1px solid red;
}
*/

I think it looks the same but everything looks black with my eyes so maybe I missed something



1 like

https://jsfiddle.net/92dqj16f/
padding-top: 42.85%;

100 / 21 x 9 = 42.85%

aspect-ratio:21 / 9; was the aspect ratio I was using, and it works here too.



1 like

I just grabbed it directly from devtools.

Screenshot 2022-10-31 at 21.30.02

= 42.8125%

Yes but the render size was 320/137 so I kept it the same. You won’t notice any difference and 21/9 is easier to remember.

Why did you leave ratio-keeper2 in place? It’s not used anymore.

  



1 like

If red is the header image, how do you fill the green space with the red background?

How come it doesn’t cover the whole area?

What would be adjusted in the code to make this happen?

https://jsfiddle.net/d7zxesku/2/

.ratio-keeper2 {
  position: relative;
  height: 0;
  padding-top:  56.25%;
  margin: auto;
}

.header {
  margin: auto auto 40px;
  max-width: 1440px;
  border: 0px solid;
  border-radius: 0px;
  border-color: #000 #101010 #000 #101010;
  position: relative;
  background: red;
  /*background-position: 0 0;
  background-size: cover;
  background-repeat: no-repeat;*/
}

How could I keep

padding: 8px 8px:

On videos only?

It wouldn’t make sense I don’t think.

I was thinking of using media queries to adjust it, but that probably wouldn’t make sense either.

How do you apply left-right padding only to videos when they hit left and right of the browser screen?

But remove this padding from being applied to the header.

You can apply left and right margin to videos via media query once the browser width is the same size as the video + 16px (8px on each side). The media query would have a maximum width of 640px + 16px.

How would this be written in code?

I’m on mobile at the moment, so I can’t offer code snippets. You had examples of media queries in your other thread anyway.

You might even get away with just adding left and right margin to the ratio-keeper (iirc).

You have the header at a maximum width of 1440 pixels, so it can’t always go edge to edge on larger screens unless you remove the maximum width.

Assuming you want a maximum width of 1440 pixels for the header, you can add a media query like this to make the header hit the viewport at smaller sizes.

for example

@media screen and (max-width:1456px){
  .header{margin-left:-8px;margin-right:-8px;}
}

This assumes that the header is inside .container because its .container is providing the padding.

For example, you can just move the header outside the container and then you don’t need a media query at all.



1 like