Solved

Making image center and stretched out

Posted on 2016-09-17
4
39 Views
Last Modified: 2016-09-17
I have a photo that I want it to be center but stretched out through the whole page on the right and left side? Is this possible?



This is the code i have so far
 
 <img src="Page.jpg" alt="HTML5 Icon" width="100%" height="1000" >
 
 
 
 <center>
 <img src="Logo.jpg" alt="HTML5 Icon" width="250" height="80">
</center>
  </div>
The other image is a footer image that is already center and small on the page
0
Comment
Question by:Jasmine Ikhreishi
  • 3
4 Comments
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 41802993
I have a photo that I want it to be center but stretched out through the whole page on the right and left side
If it is full width - how does centering come into it?
Are you talking about a background image

<!doctype html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body, html {
	height: 100%;
	width: 100%;
}
body {
	background: url(page1.jpg) no-repeat center center;
	background-size: cover;
}
</style>
</head>
<body>
</body>
</html>

Open in new window

Sample here
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41803000
I dont want it as a background image, I want it to be like the
Header(which has all those directing buttons)
PHOTO
Footer(which is a small image at the end center)

Open in new window


And the photo to be center since the footer would be center to it, and the photo to have full width but not height ill declare the height. I did widith:100% but it didnt work
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41803097
How can you have full width and center - I don't understand? Center will apply to photo's that are not full width?
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 41803104
To make a photo full width - its container has to be full width.
Do you mean like this
<!doctype html>
<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
body, html {
	height: 100%;
	width: 100%;
}
footer, header {
  background: #428bca none repeat scroll 0 0;
  color: #fff;
  height: 52px;
  line-height: 52px;
  
}
.container {
	width: 1024px;
	margin: 0 auto;
}
section img {
	width: 100%;
	display: block;
}
</style>
</head>
<body>
<header>
	<div class="container">Header</div>
</header>
<section>
	<img src="images/background4.jpg" />
</section>
<footer>
	<div class="container">Footer</div>
</footer>
</body>
</html>

Open in new window

Sample here
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to get this page layout correct 13 29
Divi Theme - extra fonts I don't want 13 25
Html test in IIS 4 20
How to create a textarea which saves text in HTML 8 37
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question