2

I have a full width and height section html home page. How can I devide this section into 3 row divs. Each div is full width and has a responsive background image. Please suggest how i can do this with css and the page being responsive.

Subhasree Mazumder
  • 31
  • 1
  • 4

5 Answers5

2

Here is the solution below: For background 2 add this media query css at end of your css code or media query responsive css-

@media(max-width:767px){
.bg-2{background-position:right center;}
}


body,
html {
     height: 100%; 

}

.fullwidth {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.repeat-x {
  flex:1;
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center center;
  


}
.bg-1{background-image: url(https://dummyimage.com/1920/800/0011ff.jpg&text=Image+1);}
.bg-2{background-image: url(https://dummyimage.com/1920/54e354/0011ff.jpg&text=Image+2);}
.bg-3{background-image: url(https://dummyimage.com/1920/fa4f17/0011ff.jpg&text=Image+3);}

@media(max-width:767px){
.bg-2{background-position:right center;}
}
<div class="fullwidth">
  <div class="repeat-x bg-1">&nbsp;</div>
  <div class="repeat-x bg-2">&nbsp;</div>
  <div class="repeat-x bg-3">&nbsp;</div>

</div>
Sahil Dhir
  • 4,162
  • 1
  • 13
  • 33
  • Thanks a lot. I have this in my website, Please have a look the link is http://www.grouporigin.com/clients/upload/WAHA_AR16/index.html .The two sections of divs in the home page with images in background are not responsive. How can I make them responsive. Please suggest – Subhasree Mazumder Feb 16 '17 at 12:07
  • Hi, Are you there, i need help – Subhasree Mazumder Feb 16 '17 at 12:41
  • yes I am here.. I think you need to play with background position for this.. Should I give you the fix for that...?? – Sahil Dhir Feb 16 '17 at 12:49
  • if you see, the second background image, the people disappear when i make the screen small. Its not working. How do i fix this please. Thanks for your response – Subhasree Mazumder Feb 16 '17 at 13:04
  • 1
    For just background 2 add a media query for small devices.. Added the fix in above answer.. please check and let me know. – Sahil Dhir Feb 16 '17 at 13:08
  • hi, I have uploaded my project here grouporigin.com/clients/upload/WAHA_Capital/index.html if you click on thie link. In the home page there is a scrollbar now. I want to remove this scroll and make the width 100%. Can you inspect the css and suggest to me which style has caused this extra scrollable width. Thanks in advance. – Subhasree Mazumder Feb 19 '17 at 14:04
  • Please suggest a solution on the above – Subhasree Mazumder Feb 19 '17 at 14:14
  • here is the fix.. your head1 class in bacground chil2 class is creating problem... remove left:52px and add padding-left:52px..... it will remove scroll – Sahil Dhir Feb 20 '17 at 05:19
  • Hi. Thanks I will do this and see. Your very good with UI design. Will you be able to help me where i get stuck. I am doing a responsive design first time and i don't have much time also. – Subhasree Mazumder Feb 20 '17 at 07:18
  • Removing left:52px and adding padding-left:52px did not solve the problem. Still the horizontal scroll is there – Subhasree Mazumder Feb 20 '17 at 07:55
  • Hi again, Please check the link now. http://www.grouporigin.com//clients/upload/WAHA_Capital1/index.html If you see the bottom section in the home page, the div boxes with the background images are behaving differently than the div boxes without a background image. They are also not covering the full height. How can I make the divs with the background image behave in the same way exactly as the div boxes without a background image. – Subhasree Mazumder Feb 20 '17 at 13:23
  • Hi. are u there.Did u have a look at it http://www.grouporigin.com/clients/upload/WAHA_Capital1/index.html – Subhasree Mazumder Feb 21 '17 at 08:06
0

<html>
<head>
    <title></title>
</head>
<body>
    <div style="width: 100%;">
        <div style="width: 35%; float: left;  background-color:blue; padding-right:20px;">
            Div 1
        </div>

        <div style="width: 30%; float: left;background-color:cyan;">
            Div 2

        </div>


        <div style="width: 30%; float: left; background-color:gold;">
            Div 3
        </div>
    </div>
</body>
</html>
Singh Kailash
  • 621
  • 5
  • 16
0

#page-wrap {
    display:table;
    width:90%;
    border:1px solid #999;
    border-radius:10px;
    border-spacing:10px;
    margin:auto;
    background-color:#fff;
    box-shadow:6px 6px 6px #999;
 }
#page-wrap div {
    display:table-cell;
    width:33.33%;
    padding:2%;
    border:1px solid #999;
    border-radius:10px;
    background-image:linear-gradient(to bottom,#fff,#ddd);
    box-shadow:inset 0 0 10px #999;
    font-size:1.5vw;
    word-wrap:break-word;
    color:#666; 
 }
@media screen and (max-width:800px) {
#page-wrap div {
    font-size:2.0vw;
  }
 }
@media screen and (max-width:480px) {
#page-wrap div {
    font-size:2.5vw;
  }
 }
<!DOCTYPE html>
<html  lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>untitled document</title>
<link rel="stylesheet" href="/" media="screen">
<style media="screen">
</style>
 </head>
<body background-color:#f0f0f0;>
<div id="page-wrap">
 <div id="left"></div>
 <div id="right"></div>
 <div id="mid">
  <p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
   ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
   amet. Sed auctor vehicula commodo.
 </p>
</div>
</div>
</body>
</html>
khushi
  • 1
  • 3
0

I think that using flexbox would be the best way. Check out this pen: http://codepen.io/anon/pen/qRwZyW

* { margin: 0; padding: 0; }
html,
body,
.container {
  width: 100%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
}

.child {
  flex: 1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

.child1 {
  background-image: url(https://unsplash.it/1201/1301/?random);
}

.child2 {
  background-image: url(https://unsplash.it/1202/1302/?random);
}

.child3 {
  background-image: url(https://unsplash.it/1203/1303/?random);
}
<div class="container">
  <div class="child child1"></div>
  <div class="child child2"></div>
  <div class="child child3"></div>
</div>

Guide for flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Hendry
  • 882
  • 1
  • 11
  • 27
0

You can divide the page into 3 rows by using 3 div and give the height for each div

<html>
<head>
   <style type="text/css">
    .wrapper
    {
        height:  100%;
        width: 100%;
    }
    .div1,.div3
    {
    height: 33.33%; 
    background-color:yellow; 

    }
    .div2
    {
        height: 33.33%; 
    background-color:red;
    }
   </style>
</head>
<body>
    <div class="wrapper">
        <div class="div1">
         Div 1
        </div>

        <div  class="div2">
            Div 2

        </div>


        <div class="div3">
            Div 3
        </div>
    </div>
</body>
</html>
affaz
  • 1,191
  • 9
  • 23