100% image width?
I am new to web design and for class. I am creating a website for a restaurant and I made my layout, but I am having a problem (or maybe not being able to) getting my image to appear the same as in my layout (image to follow)
Here is the top of my layout
I want the title to be 100% (figured this out) the image is 100% width
the image is 1480x808 and with this code it remains 100% width, but the height does not match my next section (it either pushes it completely off the page, or in other resolutions has a big white gap between it and the next section)
Can anyone point me in the right direction here?
Would love this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#header {
height: 100px;
background-image: url(_images/headerpattern.jpg);
background-repeat: repeat;
}
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
}
#redbar {
height: 10px;
width: 100%;
background-color: #94201f;
}
#slogan {
height: 207px;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="mainpicture"><img src="_images/mainpic.jpg" alt="" width="100%"/></div>
<div id="redbar"></div>
<div id="slogan">Content for id "slogan" Goes Here</div>
<div id="redbar"></div>
</div>
</body>
</html>
source to share
remove height from #mainpicture. or if you need the height you can try to put the image in the background of the C # mainpicture and set the background cap to the background. Close the #mainpicture div blank
like
<div id="mainpicture"></div>
CSS
#mainpicture {
height: 808px;
width: 100%;
max-height: 808px;
margin-left: auto;
margin-right: auto;
background-image:url(_images/mainpic.jpg);
background-position:center top;
background-size:cover;
}
source to share
If you want your page to be responsive, you must have some rules.
You want the image to be displayed as well as the slogan area. But the page can be seen on multiple devices with multiple sizes.
So you have to use relative sizes, so your goal can be achieved thanks to a variety of devices ...
Place the image inside a div with relative dimensions ...
source to share