Please, how do i resize the logo and make the background transparent

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome.min.css">

<div class="page-header">
         <header id="header">
     <div class="logo">
           <img 
         id="header-img"
         src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/230_Nike_logo-512.png" alt="Nike logo"/>
           </div>
           
        <nav id="nav-bar">
             <ul>
               <ol><a href="#main" class="nav-link">Main</a></ol>
               
                 <ol><a href="#video" class="nav-link">Video</a></ol>
   
               <ol><a href="#shoe" class="nav-link">Shoes</a></ol>
               </nav>
             </header>
            
        <section id="#main">
          <p> Would you like to know more? </p>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input id="email"
                   type="email"
                   name="email"
                   placeholder="Enter your email" required/>
            <input id="submit"
                   type="submit"
                   name="submit"
                   value="Get Started"/>
          </form>
             </section>
             
             <section id="#video">
               <iframe
                 id="video"
                 height="315" src="https://www.youtube.com/embed/WA4dDs0T7sM?rel=0&amp;controls=0&amp;showinfo=0"
                       frameborder="0"
                       allowfullscreen
                       ></iframe>
             </section>
             
             <section id="#shoe">
               <img id="shoe"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsQGwBg9wSNl0vu3Lj6j-U_I0ePgcGpftuZQ&usqp=CAU" alt="Air Max"/>
               <img id="shoe"
                    src="https://i.pinimg.com/originals/c9/ee/c8/c9eec8a42500de8ce903d027681bf6e8.jpg" alt="Air Force"/>
               <img id="shoe"
                    src="https://i.pinimg.com/originals/d8/1d/70/d81d70c2228d0d15fbed0d9f3a8c0e2a.jpg"
                    alt="Air Force"/>
             </section>
                   
      <div  class="footer">
       <footer id="link-org">
         like to know more? check it out on <a href="https://www.nike.com/">Nike</footer>
         </div>
           </div>
.page-header{
  background: #C0C0C0;
}

#header{
  position: fixed;
  width: 97.5%;
  margin-top: -20px;
  height: 60px;
  background: #90ee90;
  margin-bottom: 10px;
}
.logo{
  position: absolute;
  background-color: transparent !important;
}

Please share your HTML as well.

<link rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome.min.css">

<div class="page-header">
         <header id="header">
     <div class="logo">
           <img 
         id="header-img"
         src="https://cdn4.iconfinder.com/data/icons/logos-and-brands/512/230_Nike_logo-512.png" alt="Nike logo"/>
           </div>
           
        <nav id="nav-bar">
             <ul>
               <ol><a href="#main" class="nav-link">Main</a></ol>
               
                 <ol><a href="#video" class="nav-link">Video</a></ol>
   
               <ol><a href="#shoe" class="nav-link">Shoes</a></ol>
               </nav>
             </header>
            
             
        <section id="#main">
          <p> Would you like to know more? </p>
          <form id="form" action="https://www.freecodecamp.com/email-submit">
            <input id="email"
                   type="email"
                   name="email"
                   placeholder="Enter your email" required/>
            <input id="submit"
                   type="submit"
                   name="submit"
                   value="Get Started"/>
          </form>
             </section>
             
             <section id="#video">
               <iframe
                 id="video"
                 height="315" src="https://www.youtube.com/embed/WA4dDs0T7sM?rel=0&amp;controls=0&amp;showinfo=0"
                       frameborder="0"
                       allowfullscreen
                       ></iframe>
             </section>
             
             <section id="#shoe">
               <img id="shoe"
    src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQsQGwBg9wSNl0vu3Lj6j-U_I0ePgcGpftuZQ&usqp=CAU" alt="Air Max"/>
               <img id="shoe"
                    src="https://i.pinimg.com/originals/c9/ee/c8/c9eec8a42500de8ce903d027681bf6e8.jpg" alt="Air Force"/>
               <img id="shoe"
                    src="https://i.pinimg.com/originals/d8/1d/70/d81d70c2228d0d15fbed0d9f3a8c0e2a.jpg"
                    alt="Air Force"/>
             </section>
                   
      <div  class="footer">
       <footer id="link-org">
         like to know more? check it out on <a href="https://www.nike.com/">Nike</footer>
         </div>
           </div>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

