Solved

Making image center and stretched out

Posted on 2016-09-17
4
44 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 55

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 55

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 55

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
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.
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

789 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