Dylan Dylan - 3 months ago 6
CSS Question

Choosing what part of an image to display in a container smaller than the image size

I can't figure out how to choose the bottom part of the image that I'm using on the homepage of my website.

Its automatically starting from the top down but I want to choose what part to see, which would be lower down on the image.

html

<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
<title>Kilbride Classic Cuisine</title>
</head>

<body>
<div id="toplocation">
<i class="fa fa-fax"></i> (01)-8393790&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
<i class="fa fa-map-marker">&nbsp Unit 10,11,12, Baldoyle Industrial Estate, Dublin 13, Ireland</a></i>
</div>
<div class="container-fluid">
<div id="menu">
<ul id="menu">
<li><a href="#Home">Home</a></li>
<li><a href="#OurProducts">Our Products</a></li>
<li><a href="#OurBrands">Our Brands</a></li>
<li><a href="Aboutpage.php">Contact Us</a></li>
</ul>
</div>
</div>

<div class="imgwrap">
<div id="img1">

</div>
</div>


css

html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}

#toplocation {
background-color: #4d4d4d;
color: White;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 100px;
}

.container-fluid {
background-color: #fb0e3d;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 0px;
}


/*.column{
text-align: center;
margin: 0 auto;
background-color:#b93333;
}*/

#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #000000;
}

#menu li {
float: left;
background-color: #fb0e3d;
}

#menu li a {
display: block;
border-bottom-right-radius: 0pxpx;
border-bottom-left-radius: 0pxpx;
padding: 40px;
width: 120px;
text-decoration: none;
color: white;
border-right: 1px solid #ccc;
font-weight: bold;
}

#menu li a:hover {
color: #fb0e3d;
background-color: #fff;
}

div.imgwrap {
width: 100%;
height: 350px;
max-width: MaxSize;
max-height: MaxSize;
border: 3px solid #4d4d4d;
background-image: url('quiche.jpg');
background-size: cover;
background-repeat: no-repeat;
margin: 0px;
padding: 0;
position: absolute;
}

#contact {
margin-top: 30px;
text-align: center;
font-size: 30px;
color: #fb0e3d;
font-weight: bold;
}

#imgcontainer {
width: 80%;
height: 30%;
align: center;
}

#info {
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
}

#map {
align: right;
width: 30%;
height: 30%;
}

Answer

Have a look at the background-position property at the link below.

http://www.w3schools.com/cssref/pr_background-position.asp

This will allow you to specify where you want the image to start. For example, you may specify background-position: center bottom; to show the lower central part of the image. Alternatively you can specify absolute values in pixels.

Comments