Category Archives: foundation

Overlay screen with transparency achieve by using position: relative and absolute

New trick learned by doing build this layout, have transparent under my two foundation columns. The looking is like this:

transparent wrap under two columns

The div layout is like this:

<div class=”clearfix blueWrap”>
<div class =”orangeWrap”></div>
<!– below two columns is the purple wrap in the picture –>
<div class=”medium-6 columns”></div>
<div class=”medium-6 columns”></div>
</div>

 just few line of css:
  .blueWrap{position:relative;}
  .orangeWrap{
        background-color: rgba(68, 68, 68, 0.47);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
       }
 

then just use the foundation media query to make sure when it was in the big screen don’t display that transparent overlay screeen.

@media only screen and (min-width: 64.063em) {
.orangeWrap {
width:70%;
}

How make your background image full size of the screen and cross mobile,table and desktop in Foundation

Recently a task is using the existing foundation basic page to rewrite it to a new design. It is my first time working in Foundation Framework, previous I always using bootstrap.

And from doing this get understand how foundation works. Wow, take a day to achieve it.

And for make the background image full size of the screen and cross the mobile,table and desktop that took me few hours to fix it.

I just like to put my piece of code over there, hope that could help my fans.

.main-background{    
	background:#f38f04 url('/images/bg-img.png') no-repeat center center fixed; 
        background-size: cover;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
	width: 100% !important;
	z-index: 0;
}

the fixed and width:100% !important that is very important to make it happens.