Ask coding questions

← Back to all posts
why I'm unable see the background image and justify the text to right side? HTML-Css
Gamin8ing (0)

Hello, I'm making a discord bot plus its dashboard in python using HTML and CSS and I'm unable see any background image on the top-left and justify is also not working.

I didn't put the the repl.it package cuz its have all the discord secret token

Here is the code

*html code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Gamin8ing Bot Dashboard</title>
  <link href="https://fonts.googleapis.com/css2?family=Concert+One&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,[email protected],300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  <link rel="stylesheet" href="static/css/style.css">
  <scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="static/js/scripts.js"></script>
</head>
<body>
  <!---NavBar--->
  <nav class="navbar">
    <div class="inner-width">
      <a href="/" class="logo">
      <button class="menu-toggler">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-menu">
        <a href="#">Home</a>
        <a href="#">Features</a>
        <a href="#">G8 vs others</a>
        <a href="#">Server</a>
        <a href="#">Hello</a>
        <a href="#">Test</a>
      </div>
      </a>
    </div>
  </nav>
  
  <!--Home-->
  <section id="home">
    <div class="inner-width">
      <div class="content">
        <h1>
          Hi I, Gamin8ing, a
        </h1>
        <div class="sm">
          <a href="#" class="fab fa-facebook-f"></a>
          <a href="#" class="fab fa-twitter"></a>
          <a href="#" class="fab fa-instagram"></a>
          <a href="#" class="fab fa-linkedin-in"></a>
          <a href="#" class="fab fa-youtube"></a>
          <a href="#" class="fab fa-reddit"></a>
          <a href="#" class="fab fa-discord"></a>
          <a href="#" class="fab fa-patreon"></a>
        </div>
      </div>
    </div>
  </section>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ut corrupti neque veniam ipsa? Accusantium dolor est, amet alias soluta aspernatur quod laudantium odit. Quis quaerat praesentium a repellendus inventore, corrupti sunt exercitationem sint expedita id nihil nam, atque rem? Unde hic, labore possimus architecto quis numquam facere impedit suscipit at, soluta minima sint atque qui velit similique accusantium? Numquam beatae iure a corporis dolores eaque tenetur aliquam quibusdam reiciendis, inventore deserunt, officiis minima architecto accusamus saepe deleniti ex aut adipisci id nobis pariatur totam illo sunt ad? Nesciunt ab alias quis consequuntur numquam nemo illo explicabo amet tenetur adipisci! In, at rerum. Sint nam, optio, similique fugiat ab dolorem error animi minima necessitatibus deserunt ut. Quibusdam possimus culpa itaque?
  </p>
</body>
</html>

*css

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Ubuntu",sans-serif;
  box-sizing: border-box;
}

.navbar{
  position: fixed;
  background-color: red;
  width: 100%;
  padding: 30px 0;
  top: 0;
  z-index: 999;
  transition: .3s linear;
}

.inner-width{
  max-width: 1300px;
  margin: auto;
  padding: 0 40px;
}

.logo{
  width: 44px;
  height: 32px;
  background-image: url("G8_logo.png");
  background-size: contain;
}

.navbar.inner-width{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.menu-toggler{
  background: none;
  width: 30px;
  border: none;
  cursor: pointer;
  position: relative;
  outline: none;
  z-index: 999;
}

.menu-toggler span{
  display: block;
  height: 3px;
  background-color: #ffffff;
  margin: 6px 0;
  position: relative;
  transition: .3s linear;
}

.navbar-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  margin-left: 30px;
}

*logo

*what it looks

Help Me!!!

Comments
hotnewtop
JBloves27 (1883)

So number 1, you have some typos in your code:

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

This should be:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Number 2, you need some <br> tags to make the text visible, as it is hidden under the navbar. You should add the <br> tag right before the text.


Number 3, to make the logo visible as the background, you have to do this:

body {
  background-image: url(picture.jpg);
}

That should work for the background image.


Number 4, to make the text justified right, you should add the following to the <p> tag:

<p align = "right">Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae ut corrupti neque veniam ipsa? Accusantium dolor est, amet alias soluta aspernatur quod laudantium odit. Quis quaerat praesentium a repellendus inventore, corrupti sunt exercitationem sint expedita id nihil nam, atque rem? Unde hic, labore possimus architecto quis numquam facere impedit suscipit at, soluta minima sint atque qui velit similique accusantium? Numquam beatae iure a corporis dolores eaque tenetur aliquam quibusdam reiciendis, inventore deserunt, officiis minima architecto accusamus saepe deleniti ex aut adipisci id nobis pariatur totam illo sunt ad? Nesciunt ab alias quis consequuntur numquam nemo illo explicabo amet tenetur adipisci! In, at rerum. Sint nam, optio, similique fugiat ab dolorem error animi minima necessitatibus deserunt ut. Quibusdam possimus culpa itaque?</p>

That should work. Let me know if this works and you need any other stuff!

Gamin8ing (0)

@JBloves27 No that doesn't :sad: I want the navbar text (that are Home, Features, G8 vs others... to be right as in the css) and text below navbar I will fix that later and the image also won't show!! Should I remove G8_logo.png the _ ???

JBloves27 (1883)

Ok! So maybe add the following to the navbar:

<nav style="text-align: center">
  ...
</nav>

That should work, and you could add that style to the css.


For the image, do you have it in the files?
If yes, another question, is the image supposed to be the background, or a side logo?
If no, try downloading the photo, and inserting it in the files tab.

Nah, for now, keep the image, lets see if we can do something with it :)
@Gamin8ing

Gamin8ing (0)

Yes, the image is in files (of Repl.it, oc)
and yes navbar texts are working but why it did not work with the css file? and check the css file, why it is not doing so whch it was intended to do?
@JBloves27

JBloves27 (1883)

Ok, so is it supposed to be a logo? or part of the background?
Ok, it seems like you don't have any styling that actually affects the navbar to become justified right. @Gamin8ing

Gamin8ing (0)

The image will be a logo on top-left side, and yes I thinks it doesn.t have right, LOL
@JBloves27

JBloves27 (1883)

Sorry for the late reply, but anyways.
To make the logo on the top left, you should do something like this:

<img ... />

Then the css would be this:

img {
  float: left
}

This should work! :) @Gamin8ing

Gamin8ing (0)

Hey @JBloves27, sorry for late reply!
but I found a solution, instead of ../ in url() i typed / and it worked with a charm!

JBloves27 (1883)

Ah, ok! Glad you found the solution! @Gamin8ing

Gamin8ing (0)

Thanks for all your effort! And time too!🙏
@JBloves27