CODEWITHSUNDEEP
cssimagebackgroundbackground-imagebackground-color
Tunna182
Tunna182

Reputation: 343

Setting multiple backgrounds (picture at bottom of page and colour for the rest)

I have a picture with a margin on the left and right, and a colour transition in the middle (grey on the bottom, fading to black at the top).

I want to have the margins as 2 separate image files and a third image of just the colour transition in the middle (stretched from side to side). The aim is to prevent the side images from being stretched out of shape.

The bulk of my website is in a div, so when I add the images they appear below the content with nothing but white between them. As a workaround I have a single image background there, but it is always stretched out of shape and looks really bad.

How can I fix this?

my css so far:

   img#left {
     position: absolute;
     margin: 0% 88% 0% 1%;
   }
   img#right {
     position: absolute;
     margin: 0% 1% 0% 88%;
   }
   img {
     display: block;
     margin-left: auto;
     margin-right: auto;
   }
<table id='toolbar' width='100%' border='1px'>
  <tr>
    <td width='15%'>
      <a href='index.php'>
    HOME</a>
    </td>
    <td width='15%'>
      <a href='gamesearch.php'>
    FIND A GAME</a>
    </td>
    <td width='15%'>
      <a href='leaderboards.php'>
    LEADERBOARDS</a>
    </td>
    <td width='15%'>
      <a href='playerstats.php'>
    MY STATS</a>
    </td>
    <td width='15%'>
      <a href='contact.php'>
    CONTACT US</a>
    </td>
    <td width='12%'>LOGGED IN AS John Smith</td>
    <td width='15%'>
      <a href='logout.php'>
    LOGOUT</a>
    </td>


  </tr>
</table>
</div>
<div id="uptlogo">
  <img src="UPT logo.jpg">
  </image>
</div>

<body>
  <div class='sub'>
    <h1> Login </h1>
    <form action='playerlogin.php' method='post'>
      <input required type='hidden' name='formtype' value='login'>
      <br>

      <input placeholder='Username' name='username'></input>
      <br>
      <input placeholder='Password' name='password'></input>
      <br>
      <input type='submit' value='Sign in'></input>
    </form>
    <h1> Sign up </h1>
    <form action='playerlogin.php' method='post'>
      <input required type='hidden' name='formtype' value='player'></input>
      <input required name='firstname' placeholder='First 
    
    Name'></input>
      <input required name='surname' placeholder='Surname'></input>
      <br>
      <input type='password' name='password' placeholder='Password'></input>
      <br>
      <input required placeholder='Phone' name='phone' type='number'></input>
      <select name='gender'>
        <option value='Male'>- Gender -</option>
        <option value='male'>Male</option>

        <option value='female'>Female</option>
      </select>
      <br>
      <input required placeholder='E-Mail' type='email' name='email'></input>Your login details will be sent to this email address.
      <br>
      <input type='submit' value='Sign 
    
    up'></input>
    </form>
  </div>
  <img id="left" src="UPT side.jpg">
  </image>
  <img id="right" src="UPT side.jpg">
  </image>
Image enter image description here

Upvotes: 0

Views: 51

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 105933

You can indeed use multiple backgrounds and start from html , ... if i understood what you where looking for:

html {
  min-height: 100%;
  background: linear-gradient(to left, transparent 12%, gray 12%, gray 88%, transparent 88%), url(https://i.sstatic.net/FVSOQ.jpg) bottom left repeat-y, url(https://i.sstatic.net/FVSOQ.jpg) bottom right repeat-y
  /* set first value of background-position to your needs, update your gradient too */
  ;
  background-size: 100% 100%, 12% auto, 12% auto;
  background-color: #000;
}
body {
  margin: auto;
  width: 76%;
}
/* to demonstrate where content stands */

div {
  box-shadow: inset 0 0 0 1px white;
}
<div>to demonstrate content</div>

Upvotes: 1

Related Questions