Solved

Making image center and stretched out

Posted on 2016-09-17
4
34 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 52

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 52

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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
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…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

930 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

10 Experts available now in Live!

Get 1:1 Help Now