To help you see how you have your .logo element defined add the following line border: solid 1px red.

Doesn’t seem to be what you want does it?

Try having the class on the img rather than the div. Have you tried using a max-width with the .logo.
When I make these two minor changes I think I’m getting what you’re looking to do.

Screen Shot 2021-06-11 at 10.33.17

what should the max width be set to

tried this and it worked, thanks

1 Like

I have a question, does an artistic documentation ( about an artist ) count as a technical documentation

I’m not quite sure what artistic documentaton (about an artist) means. I’m not trying to be rude but it sounds like a long tribute page. I’m just not sure what you mean.

Look at some of the user stories you’ll be required to meet when making this page. Will you be able to include <code> snippets in an artistic documentation?

In programming circles, you’ll hear conversations regarding (technical) documentation in reference to explaining an API, a library, project contribution, etc. Reading and writing good documentation is an important skill and doing this project about a code related subject gives you a good reason to go do some research about the tools you are learning to use.

so artistic isn’t part of it. Great

<main id="main-doc">
  <section class="main-section" id="introduction">
    <header> INTRODUCTION </header>
    <article>
    <p> Hello Everyone, my name is Al-raheem Great but you all probably know me as Grizzy Grae. I am an artist, a song writer, alot of things actually but I am not going to talk alot about those things right now. This is all about the artist in me that I want you all to know about.
      <ul>
        <li> I am a self taught artist, an Illustrator, and a Designer.</li>
        <li> I create worlds. </li>
        </article>
      </section>
    
    <section class="main-section" id="what_is_art">
      <header> WHAT IS ART? </header>
      <article>
        <p> Art is a concept, its is a believe, it is the expression or application of human creative skill and imagination, typically in a visual form such as painting or sculpture, producing works to be appreciated primarily for their beauty or emotional power.
          <p> Art, in its broadest sense, is a form of communication. It means whatever the artist intends it to mean, and this meaning is shaped by the materials, techniques, and forms it makes use of, as well as the ideas and feelings it creates in its viewers . Art is an act of expressing feelings, thoughts, and observations. </p>
        <ul>
          <p> In simpler terms:
            <li> It is a skill acquired by experience, study, or observation.</li>
            <li> It is an an occupation requiring knowledge or skill</li>
            <li> It is the conscious use of skill and creative imagination especially in the production of aesthetic objects.</li>
          <p> and so on.</p>
          </article>
        </section>
      
      <section class="main-section more-than-this" id="my_arts">
        <header> MY ARTS </header>
        <article>
          <p> Art is one of the few things that I am passionate about, I get so much peace and serenity just being able to draw and paint cause it feels like every time I do, I pour my heart and soul into it.</p>
          <p> Here are some of my many masterpieces:- </p>
          </articles>
          <div class="cover">
          <div class="art">
            <figure>
        <img id="my-art" src="https://cdna.artstation.com/p/assets/images/images/037/258/904/large/great-al-raheem-nolite-grae1.jpg?1619911774" alt="grizzy"/>
            <figcaption> "There is no light, just less darkness" </figcaption>
            </figure>
          </div>
          
          <div class="art">
            <figure>
              <img id="my-art"
                   src="https://cdnb.artstation.com/p/assets/images/images/037/258/615/large/great-al-raheem-dont-grae2.jpg?1619910660" alt="grizzy"/>
              <figcaption> "A modern renaissance" </figcaption>
            </figure>
          </div>
          
          <div class="art">
            <figure>
              <img id="my-art"
                   src="https://cdnb.artstation.com/p/assets/images/images/037/259/353/large/great-al-raheem-cyberpunk-santino.jpg?1619913210" alt="grizzy"/>
              <figcaption> "Cyberpunk Santino" </figcaption>
            </figure>
          </div>
          </div>
          
          <div class="art">
            <figure>
              <img id="my-art"
                   src="https://cdna.artstation.com/p/assets/images/images/037/259/624/large/great-al-raheem-beros-2.jpg?1619914419" alt="grizzy"/>
              <figcaption> "Beros" </figcaption>
            </figure>
          </div>
          </div>
    </section>

I just spent the last few hours of my time doing this for nothing

Not for nothing. Maybe you can use it for something else. A project that’s not FCC related for instance.

On a side note, remember an id must be unique within the document.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.