For some reason, I can't figure out why there is like an 8px spacing below this image within a div. check it out:
If you look at the bottom of the image, there's about an 8px space, how can i get rid of it?
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
<!----HTML BELOW---->
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
Here's the entire code, if anyone needs it:
body {
background-image: url('images/bg.png');
background-color: #5a6a7a;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
.wrap {
width: 960px;
margin: auto;
}
.head {
width: 960px;
height: 60px;
margin-top: 33px;
}
.head img {
float: left;
}
.head .home img { background: url('images/home.jpg'); width: 116px; height: 60px; }
.head .register img { background: url('images/register.jpg'); width: 116px; height: 60px; }
.head .forum img { background: url('images/forum.jpg'); width: 116px; height: 60px; }
.head .banner img { background: url('images/banner.jpg'); width: 263px; height: 60px; }
.head .chat img { background: url('images/chat.jpg'); width: 116px; height: 60px; }
.head .downloads img { background: url('images/downloads.jpg'); width: 116px; height: 60px; }
.head .donate img { background: url('images/donate.jpg'); width: 117px; height: 60px; }
.head .home img:hover { background: url('images/homehover.jpg'); width: 116px; height: 60px; }
.head .register img:hover { background: url('images/registerhover.jpg'); width: 116px; height: 60px; }
.head .forum img:hover { background: url('images/forumhover.jpg'); width: 116px; height: 60px; }
.head .chat img:hover { background: url('images/chathover.jpg'); width: 116px; height: 60px; }
.head .downloads img:hover { background: url('images/downloadshover.jpg'); width: 116px; height: 60px; }
.head .donate img:hover { background: url('images/donatehover.jpg'); width: 117px; height: 60px; }
.logo {
background-image: url('images/logo.png');
width:250px;
height: 110px;
display:block;
position:absolute;
left:0;
right:0;
bottom:0;
margin: -85px auto;
z-index: 1;
}
.main {
margin-top: 40px;
float: left;
clear: both;
}
* {
margin: 0;
padding: 0;
}
.mainhead {
background-image: url('images/content.jpg');
height: 27px;
width: 680px;
}
.maincont {
background-color: #394d49;
width: 668px;
border: 1px solid #6b958b;
margin-top: -1px;
height: auto;
word-wrap: break-word;
padding: 5px;
}
.side {
margin-top: 40px;
float: right;
}
.sidehead {
width: 260px;
height: 27px;
}
.sidecont {
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
margin-top: -1px;
margin-bottom: 20px;
vertical-align: middle;
}
.footer {
background-image: url('images/footer.jpg');
width: 960px;
height: 19px;
margin-top: 20px;
font-size: 11.6px;
font-family: 'MS Serif';
text-align: center;
color: #dfd591;
text-shadow: 0 1px 2px black;
line-height: 19px;
}
__
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<div style="position:relative;">
<div class="logo"></div>
</div>
<div class="head">
<div class="home"><img></div>
<div class="register"><img></div>
<div class="forum"><img></div>
<div class="banner"><img></div>
<div class="chat"><img></div>
<div class="downloads"><img></div>
<div class="donate"><img></div>
</div>
<div class="main">
<div class="mainhead"></div>
<div class="maincont">
</div>
</div>
<div class="side">
<div class="sidehead"><img src="images/servinfo.jpg"></div>
<div class="sidecont">asdf</div>
<div class="sidecont">
<center><img src="images/rankings.jpg"></center>
</div>
<div class="sidehead"><img src="images/partners.jpg"></div>
<div class="sidecont">
<center><img src="images/epvp.jpg"></center>
</div>
</div>
<div style="clear:both;"></div>
<div class="footer"></div>
</div>
</body>
An image is an inline element, which means that it is placed on the baseline of the text. There is space below the baseline in a text block, for characters with descenders like p and g. It's that space that creates the spacing below the image.
You can make the image a block element to avoid that space, and don't use the deprecated center tag, use margins to center the image:
HTML:
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
Add to the CSS:
.sidecont img { display: block; margin: 0 auto; }
no tag center <!doctype html> html5
<div class="sidecont">
<img src="images/rankings.jpg">
</div>
.sidecont {
margin: 0 auto;
background-color: #394d49;
width: 258px;
height: auto;
border: 1px solid #6b958b;
}
Related
Inner divs need to resize related to the outer. But in the result, outer div's border is smaller than the inners total height. Also scroll middles are expected to resize 100% auto related to left, right, top and bottom. But they are resizing related to the outer div. What is the problem here? And do you think there is a better solution for this implementation?
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: 100%;
background-color: blue;
}
.window_inner {
background-color: red;
width: 100%;
height: 100%;
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: 100%;
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: 100%;
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Although, I could not completely understand your question but if I am right, you need some logic with css3 calc() rule in your middle divs. Please check my below code for reference.
body {
background-color: green;
}
.window {
width: 550px;
height: 400px;
background-color: yellow;
position: relative;
border: 2px solid white;
}
.titlebar {
top: 0;
background-color: black;
height: 20px;
width: 100%;
display: flex;
align-items: center;
}
.title {
color: white;
}
.scroll_right {
float: right;
width: 20px;
height: calc(100% - 40px);
background-color: blue;
}
.window_inner {
background-color: red;
width: calc(100% - 20px);
height: calc(100% - 40px);
}
.scroll_bottom {
background-color: black;
bottom: 0;
height: 20px;
width: 100%;
}
.rtop {
width: 20px;
height: 20px;
background-color: blue;
}
.rmid {
height: calc(100% - 40px);
width: 20px;
background-color: yellowgreen;
}
.rbot {
width: 20px;
height: 20px;
background-color: blue;
}
.bleft {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
.bmid {
height: 20px;
width: calc(100% - 40px);
background-color: yellowgreen;
float: left;
}
.bright {
width: 20px;
height: 20px;
background-color: pink;
float: left;
}
<div class="window">
<div class="titlebar">
<div class="title">Text</div>
</div>
<div class="scroll_right">
<div class="rtop"></div>
<div class="rmid"> </div>
<div class="rbot"></div>
</div>
<div class="window_inner"></div>
<div class="scroll_bottom">
<div class="bleft"></div>
<div class="bmid"> </div>
<div class="bright"></div>
</div>
</div>
Hope this help
My current, actual result:
I want to move the blue <div> to the top without using position, and remove the space between. Is this possible?
The desired result:
This is what I've tried:
#headerwrapper {
width: 988px;
height: 500px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
}
#header1 {
width: 300px;
height: 250px;
float: left;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
float: left;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
float: left;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
float: left;
clear: left;
margin-right: 25px;
background: blue;
}
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
Note that the number of items per line may change (i.e., I don't know where the new line will start).
Looks like you just need a negative top margin. It also may help you to turn the wrapper into a block element and its children into inline-block elements. That way they line up better.
Good luck!
#headerwrapper {
width: 988px;
height: 500px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
display: block;
}
#header1 {
width: 300px;
height: 250px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header2 {
width: 300px;
height: 450px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header3 {
width: 300px;
height: 350px;
float: left;
margin-right: 25px;
background: red;
display: inline-block;
}
#header4 {
width: 301px;
height: 350px;
float: left;
clear: left;
margin-top: -175px;
margin-left: -1px;
background: blue;
display: inline-block;
}
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
You can set a negative top margin to the #header4. This will move the div up.
The final #header4 style would look like this:
#header4 {
width: 301px;
height: 350px;
float: left;
clear: left;
margin-top: -200px;
}
The -200px can be changed to any number you need.
You could use a Masonry-esque solution. Here is a fiddle of the example. If you need more columns, change the column-count, column-width, and column-gap.
#headerwrapper {
width: 100%;
max-width: 988px;
margin: 2em auto;
background: #000;
padding:10px 20px;
}
.cols {
-moz-column-count: 3;
-moz-column-gap: 3%;
-moz-column-width: 30%;
-webkit-column-count: 3;
-webkit-column-gap: 3%;
-webkit-column-width: 30%;
column-count: 3;
column-gap: 3%;
column-width: 30%;
}
.box {
margin-bottom: 20px;
}
.box.one {
height: 200px;
background-color: #d77575;
}
.box.two {
height: 300px;
background-color: #dcbc4c;
}
.box.three {
background-color: #a3ca3b;
height: 400px;
}
.box.four {
background-color: #3daee3;
height: 500px;
}
.box.five {
background-color: #bb8ed8;
height: 600px;
}
<div id="headerwrapper" class="cols">
<div id="header1" class="box one"></div>
<div id="header2" class="box two"></div>
<div id="header3" class="box one"></div>
<div id="header4" class="box three"></div>
<div id="header5" class="box four"></div>
<div id="header6" class="box five"></div>
<div id="header7" class="box one"></div>
</div>
you could consider column :
boxes may breaks into different columns
#headerwrapper {
width: 988px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
-moz-column-count:3;
column-count:3;
}
#header1 {
width: 300px;
height: 250px;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
margin-right: 25px;
background: blue;
}
#headerwrapper>div {
margin:15px 25px;
/* display:inline-block; */
}
#headerwrapper>div:first-child {
margin-top:0;
}
<!-- begin top header with images -->
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
or not break
#headerwrapper {
width: 988px;
margin: 0 auto;
background: #000;
padding: 10px 20px;
-moz-column-count:3;
column-count:3;
}
#header1 {
width: 300px;
height: 250px;
margin-right: 25px;
background: red;
}
#header2 {
width: 300px;
height: 450px;
margin-right: 25px;
background: red;
}
#header3 {
width: 300px;
height: 350px;
margin-right: 25px;
background: red;
}
#header4 {
width: 300px;
height: 350px;
margin-right: 25px;
background: blue;
}
#headerwrapper>div {
margin:15px 25px;
display:inline-block; /* help to keep all box within a single col .... css rules avoiding breaking seems not yet implemented */
}
#headerwrapper>div:first-child {
margin-top:0;
}
<!-- begin top header with images -->
<div id='headerwrapper'>
<div id='header1'></div>
<div id='header2'></div>
<div id='header3'></div>
<div id='header4'></div>
<div id='header5'></div>
<div id='header6'></div>
</div>
I'm trying to set div's position like this:
but i can't set image (green box) in position.
orange box is on top
blue and lightgreen div are buttons
red frame is static distant under orange box
green box is link with image inside, covering partly blue and lightgreen buttons.
every links must stay clickable every time.
I can't centering green image and set it above orange div partly.
Example code here
<div class="header-container">
<div class="nav-container">
<div class="logo">
Click!
</div>
<div class="nav">
Click!
</div>
</div>
<div class="header-image">
<div class="image">
Click!
</div>
</div>
<div class="menu-container">
Click!
</div>
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
I've uploaded your jsfiddle here.
Addded the following css:
.header-image {
position: absolute;
top: 40px;
left: 20%;
}
also added extra margin-top for the .menu-container
.menu-container {
margin-top: 80px; //instead of 50px
}
I've positioned it absolute because this way it will go wherever you want it based on the body relative positioning.
adding this to image should work:
margin:0 auto;
position:relatve;
z-index:66;
margin-top:-10px
http://jsfiddle.net/o3oyuzb9/2/
try this
only changed the css
body,html{margin: 10px;}
.header-container{
width: 100%;
}
a{
text-decoration:none;
color:#000;
padding: 10px 0px;
display: block;
text-align: center;
}
.nav-container{
width: 100%;
height: 50px;
background: orange;
}
.logo{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightblue;
float: left;
}
.nav{
width: 25%;
height: 40px;
margin: 5px;
background-color: lightgreen;
float: right;
}
.header-image{
width: 100%;
border: 1px solid green;
position: relative;
z-index: 2;
text-align: center;
}
.image{
height: 100px;
width: 60%;
margin: 0 auto;
margin-top: -20px;
background: green;
opacity: 0.6;
}
.header-image a{
padding: 40px 0;
}
.menu-container{
width: 100%;
border: 1px red solid;
height: 40px;
margin-top: 50px;
}
just add this to your image class:
margin: 0 auto;
margin-top: -20px;
Ii's been a while since I programmed a website and it seems that I have forgot some basic concepts about FLOAT!
Can anyone help making this (on picture) layout using 4 divs and FLOAT?
I have tried this:
<header>
<div id="fill_left"></div>
<div id="top"></div>
<div id="fill_right"></div>
<div id="bottom"></div>
</header>
And CSS:
header {
width: 100%;
height: 9em;
background-color: lightblue;
}
#fill_left{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
#top{
width:80%;
height: 50%;
background-color: lightgray;
float: left;
}
#bottom{
width:80%;
height: 50%;
background-color: lightseagreen;
float: left;
}
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
float: left;
}
And of course they're all inside a wrapper{ width: 100%, height: 138px}
Thanks
You could do it by using an extra div to warp div-2 and div-3 by set float: left;
JSFiddle - DEMO or Full Screen View
HTML:
<div id="div-p">
<div id="div-1"></div>
<div id="div-c">
<div id="div-2"></div>
<div id="div-3"></div>
</div>
<div id="div-4"></div>
</div>
CSS:
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
}
#div-c {
width: 90%;
height: 138px;
float: left;
}
#div-1 {
width: 5%;
float: left;
height: 100%;
background: red;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
float: left;
height: 100%;
background: black;
}
Solution 2:
You could also do it by using display: inline-block; and set font-size:0px; to #div-p for remove the white-space and then set font-size: 16px; (i.e 16px = 1em) to child elements.
JSFiddle - DEMO or Full Screen View
body {
margin:0;
}
#div-p {
width: 100%;
height: 138px;
font-size: 0px;
}
#div-c {
width: 90%;
height: 138px;
display: inline-block;
font-size: 16px;
}
#div-1 {
width: 5%;
display: inline-block;
height: 100%;
background: red;
font-size: 16px;
}
#div-2 {
width: 100%;
height: 50%;
background: green;
}
#div-3 {
width: 100%;
height: 50%;
background: blue;
}
#div-4 {
width: 5%;
display: inline-block;
height: 100%;
background: black;
font-size: 16px;
}
That simple Notice the order: http://jsbin.com/liqulo/1/edit
<div id="fill_left"></div>
<div id="fill_right"></div>
<div id="top"></div>
<div id="bottom"></div>
CSS:
#fill_left,
#fill_right{
width: 5%;
height: 100%;
background-color: lightcoral;
}
#fill_left{ float: left; }
#fill_right{ float: right; } /* and notice Float Right */
But if I were you I would do it even simpler: http://jsbin.com/liqulo/2/edit
<header>
<div class="cont" id="top"></div>
<div class="cont" id="bottom"></div>
</header>
header {
width: 100%;
height: 9em;
background-color: lightcoral;
}
.cont{
width:90%;
height: 50%;
margin:0 auto;
}
Currently I am making a website. I input images into a div, and then text overlays that image to describe it. I put the text over the image, and then put a opacity of .5. The problem with my code is that the text will not scroll. The scroll is shown, but it will not work.
My HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<style type="text/css">
<!--
body {
margin: 0px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="background">
<h10>.</h10>
</div>
<div id="header">
<div id="logobackground">
<img src="http://localhost/cabinchic/logo.png">
</div>
<div id="navbar">
<a href="http://localhost/cabinchic/home.html">
<div id="homebutton">
<h1> Home </h1>
</div>
</a>
<a href="http://localhost/cabinchic/homedecor.html">
<div id="homedecorbutton" style="border-radius: 8px; color: #00693E;;background-image: url(http://localhost/cabinchic/woodplankgreen.jpg)">
<h1> Home Decor </h1>
</div>
</a>
<a href="http://localhost/cabinchic/askheather.html">
<div id="askheatherbutton">
<h1> Ask Heather </h1>
</div>
</a>
</div>
</div>
<div id="leftbox">
</div>
<div id="mainbox">
<div class="picture" style="background-image: url(http://localhost/cabinchic/stones.jpg)">
<div class="text">
<h1> 26473264738654356427564 gyugfyubyeefwafwaf67erafh6ea7f67webf7bqyeuiewHFUIWhf78whiuNEuiwehui </h1>
</div>
</div>
</div>
<div id="footer">
<div id="footerborder">
<h10>.</h10>
</div>
<center>
<img src="http://localhost/cabinchic/logo.png" style="max-height: 18%; margin-top: -2%">
<div id="footertextcr"> <h1>All Rights Reserved © 2014 Python Daily</h1> </div>
<div id="footertext"> <h1>Logo made by Fatpaint | Site made by Michael Jones</h1> </div>
</center>
</div>
</div>
</body>
</html>
My CSS
/*Dartmouth Green Color Code Is #00693E*/
#background {
background-image: url("http://localhost/cabinchic/flatstone.jpg");
z-index: -10;
height: 160%;
width: 100%;
position: absolute;
}
#wrapper {
height: 100%;
width: 100%;
/*overflow-y: scroll;*/
position: absolute;
}
#header {
height: 100%;
width: 100%;
position: fixed;
}
#logobackground {
width: 100%;
background-image: url("http://localhost/cabinchic/wood.jpg");
text-align: center;
position: fixed;
margin-top: -3.8%;
}
#navbar {
height: 10%;
width: 100%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
margin-top: 13.6%;
position: fixed;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#homebutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 19%;
text-align: center;
font-size: 80%;
color: black;
}
#homebutton:hover {
color: #00693E;
border-radius: 8px;
}
#homedecorbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 44%;
text-align: center;
font-size: 80%;
color: black;
}
#homedecorbutton:hover {
color: #00693E;
border-radius: 8px;
}
#askheatherbutton {
background-image: url("http://localhost/cabinchic/woodplank.jpg");
height: 10%;
width: 12%;
position: fixed;
margin-left: 69%;
text-align: center;
font-size: 80%;
color: black;
}
#askheatherbutton:hover {
color: #00693E;
border-radius: 8px;
}
#leftbox {
width: 20%;
height: 105.8%;
position: absolute;
background-image: url("http://localhost/cabinchic/barkpine.jpg");
margin-top: 19%;
border-right: 1px solid black;
border-bottom: 1px solid black;
border-top: 1px solid black;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
z-index: -1;
background-size: 100%;
}
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
z-index: -1;
}
.picture {
border-radius: 6px;
border: 1px solid black;
background-size: cover;
position: absolute;
height: 55%;
width: 80%;
margin-left: 10%;
border-bottom-right-radius: 0px;
max-height: 55%;
z-index: 1;
}
.text {
overflow-y: scroll;
width: 100%;
height: 20%;
max-height: 20%;
background-color: black;
color: white;
opacity: .5;
border-top: 2px solid white;
margin-top: 34.3%;
font-size: 60%;
z-index: 2;
position: relative;
}
#footer {
width: 100%;
margin-top: 70%;
background-image: url("http://localhost/cabinchic/wood.jpg");
border-bottom: 1px solid black;
}
#footerborder {
width: 100%;
height: 2%;
margin-top: 40%;
background-image: url("http://localhost/cabinchic/woodbark.jpg");
}
#footertextcr {
color: white;
font-size: 50%;
margin-top: -3.5%;
}
#footertext {
color: white;
font-size: 40%;
margin-top: -1%;
}
a, u {
text-decoration: none;
}
Sorry that there is no spacing in the CSS code it didn't paste right...
Problem #1:
Your header has a height of 100%, a width of 100%, and is fixed over the page, thus covering the div and scroll bars and removing the ability to scroll.
Problem #2:
The container for the text, #mainbox has a z-index of -1, thus putting it and its children behind of everything else:
#mainbox {
width: 76%;
height: 100%;
position: absolute;
margin-top: 20.4%;
margin-left: 22%;
background-image: url("http://localhost/cabinchic/barkbrown.jpg");
border-radius: 8px;
border: 1px solid black;
/*background-size: 100%;*/
}
JSFiddle Demo