Question regarding making an image fit screen size.

Question regarding making an image fit screen size. - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Question regarding making an image fit screen size. (/showthread.php?tid=5419919)

Question regarding making an image fit screen size. - Lone - Sep 29, 2016

Ok so I designed a page in AI and am trying to move it into dreamweaver but am running into a few issues.

Here is the web design: Spoiler (Click to View)

The problem I am having is making the images fit the webpage so it stays even.. for instance if I were to take the css and put it in the image would not fit a 1920 x 1080 resolution and I would like it to stretch to fit the screen size.

I'm not even sure what I should be looking for, all I know is that I want the images to be centered and stretch to fit different screen sizes. If someone knows a good guide or video I would love to learn.

To see what I have so far you can visit the page if you want http://heinous.xyz/home.html

* - Two-Ton 21 - Sep 29, 2016

Try using background: url(images/background.jpg) center/cover no-repeat; if you aren't familiar with stylesheets, add this to your head section:

Code 
<style>

body

{

    background: url () center/cover no-repeat;

}</style>

* - Rushax - Sep 30, 2016

Put this in your stylesheet at the very top to get rid of any padding or margin for browsers.

Code 
*{

padding: 0;

margin: 0;

}

Inside the header div you've got the principle set up right. You just need to add another div inside of the container div.
From

Code 
<div class="bannerBg">

 <div class="logo">Heinous.xyz</div>

 </div>

to..

Code 
<div class="bannerBg">

      <div class="logo">Heinous.xyz</div>

      <div class="nav-wrap">

          <ul class="nav-menu">

              <li>Home</li>

              <li>Webm</li>

              <li>Music</li>

          </ul>

      </div>

 </div>

Then we'd need to apply certain attributes to tidy up our work (the nav will show as a list with bullets, pulling the nav bar to the right)

Code 
.nav-wrap{

float:right;

}

.nav-menu{

list-style-type: none;

}

.logo{

float: left;

}

Usul mentioned how to tackle the bg images so goodluck.