Solved

Making image center and stretched out

Posted on 2016-09-17
4
31 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 51

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 51

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 51

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

760 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now