Dylan Dylan - 1 year ago 54
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.


<!DOCTYPE html>

<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>

<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 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>

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



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;

text-align: center;
margin: 0 auto;

#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 Source

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


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.