Forum customization, hero etc

pupsik

Braden I'm color blind.

color:#A8C3BC;

Braden

pupsik Just clean color! mad u want me to catch laugh illness haha

Braden

Justoverclock i think i might have found a solution to as why the image was not responsive on your site. try to put this on css

.Hero {
background: url(https://i.postimg.cc/9FnH6RBK/208.jpg);
background-repeat: no-repeat !important;
background-size: cover !important;
color:#87c7c4;
}

Justoverclock

Braden not work 🙁

it works like this:

.Hero {
background: url(url/head.webp);
background-repeat: no-repeat !important;
background-size:contain !important;
background-position:center;
color:#ffffff;

}

but if i resize the windows....is broken....so i don't know

Justoverclock

Good, I will try in a few minutes

Braden

Justoverclock try to make the image size at least below 30kb and try

remember big imgs also affect seo speed

Justoverclock

Braden i can do this, but this will solve the responsive issue?

Braden

Justoverclock whats the pixel size of img? ( url/head.webp )
Its horizontal should be atleast above 1000 x

Justoverclock

Braden 3048x206

pupsik

@Justoverclock it is hard to help you on issue, because you never have any code implemented on your website, for us to temper with.

Justoverclock

pupsik now is up, you're right (i need to make a staging copy)

pupsik

Justoverclock what is it you trying to do exactly? Image is there.

Justoverclock

as u can see on metabullet for example, if u resize the window of your browser, the background is totally responsive..

on my background this does not happen

pupsik

Define "responsive". Lots of meaning behind it.

Justoverclock

pupsik image is 3048x2016, on my monitor fullhd i can see only half image, if i resize the the browser windows, i can see 1/4 of the background

pupsik

Show me a print screen on your resized window. I see it just fine.

Justoverclock

now i've fixed first problem, background is centered with this:

.Hero {

background: url(https://i.ibb.co/d6B1GjX/head.webp);
height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
color:#ffffff;
}

this is the real image on my resolution, i can see only the middle part of that

but after that fix the text on the hero now is totally not centered

Justoverclock

i think i'm done with this:

.Hero {

background: url(https://i.ibb.co/d6B1GjX/head.webp);
height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
color:#ffffff;
box-shadow:inset 0 0 0 2000px rgba(77,105,142,0.7);
}

now i need to create the final background.

here the effect that i want...the image resizing and responsive like this header:
https://forum.justoverclock.it/

Braden

pupsik 🤣 dont be that guy , experience the new age!

Justoverclock
.hero-image {
background-image: url(https://forum.justoverclock.it/header2.jpg);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: inset 0 0 0 2000px rgb(38 12 12 / 10%);
}

pupsik

I'm totally lost.

You want image to be an image in background that it background on a resized screen, that is responsive and shows as an image, that is centered.

But hey, glad you figured it out, whatever it is you were trying to do 🙂

« Previous Page