How do I style div like this? - html

Question

I'm trying to get rid of many divs on my page so I wonder if this "tile" could be done without using one.
Something like this:
<a href="mks.html" class="big-tile big-tile-1">
<h1>town<br>
library</h1>
</a>
The anchor tag would have a background: url(big-tile-1) top no-repeat; I guess. Big-tile would have static width and height. But how do I style the h1? Can You help me please?

Answer 1

You could do something like this: JSFiddle Demo
CSS
.big-tile {
border:10px solid #ccc;
display:inline-block;
position:relative;
height:200px;
width:200px;
color:#fff;
background:url("http://lorempixel.com/400/200/nature/");
}
.big-tile h1 {
margin:0;
background:teal;
position:absolute;
padding:20px;
bottom:0;
left:0;
right:0;
}
Or if you want the image in the markup and not as a background image - you could do this : http://jsfiddle.net/UFUq5/3/

Answer 2

Demo Fiddle
HTML
<a href="#">
town<br />
library
</a>
CSS
a {
display:inline-block;
height:450px;
width:300px;
background-image:url(http://phaseoneimageprofessor.files.wordpress.com/2013/07/iqpw29_main_image_.jpg);
background-color:teal;
background-size:300px 300px;
background-repeat:no-repeat;
padding-top:350px;
padding-left:50px;
box-sizing:border-box;
color:white;
text-decoration:none;
font-family:arial;
font-size:20px;
border:10px solid #c0c0c0;
}

Answer 3

technically, you wouldn't need to use the big-tile-1 class. but you could do something like this: http://jsfiddle.net/RU23A/1/
with a couple changes:
1. add an image to the background url
2. change the font to whatever that font is.

Answer 4

You can do this:
<a id="image-overlay" href="mks.html" class="big-tile big-tile-1">
<img src="your image">
<h1> town <br> library </h1>
</a>
then your css:
#image-overlay{
width: 300px;
height: 500px;
position: relative;
border: 10px #999 solid;
border-radius: 1px;
}
#image-overlay h1{
position: absolute;
bottom: 0;
left: 0;
background-color: green ////whatever your choice
color: white;
padding: 10px;
font-family: //your choice
font-size: 20px;
}