CODEWITHSUNDEEP
htmlcssbackgroundbackground-image
KalypsoTek
KalypsoTek

Reputation: 45

Create an alternate background style

I am looking to reproduce a style of site and I would like to do for the background like them that is to say alternate the design: printed circuit boards, dark gray backgrounds, printed circuit boards, dark gray fonts, but I do not see how to do in my case someone could help me please?

The site : https://hydra.bot/ (screen of what I want to reproduce : https://prnt.sc/13kmrkc) I attach below my code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Poseidon | The Perfect Discord Bot</title>
    <link rel="stylesheet" href="main.css">
    <link rel="icon" type="image/svg+xml" href="img/favicon.svg">
    
    <header class="topbar">
        <a href="#"><img class="header-logo" src="img/logo.svg" alt="Kurium Logo" href="index.html"></a>
        <nav>
          <div class="middle">
            <a href="invite.html">Invite</a>
            <a href="commands.html">Commands</a>
            <a href="documentation.html">Documentation</a>
            <a href="support.html">Support</a>
          </div>
          <div class="right"> <!-- Socials --> 
            <a href="/">Social 1</a>
            <a href="/">Social 2</a>
          </div>
        </nav>
      </header>


</head>
<body>
    <h1>The Perfect Discord Bot.</h1>
    <h2>Poseidon is the only Discord bot you'll ever need!</h2>
</body>
</html>


* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body, html {
    font-size: 16px;
    color: rgba(0, 0, .87);
    font-family: "Montserrat", sans serif;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    width: 100%;
    background-image: url(img/background.svg);
    background-color: rgba(62,62,62, 1);
}

.topbar {
    height: 80px;
    background-color: #fff;
    box-shadow: 0 8px 15px rgba(0, 0, 0, .05);
    display: flex;
    align-items: center;
    width: 100%; /* new */
}

.topbar nav {
    display: flex;
    width: 100%; /* new */
}

/* new class */
.middle {
  margin: 0 auto;
}
/* end new */

.topbar nav a {
    color: #9F9F9F;
    text-decoration: none;
    font-weight: 500;
    padding: 0 20px;
    display: inline-block;
    text-align: center;
}

.topbar nav a:hover, .topbar nav a.active {
    color: #000;
}

.header-logo {
    cursor: pointer;
    width: 25vh;
}

h1 {
     text-align: center;
     color: #fff;
}

I was thinking of creating a div containing my background in order to define a precise style in my css, but I never did that so I don't really know how to do it (How to do it the right way). For the moment I was trying in my css thanks to my body class but it's not famous. If someone has an idea I'm interested. I would like that it is responsive at most of course because I try to respect the responsive since the beginning of the creation of my site

Upvotes: 0

Views: 37

Answers (1)

Andrea Olivato
Andrea Olivato

Reputation: 2545

Your initial idea of using DIVs is indeed correct.

HTML

<div class="circuit"> Some content for the first part of the page</div>
<div class="dark"> Some content for the second part of the page</div>
<div class="circuit"> Some content for the third part of the page</div>

CSS

.circuit {
    background-image:url(URL_OF_THE_IMAGE);
}
.dark {
    background-color:#HEXCODE;
}

Upvotes: 1

Related Questions