Correctly align backgrounds and images

[Mr.M]

Hi Dw.

I'm not a pro in web design and I've used CorelDraw to draw a website background which is a web page centered image which the web contents will be ontop of it. The problem I'm having is that it will loose the alignments if I you view it on a browser which is not maximized, and also if you open it with a phone browser as well its not aligned correctly. Anyone who can help me solve this problem. Here is it but the slide images are not being uploaded because of some technical issues I faced when trying to upload them. (http://mlungisi.0fees.us).

Thank you.

[ryantroop]

Your problem lies with a fundamental misunderstanding of how CSS works with the DOM.

You may want to read up on relative positioning, and how you center content in all its various forms.

In short - you will need to start wrapping each area in containers so that the child elements have something to be relative to. HTML/CSS has no concept of height, but it does have a concept of width - so when you start building a fluid layout you likely will need a container element that has a fixed width, position relative, and a margin of auto (which will allow it to fill in the sides).

Currently, your BODY tag is taking place of this "container" and has some funky CSS on it that is giving you your odd layout. While this is "fine", I wouldn't recommend it. Your HTML and BODY tags should probably be left alone, and the only styles applied are those to get rid of build in browser layouts.

Your HTML will need a bit of an adjustment just so you can start to control the elements you are trying to control.

For fluid layouts, you cannot (should not) have absolutely positioned elements at the top level as you are currently doing.

[Mr.M]

Thank you. But as for logo and the home page slider I've tried changing from absolute to relative but as for a logo the logo just got way big its almost filled the entire site.

Any sample you can provide to place the logo and the buttons, social network buttons and slider properly. I've also noticed that when I open the site with a mobile device and click order,or contact the form went outside the background body image at the bottom, how can I also fix this because on a computer it display correctly till you minimized the browser.

Thank you.

[Mr.M]

The problem I'm facing is that when I designed this website I previewed it on a maximized browser and now when I restore the logo appear to be fixed on one position, and yes I've forced(aligned) the logo and every other content in this site manually on a css and right now I've changed from absolute to relative and because the image just went far left I then on the css put this "left:200px; top:25px;) which displays the logo to a perfect place when the site is maximized but if I restore the site, the image appear to be fixed to 200px because its doesn't even move a bit when the background(page) moves to restore position of browser. If I change 200px to auto or inherit the logo just be fixed far left of the browser.

Any idea of how I can overcome this problem?

Thank you.

[gentlemedia]

The problem lies in the fact that you dropped in what is supposed to be your layout created with HTML tags & styled with CSS as a backgroud image.

You will have to convert that first to HTML & CSS before you want to add your content (navigation, logo, etc.) and to be honest it's a fairly simple layout to create only with HTML & CSS (no need for images), so it's a good way to start learning the trade.

[Mr.M]

@media are you referring to the background image? If so well I didn't know of a way to make something like the image (I created and used it as a background) in html and css. I know that had to set the margin to 0 of which I also did to center the background but also used the "left" tag to properly place the image.

So as you suggest I should change to html and css how will I create something like that using html & css?

Thank you.

[gentlemedia]

You will have to define first the building blocks (HTML elements and/or tags), so something like this:

wrapper for layout to center it on the page --> <body> tag (it's perfectly fine IMO to use the body tag as a wrapper... why throw in an extra element, while it's not necessary) or <div> tag

purple top section --> <header> element

white stroke with menu inside --> <nav role=navigation"> nav element

menu --> <ul> element

main content section --> <section role="main"> section element

purple bottom section --> <footer> element

Those main elements (containers) that you'll place inside the wrapper are all block-level elements, so you don't need much CSS positioning for them. You can just use the document flow in order to get the layout of that Coral Draw image.

The markup (HTML) for the layout would be then this:

<body>

    <header>

        <!-- logo and social media icons go in here -->

    </header>

    <nav role="navigation">

        <ul>

            <li><a href="#">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">products</a></li>
            <li><a href="#">order</a></li>
            <li><a href="#">contact</a></li>

        </ul>

    </nav>

    <section role="main">

        <!-- main content area -->

    </section>

    <footer>

        <!-- copyright stuff -->

    </footer>

</body>

Stay tuned for Part 2 - CSS :)

Jokings aside... just paste this in an empty web page first, play around with it, and I will get back at you with some simple CSS.

[Mr.M]

Ok so what you suggesting is that I slice my background image to pieces like (slice the top purple part, slice the white part which holds the buttons, slice the footer which will give me 2 parts (the body part and footer part))?

I will try this out and see. Thank you again.

[gentlemedia]

so what you suggesting is that I slice my background image to pieces

No, that is not necessary, because you can create that design/layout fully with CSS. No need for sliced images.

See here: http://codepen.io/gentlemedia/full/OVpQNQ/

The HTML & CSS can be seen here: http://codepen.io/gentlemedia/pen/OVpQNQ?editors=110

