Kevin Powell - Community•5mo ago

Trying to get my backround and image neat but it wont work

38 Replies

RIZE Hobberz•5mo ago

i want the bg dark gray aswell when i try putting the background-color in *{} it changes the text background aswell

RIZE Hobberz•5mo ago

this is what happens

RIZE Hobberz•5mo ago

i though it was something like this

RIZE Hobberz•5mo ago

https://codepen.io/Dave-Goggs/pen/LYaLeay

Dave Goggs

CodePen

LYaLeay

...

Jochem•5mo ago

add this to your css:

body {
  background: #181818;
}

body {
  background: #181818;
}

You should use * {} sparingly, it's better to set things where you need them. The reset you have is alright, but don't put stuff like background color in there This would select any elements that are a child of some element and have a text attribute, it's not really something you'd want to do in general

RIZE Hobberz•5mo ago

And then for the twitch icon to appear in the center So its like got the same spacing around every side

Jochem•5mo ago

you've done some odd stuff to get everything positioned, if I'm honest. It's kinda hard to figure out why things are working the way they are in your example Right, so add this at the top of your CSS:

html {
  height: 100%;
}
body {
  background: #181818;
  height: 100%;
}

html {
  height: 100%;
}
body {
  background: #181818;
  height: 100%;
}

Then change the section selector at the bottom to this:

section{
/*   position: absolute; */
/*   top: 0; */
/*   z-index: -1; */
/*   filter: brightness(100%); */
  background: url(https://picsum.photos/800/300/);
  height:75%;
  width: 75%;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
}

section{
/*   position: absolute; */
/*   top: 0; */
/*   z-index: -1; */
/*   filter: brightness(100%); */
  background: url(https://picsum.photos/800/300/);
  height:75%;
  width: 75%;
  background-position: center;
  background-size: cover;
  margin: 0 auto;
}

You can remove the /* commented out */ things, I just put them in there because you probably don't want those. Position: absolute is kind of a last resort a lot of the time you can change the body selector I shared earlier margin: 0 auto; will set the top and bottom margins of the section to 0, then set the left and right ones to auto, which centers block level elements with less than 100% width if all you're doing is adding an image though, you may want to just use the <img> tag instead of using <section> with a background image or do you mean top and bottom as well, so centered free in the middle of the screen?

RIZE Hobberz•5mo ago

yeah

Jochem•5mo ago

try this

section {
  background: url(../Twitch.png);
  height:75%;
  width: 75%;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

section {
  background: url(../Twitch.png);
  height:75%;
  width: 75%;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

althepal78•5mo ago

did you fix it?

RIZE Hobberz•5mo ago

i want a gap between the navbar and the twitch logo @althepal78 u recon u can help with that?

althepal78•5mo ago

put a margin top or if you have a flex or grid you can put a gap: 1rem;

RIZE Hobberz•5mo ago

oh yeah cool then i want to make it so that the purple bit is cut so its only like 10 px above the words twitch

althepal78•5mo ago

Jochem•5mo ago

use paint and edit the image

RIZE Hobberz•5mo ago

like crop the image

althepal78•5mo ago

did you download the image?

Jochem•5mo ago

ms paint, the gimp, photoshop, google photos, krita, online tools... there's a thousand good ways to crop an image

althepal78•5mo ago

photoshop lmao paint, powerpoint your phone

RIZE Hobberz•5mo ago

now the image is very pixelated and ugly

RIZE Hobberz•5mo ago

Jochem•5mo ago

that's because you're stretching an image that is now much smaller

althepal78•5mo ago

dude how did you originally get it and why did you shrink it lol

Jochem•5mo ago

you have to find a higher resolution version of the twitch logo, or accept the purple borders being the size they are

althepal78•5mo ago

you can youtube how to crop an image

RIZE Hobberz•5mo ago

ive just done this my button styling isnt working

Jochem•5mo ago

it's best to make a new post. You can share the same codepen if you update it, but you'll have to describe the problem more than "doesn't work"

RIZE Hobberz•5mo ago

.button {
  background-color: red;
}

.button {
  background-color: red;
}

<!DOCTYPE html>
<html>
<head>
  <title>RLSp00ky Songs - Twitch</title>
  <link rel="stylesheet" type="text/css" href="Songs.css">
  <script src="https://kit.fontawesome.com/67c66657c7.js"></script>
</head>
<body>
  <input type="checkbox" id="check">
  <nav>
    <div class="icon"><b style="color: red;">RL</b>SpOOky <b style="color: red;">S</b>ongs</div>
    <div class="search_box">
      <input type="search" placeholder="Search...">
      <span class="fa fa-search"></span>
    </div>
    <ol>

      <li><a href="../index.html">Home</a></li>
      <li><a href="discord.html">Discord</a></li>
      <li><a href="twitch.html">Twitch</a></li>
      <li><a style="border-bottom:3px solid rgb(255, 0, 0)">Songs</a></li>

    </ol>
    <label for="check" class="bar">
      <span class="fa fa-bars" id="bars"></span>
      <span class="fa fa-times" id="times"></span>
    </label>
  </nav>

  </div>
  <section></section>
  <div class="button">
    <button>MASKED - RLSP00KY</button><br>
    <button>WHO? - RLSP00KY</button><br>
    <button>BROKE - RLSP00KY</button><br>
  </div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <title>RLSp00ky Songs - Twitch</title>
  <link rel="stylesheet" type="text/css" href="Songs.css">
  <script src="https://kit.fontawesome.com/67c66657c7.js"></script>
</head>
<body>
  <input type="checkbox" id="check">
  <nav>
    <div class="icon"><b style="color: red;">RL</b>SpOOky <b style="color: red;">S</b>ongs</div>
    <div class="search_box">
      <input type="search" placeholder="Search...">
      <span class="fa fa-search"></span>
    </div>
    <ol>

      <li><a href="../index.html">Home</a></li>
      <li><a href="discord.html">Discord</a></li>
      <li><a href="twitch.html">Twitch</a></li>
      <li><a style="border-bottom:3px solid rgb(255, 0, 0)">Songs</a></li>

    </ol>
    <label for="check" class="bar">
      <span class="fa fa-bars" id="bars"></span>
      <span class="fa fa-times" id="times"></span>
    </label>
  </nav>

  </div>
  <section></section>
  <div class="button">
    <button>MASKED - RLSP00KY</button><br>
    <button>WHO? - RLSP00KY</button><br>
    <button>BROKE - RLSP00KY</button><br>
  </div>
</body>
</html>

can u please tell me how to make a nice red bordered button with a red filling when i hover over it and in white text

Jochem•5mo ago

in a new post, sure

RIZE Hobberz•5mo ago

its not that deep bro

Jochem•5mo ago

don't call me bro please

RIZE Hobberz•5mo ago

ok homie idk what to call you im used to saying bro you know

Jochem•5mo ago

we try to limit posts to one topic, because if someone else might have a similar issue, it's impossible to find something buried three issues deep in a post about background images if the thing you're looking for is how to style buttons

RIZE Hobberz•5mo ago

fair enough just created a new thread

Gaming

Programming

Trying to get my backround and image neat but it wont work