CODEWITHSUNDEEP
htmlcss
sunny
sunny

Reputation: 11

Trying to move image further down on page

Here is my code and the link:

(by the way I have tried everything such as adding an img and adding a position: 100%; but nothing is working)

http://dash.ga.co/mcampb/build-your-own-personal-website


body {
  text-align: center;
  background: url("https://i.imgur.com/YGc2Dtx.gif");
  background-size: cover;
  background-position: center;
  color: white;
  font-family: chiller;
}

p {
  font-size: 52px;
}

input {
  border: 15;
  padding: 10px;
  font-size: 18px;
}

input[type="submit"] {
  background: green;
  color: white;
}
<body>
  <img src="https://i.imgur.com/wDVrcNim.jpg">
  <p> I'm Mugdea, a NYC horror writer. Say boo!</p>
  <input type="email" placeholder="Your email">
  <input type="submit"> enter code here
</body>

I have tried to figure out how to move the image down on the page, but i keep moving the background image when I am only trying to move the image down. unfortunately, i cannot seem to find code anywhere that the image code is further down on the page.

Upvotes: 1

Views: 763

Answers (3)

Jamie Buttons Coulter
Jamie Buttons Coulter

Reputation: 513

I'm failing to see exactly what it is you are trying to achieve here. It's probably worth you taking a look into the CSS Box Model to understand how elements can be position on a page using margin and padding.

Here is a link. https://www.w3schools.com/css/css_boxmodel.asp

As for a solution to your question, I can really only speculate at this point. Based on what you have said in the comments, you feel the image is too close to the top & not close enough to the text.

For moving the top image away from the top of the screen, you would need to give it a margin-top of whatever amount you like.

img {
  margin-top: 50px;
}

For bringing the image closer to the text. You have 2 options, either give the image a negative margin bottom, or change the margin top of the text. Like so:

This

img {
   margin-bottom: -10px;
}

Or this 

p {
  margin-top: 10px;
}

The final result would be something like this, using the latter of the options. 

body {
  text-align: center;
  background: url("https://i.imgur.com/YGc2Dtx.gif");
  background-size: cover;
  background-position: center;
  color: white;
  font-family: chiller;
}

p {
  font-size: 52px;
  margin-top: 0px; // Increase to move the image away from the top of the text
}

input {
  border: 15;
  padding: 10px;
  font-size: 18px;
}

input[type="submit"] {
  background: green;
  color: white;
}

img {
  margin-top: 50px; // Increase to move the image away from the top
}
<body>
  <img src="https://i.imgur.com/wDVrcNim.jpg">
  <p> I'm Mugdea, a NYC horror writer. Say boo!</p>
  <input type="email" placeholder="Your email">
  <input type="submit"> enter code here
</body>

Upvotes: 0

Yorick
Yorick

Reputation: 101

Could you specify your question a bit more. What do you mean by moving the Image down. You could move the image in the html, or use padding to make the space to the top or bottom a little more.

html, body {
    height: 100%;
}
body {
  text-align: center;
  background: url("https://i.imgur.com/YGc2Dtx.gif");
  background-size: cover;
  background-position: center;
  color: white;
  font-family: chiller;
}


p {
  font-size: 52px;
}

input {
  border: 15;
  padding: 10px;
  font-size: 18px;
}

input[type="submit"] {
  background: green;
  color: white;
}



.main {
    height: 100%;
    width: 100%;
    display: table;
}
.wrapper {
    display: table-cell;
    height: 100%;
    vertical-align: middle;
}
<body>
<div class="main">
  <div class="wrapper">
    <img src="https://i.imgur.com/wDVrcNim.jpg">
    <p> I'm Mugdea, a NYC horror writer. Say boo!</p>
    <input type="email" placeholder="Your email">
    <input type="submit"> enter code here
  </div>
</div>
</body>

Upvotes: 0

StefanBob
StefanBob

Reputation: 5128

I moved the image down by place it further down in the html

<!DOCTYPE html>
<head>
  <title>Mugdea</title>
  <style>
    body {

     text-align: center;
      background: url("https://i.imgur.com/YGc2Dtx.gif");
      background-size: cover;
      background-position: center;
      color:white;


      font-family: chiller;
    }
    p {
      font-size: 52px;
    }
    input {
      border: 15;
        padding: 10px;
      font-size: 18px;
    }
         input[type="submit"] {
         background: green;
          color: white;
             }
     </style>
   </head>
   <body>


         <p> I'm Mugdea, a NYC horror writer. Say boo!</p>
          <input type="email" placeholder="Your email">
        <input type="submit">
        
             <img src="https://i.imgur.com/wDVrcNim.jpg">

      enter code here</body>

Upvotes: 1

Related Questions