As you'll see, I let the content dictate the height of the containers with some help of padding to space out things. This way you're much more flexible.

And just read a lot about HTML & CSS. It's really not that hard.
http://www.impressivewebs.com/css-basics

[Mr.M]

Thank you. Will take a look at it and will get back. Thanks again.

[Mr.M]

I'm experiencing problems with adding my slider frame image into the body. I don't know if i have to draw it using the html/css because its an image. I've tried adding the wrapp in the css for it but if it is inserted it will be fixed to a certain position which when I restore the browser the frame is not positioned correctly. I've looked into the video at css positioning but the video has boxes which its appears to be easy to position using the 'relative' for the parent (container) and the 'absolute' for the child box.

Sorry I'm a bit new to css so I'm still trying to learn it.

[Mr.M]

I've managed to sort the frame to be at the center of the page even if the page is maximized or restored. I've used:

 <div I'd="wrapper" style="100%; text-align:center">
 <img src="images/bg5.png"/>
 </div>

Now I'm trying to correct the social networks icons so that they will also be well positioned even if the browser is maximized or restored.

Thank you again.

[gentlemedia]

Just use your image as a background image via CSS, maybe directly on the wrapper of that slider or create a new wrap element (div tag / division) for it if necessary.

[Mr.M]

Thank you the images problem have been solved. Is there a better way to insert text to align underneath the image? I've used ' ' to space the texts but if the browser is restored the text are fixed to the same position while images reduce their size and this become un-aligned text.

Thank you. I'm still trying to find a solution to this as well.

[gentlemedia]

Don't use &nbsp or <br> to space out your elements. Use the CSS properties margin and/or padding for this. Everything presentational should be handled through CSS.
I don't know exactly what you want to achieve and how your HTML is for that image and text. Can you post your code

[drjohn]

You have several css files, all containing just a couple of lines. Make a single css file with all these rules in it. You can split the file into sections using comments. Multiple css files means the browser has to ask the server for each one separately, and each one then comes back as a single packet. but they could all fit in one small file requirinng one file request and still one packet.

Also your multiple css files don't exactly have meaningful names do they...

[Mr.M]

@drjohn Thanks, but I was trying to make sure I remember everything I did. @media here is my current code html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="preload">
<img src="images/Purple Rose Logo 01.png" />
<img src="images/fb.jpg" />
<img src="images/tt.jpg" />
<img src="images/insta.jpg" />
<img src="products/IMG_2436.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2447.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2391.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2459.JPG" alt="" style="width:10%" height="10%" />
<img src="products/IMG_2380.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2414.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2496.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2428.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2469.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2479.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2523.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2354.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2357.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2486.JPG" alt="" style="width:10%" height="10%"/>
<img src="products/IMG_2404.JPG" alt="" style="width:10%" height="10%"/>
</div>

<link href="l.css" rel="stylesheet" type="text/css" />
<title> Purple Rose Boutique </title>
<header>
<link rel="shorcut icon" href="favicon.png" />
    <link href="cata.css" rel="stylesheet" type="text/css" />
<div align="left">
    <a href="index.html" class="logo"><img src="images/Purple Rose Logo 01.png" /></a>
    </div>

    <div align="right" style="top:100px">
<a rel="nofollow" href="http://www.facebook.com/" target="_blank">
<img src="images/fb.jpg" alt="Facebook"  style="width:25px" style="height:25px" style="left:250" /></a>
<a rel="nofollow" href="http://www.twitter.com/" target="_blank">
<img src="images/tt.jpg" style="width:24px" style="height:23px" style="left:250"  /></a>
<a rel="nofollow" href="http://www.instagram.com/PurpleRoseboutique23" target="_blank">
<img src="images/insta.jpg" style="width:24px" style="height:23px" style="left:250"/></a>
</div>

</header>

<nav role="navigation">

  <ul>

    <li><a href="index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="products.html">Products</a></li>
    <li><a href="order.html">Order</a></li>
    <li><a href="contact.html">Contact</a></li>

  </ul>

</nav>

<section role="main">
<h1>This section is products section.</h1>
<div align="center" style="position:relative">
<img src="products/IMG_2436.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2447.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2391.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2459.JPG" alt="" style="width:10%" height="10%" />
&nbsp; &nbsp;<img src="products/IMG_2380.JPG" alt="" style="width:10%" height="10%"/><br />

