0

I am new to this forum and I am also fairly new to web design, however I need to create a site and I cannot figure out how to code a specific layout, using html and css.

I am using Dreamveawer CC. I have a background image that needs to fill the whole screen. For this I have used a code:

    html {background: url(images/bgimg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
  background-size: cover;
}

and that seems to be working, as I need the image to shrink down with the screen size - as the site needs to be responsive and fit for tablet and mobile view etc.

The problem I have are actually the images, because they need to be scattered all over the screen, they also need to be responsive to the screen size and shrink along with the background image for tablet view. (For the mobile view, the images turn into icon size and are aligned in rows).

I don't know how to position images exactly where I want them, and have them move and shrink with the size of the screen all the way to tablet size?

I have created a container, using:

<div class="Container"></div>


.Container {
height: 800px;
width: 100%;
margin: 10px auto;
background: #5780E8;
}

I don't know if this is a correct size either. But it seems to be working with the screen size. I thought I'd place the images inside of this container.

Example image:

enter image description here

DavidG
  • 24,279
  • 14
  • 89
  • 82
DrSciFi
  • 1
  • 1
  • 1
    First and foremost, use the code-snippet tool here on stackoverflow, or use a third-party service like jsbin to show us your entire code to this moment. – Tanasos May 02 '17 at 10:49
  • Go through this link will help you!!! http://stackoverflow.com/questions/19244268/bootstrap-fluid-grid-system-with-different-height – Sangrai May 02 '17 at 10:56

1 Answers1

0

Use background-position property to position image as per your need. I still believe it is not good to use background image for this purpose since you want to resize image on viewport changes.

  1. Try using <img> tag for image.
  2. Switch multiple images based on viewports using <source> tag inside image.
  3. If you want to have content on top of image you can position it absolute.
ajinkya narkar
  • 384
  • 1
  • 4
  • Thank you for your reply... but I don't understand what you mean. My background image is working ok, it is a type of image that looks ok when small. I just need codes to how to position images that are going on the top, and how do I position them where I want? I am looking for an example code, as I'm trying to learn and figure this out... So your answer is a bit too advanced for me, and I still don't understand what I have to do – DrSciFi May 02 '17 at 11:27