Solved

Making image center and stretched out

Posted on 2016-09-17
4
51 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
4 Comments
 
LVL 58

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 58

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 58

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

Are You Using the Best Web Development Editor?

The worlds of web hosting and web development are constantly evolving. Every year we see design trends change, coding standards adapt and new frameworks/CMS created. With such a quick pace of change it’s easy to get lost trying to keep up.

See if your editor made the list.

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

617 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