<div align="center" style="position:relative"><font color="#990066" size="-1">
Dress: R1200 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dress: R600 &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dress: R500 &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Clear Glasses: R500 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Top: R200<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;Hat: R1000<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Snikers:R1000</font></div><br />
<img src="products/IMG_2414.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2496.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2428.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2469.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2479.JPG" alt="" style="width:10%" height="10%"/>
<div align="center" style="position:relative"><font color="#990066" size="-1">
Sunglasses: R500 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Coat: R1000 &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dress: R600  &nbsp;   &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Jersey: R500 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  Dress: R600<br />
Top: R350  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Lace top: R400 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  Pencil skirt: R600&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
Lamboutin shoes: R1200&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
Clutch bag: R400&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</font></div><br />
<img src="products/IMG_2523.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2354.JPG" alt="" style="width:10%" height="10%"/>
&nbsp;&nbsp;<img src="products/IMG_2357.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2486.JPG" alt="" style="width:10%" height="10%"/>
&nbsp; &nbsp;<img src="products/IMG_2404.JPG" alt="" style="width:10%" height="10%"/>
<div align="center" style="position:relative"><font color="#990066" size="-1">
Blue Jersey: R500 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;Dress: R700 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Red top: R500 &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Dress: R600&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Red & cream Coat: R700   <br />
White Jean: R700 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
Lamboutin boots: R1500 &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;  &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  &nbsp;&nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;   <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</font></div>
</div>
</div>
</section>

<footer>

  <span>Designed by: <a rel="nofollow" href="http://facebook.com/MCSIDevelopers/" target="_blank">  Mlungisi Ndlela</a></span>

  <span>Copyright © 2015</span>

</footer>
</body>
</html>

and my css:

/*
 * Apply a natural box layout model
 */
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 0;
}

header {
  padding: 2rem;
  background-color: #653146 ;
  border-top-left-radius: 1.5em;
  border-top-right-radius: 1.5em;
}

.logo img {
  width: 200px;
  height: auto;
}
.social imgs {
width:25px;
height:25px;
}
[role="navigation"] {
  background-color: #fff;
  border: 1px solid #653146;
  border-top: none;}

[role="navigation"] ul {
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  text-align: center;
}

[role="navigation"] li {
  display: inline-block
}

[role="navigation"] li a {
  display: block;
  padding: .5rem 2rem;
  color: #fff;
  text-decoration: none;
  background-color: #653146;
  border-radius: .3em;
}

[role="main"] {
  padding: 3rem 2rem;
  border-left: 1px solid #653146;
  border-right: 1px solid #653146;

  background-repeat:no-repeat;
  background-position:center;

}


footer {
  padding: .5rem 2rem;
  background-color: #653146 ;
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  font-size: .85em;
  color: #fff;
  overflow: hidden; /* clear floats */
}

footer > span {
  float: left;
  width: 50%;
}

footer > span:last-child { text-align: right }

a, a:visited {
  color: #729dff;
  text-decoration: none;
}

a:hover, a:active { color: white }

div.MCSI {
    vertical-align: top;
    display: inline-block;
    text-align: center;
    width: 120px;
}
 imgx {
    width: 100px;
    height: 100px;
}
.caption {
    display: block;
}
div#preload {display:none;}

What I want to achieve is like this:

    Image1      Image2    Image3    Image4
    text1        text2     text3     text4

    Image5      Image6    Image7    Image8
    text5       text6     text7     text8

and so on

[gentlemedia]

That HTML became quite a mess. There's a lot going wrong in there.

• There's no <head> tag
• If you use a method like this to preload your images, there's no need for other attributes. Only src with the path to the image, but better to look into lazyloading.
• link tags to a stylesheet and your favicon are in your header. Should be inside the <head>
• Don't use HTML attributes like align & font. Use CSS (margin, padding, float or position) to position your elements/content and set your font color and size through CSS too. These HTML attributes are deprecated, because we have CSS to handle this.
• The same goes for   and <br> tag. CSS!!!!
• Don't inline your CSS (style=""). Use your external stylesheet for your styles.

Re your question. There are several ways to do that and it also depends on the type of content which HTML elements or tags to use.

But you will need to read up on CSS floats and again on block-level and inline elements. If you know the difference netween te last two, then you know what to do. If an element is by default an inline alement (such as the img tag (see for reference) ) and you want it to be a block-level element then you can change it through CSS to block (display: block).

[MidiMagic]

The problem is that you are expecting all of the parts to stay in lock step over the background. HTML, even with CSS, is not designed to do this. Viewing the page on a different screen resolution will make it fall apart.

Instead of trying to make everything fit a fixed background, use a simple background and make all of the essential parts of the page foreground elements:

• Make a separate item for your title. Center it at the top.

• Place the items in the order you want them in.

• DO NOT expect things to be fixed size. Different screen resolutions will cause totally different sizes to the various elements, depending on hiw they fit.

• Don't make elements so big (in pixel count) that they will not fit on a smaller screen. Use 1024 X 768 as your largest pixel count for an image (it will completely fill the screen of an older computer). But some phones are only 640 X 480, so keep this in mind.

• Most browsers have a setting of what to do with an oversize image. Some are set to shrink the image to fit, others display only part of the image at a time. Design your page to wortk with either setting.

• Don't expect an element to stay at the very bottom of the screen. There are ways to put something at the bottom, but they do not work on all computers.