part tow images tag chapter 10


PART TOW HTML IMAGE TAG




Background Image on a HTML element

To add a background image on an HTML element, you can use the style attribute:
<!DOCTYPE html>
<html>
<body>

<h2>Background Image</h2>

<div style="background-image: url('temp.jpg');">
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>

OUTPUT
Background Image
You can specify background images
for any visible HTML element.
In this example, the background image
is specified for a div element.
By default, the background-image
will repeat itself in the direction(s)
where it is smaller than the element
where it is specified. (Try resizing the
browser window to see how the
background image behaves.









You can also specify the background image in the <style> element:

<!DOCTYPE html>
<html>
<style>
div {
  background-image: url('temp.jpg');
}
</style>
<body>

<h2>Background Image</h2>

<div>
You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>

</body>
</html>

Background Image on a Page

 

If you want the entire page to have a background image, then you must specify the background image on the <body> element:

 

<!DOCTYPE html>
<html>
<style>
body {
  background-image: url('temp.jpg');
}
</style>

<body>

<h2>Background Image</h2>

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

</body>
</htm

Background Repeat

 

If the background image is smaller than the element, the image will repeat itself, horizontally and vertically, until it reaches the end of the element:

<!DOCTYPE html>

<html>

<style>

body {

  background-image: url('temp.jpg');

}

</style>

 

<body>

 

<h2>Background Repeat</h2>

 

<p>By default the background image will repeat itself if it is smaller than the element where it is specified, in this case the BODY element.</p>

 

</body>

</html>


To avoid the background image from repeating itself, use the background-repeat property.

<!DOCTYPE html>

<html>

<style>

body {

  background-image: url('temp.jpg');

  background-repeat: no-repeat;

}

</style>

 

<body>

 

<h2>Background No Repeat</h2>

 

<p>You can avoid the image from being repeated by setting the background-repeat property to "no-repeat".</p>

 

</body>

</html>

 

 

 

 


Background Cover

 

If you want the background image cover the entire element, you can set the background-size property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property to fixed:

 

<!DOCTYPE html>

<html>

<style>

body {

  background-image: url('temp.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed; 

  background-size: cover;

}

</style>

<body>

 

<h2>Background Cover</h2>

 

<p>Set the background-size property to "cover" and the background image will cover the entire element, in this case the BODY element.</p>

 

</body>

</html>

 

 


Background Stretch

 

If  you want  the background image stretch to fit the entire image in the element, you can set the background-size property to 100% 100%:

 

<!DOCTYPE html>

<html>

<style>

body {

  background-image: url('temp.jpg');

  background-repeat: no-repeat;

  background-attachment: fixed;

  background-size: 100% 100%;

}

</style>

<body>

 

<h2>Background Stretch</h2>

 

<p>Set the background-size property to "100% 100%r" and the background image will be stretched to cover the entire element, in this case the BODY element.</p>

 

</body>

</html

created by: unknown programmer



Popular posts from this blog

HTML5 COMMENTS & CSS CHAPTER 8

Image
EIGHTH TUTORIAL ON HTML COMMENTS & CSS HTML comments are not displayed in the browser, but they can help document your HTML source code. HTML Comment Tags You can add comments to your HTML source by using the following syntax: <!-- Write your comments here --> With comments you can place notifications and reminders in your HTML: <!DOCTYPE html> <html> <body> <!-- This is a comment --> <p>This is a paragraph.</p> <!-- Comments are not displayed in the browser --> </body> </html> OUTPUT This is a paragraph. Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors: <!DOCTYPE html> <html> <body> <!-- Do not display this at the moment <img border="0" src="pic_trulli.jpg" alt="Trulli"> --> </body> HTML  Styles – CSS ...
Read more

HTML FORMS INPUT TYPES CHAPTER 25 PART THREE

Image
25 th TUTORIAL ON HTML FORMS INPUT TYPES PART THREE HTML Input Types This chapter describes the different types for the HTML  <input>  element.   HTML Input Types Here are the different input types you can use in HTML: <input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> <input type="datetime-local"> <input type="email"> <input type="file"> <input type="hidden"> <input type="image"> <input type="month"> <input type="number"> <input type="password"> <input type="radio"> <input type="range"> <input type="reset"> <input type="search"> <input type="submit"> <input type="tel"> <input type="text">...
Read more

HTML5 ELEMENTS CHAPTER 4

Image
FOURTH TUTORIAL IS HTML ELEMENTS HTML  Elements An HTML element usually consists of a  start  tag and an  end  tag, with the content inserted in between: < tagname > Content goes here... < /tagname > The HTML  element  is everything from the start tag to the end tag: < p > My first paragraph. < /p > Start tag         Element content         End tag <h1>                      My First Heading                  </h1> <p>                        My first paragraph.        ...
Read more