2 replies [Last post]
egrow_developer
egrow_developer's picture
Offline
newbie
Last seen: 8 years 19 weeks ago
Timezone: GMT+10
Joined: 2014-05-16
Posts: 1
Points: 2

Hi Guys,

What I am trying to achieve:
http://dobble.net.au/help/template.jpg

Here is my code

<style>
body {
	font-family:"Open Sans", sans-serif;
}
 
 
@media all and (min-width: 50px) {  .tile  {   font-size:0.1em;  } }
    @media all and (min-width: 100px) {  .tile {   font-size:0.2em;  } }
    @media all and (min-width: 200px) {  .tile  {   font-size:0.4em;  } }
    @media all and (min-width: 300px) {  .tile  {   font-size:0.4em;  } }
    @media all and (min-width: 400px) {  .tile  {   font-size:0.6em;  } }
	@media all and (min-width: 500px) {  .tile  {   font-size:.6em;  } }
	@media all and (min-width: 600px) {  .tile  {   font-size:.8em;  } }
	@media all and (min-width: 700px) {  .tile  {   font-size:.8em;  } }
	@media all and (min-width: 800px) {  .tile  {   font-size:1em;  } }
	@media all and (min-width: 900px) {  .tile  {   font-size:1em;  } }
	@media all and (min-width: 1000px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1100px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1200px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1300px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1400px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1500px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1500px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1600px) {  .tile  { font-size:1em;  } }
	@media all and (min-width: 1700px) {  .tile  { font-size:1em;  } }
 
 
table {
	margin:0;
	padding:7px;
	border:none;
	width:100%;
	max-width:800px;
	max-height:800px;
}
.tile {
	width: 100%;
	max-width:400px;
	border-radius: 2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
}
.tile a {
	transition: background-color 0.3s ease;
	background-color:#6abc9f;
	width: 100%;
	height: 100%;
	display:block;
	border-radius: 2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	text-decoration:none;
	text-align:center;
	content:"";
 
	vertical-align:middle;
}
.design-icon{
	background-image:url(images/tiles.png);
	background-size:300%;	
	background-repeat:no-repeat;
	background-position: 0px 0px;
}
 
.tile a:hover {
	background-color: #60ac91;
	-webkit-transition: background-color .3s ease-out;
  	-moz-transition: background-color .3s ease-out;
  	-o-transition: background-color .3s ease-out;
  	transition: background-color .3s ease-out;
 
}
.tile a span {
	font-family:"Patua One", cursive;
	font-size:400%;
	color: #FFF;
	width:100%;
}
 
</style>
 
</head>
 
<body> 
 
<table align="center">
	<tr>
    	<td>
        	<div class="tile">
            	<a href="#">
                	<span>d</span>
                </a>        		
        	</div>
        </td>
        <td>
        	<div class="tile design-icon">
            	<a href="#">
                	<span>design</span>
                </a>        		
        	</div>
        </td>        
    </tr>
    <tr>
    	<td>
        	<div class="tile">
            	<a href="#">
                	<span>market</span>
                </a>        		
        	</div>
        </td>
        <td>
        	<div class="tile">
            	<a href="#">
                	<span>manage</span>
                </a>        		
        	</div>
        </td>        
    </tr>
</table>

I am trying to use the "background-image" and "background-position" style attributes to achieve this.
What I want is to specify the background-image once in the .tile class, then create sub-classes and specify the position of the icon on the image. so my html looks like this, class="tile design-icon". But its not working! please help

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I suppose you mean you want

I suppose you mean you want this tile to be adjusting automatically if a browser is going smaller or bigger?
Then it adjusts in hight and in width so the image still contains its proportions right?

Well, is there a way for you to show us this live on the internet?
I love working live on things, makes life a lot easier Smile

Cheers, Henk

Check Maximum Webdesign for your online solutions

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 6 years 7 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Try something like this: HTML

Try something like this:
HTML version:
<img class="shrinkToFit decoded" width="502" height="502" src="url to your image" alt="zoom in test"></img>

Now the CSS file:

@media not print {
  .overflowing {
    cursor: zoom-out;
  }
 
  .shrinkToFit {
    cursor: zoom-in;
  }
}
 
@media print {
  /* We must declare the image as a block element. If we stay as
  an inline element, our parent LineBox will be inline too and
  ignore the available height during reflow.
  This is bad during printing, it means tall image frames won't know
  the size of the paper and cannot break into continuations along
  multiple pages. */
  img {
    display: block;
  }
}
 
/*
  This CSS stylesheet defines the rules to be applied to ImageDocuments that
  are top level (e.g. not iframes).
*/
 
@media not print {
  body {
    margin: 0;
  }
 
  img {
    text-align: center;
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
 
  .completeRotation {
    transition: transform 0.3s ease 0s;
  }
}
 
img {
  image-orientation: from-image;
}
 
@media not print {
 
  body {
    color: #eee;
    background-image: url("chrome://global/skin/media/imagedoc-darknoise.png");
  }
 
  img.decoded {
    background: hsl(0,0%,90%) url("chrome://global/skin/media/imagedoc-lightnoise.png");
    color: #222;
  }
}

Maybe this works for you Smile
Created a fiddle for you, take a look if you mean this.

Check Maximum Webdesign for your online solutions