AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

Inserare imagine fundal, background HTML

Īn HTML, putem ad?uga cu u?urin?? imaginea de fundal īn documentul HTML care urmeaz? s? fie afi?at pe o pagin? web folosind urm?toarele dou? metode diferite:

Utilizarea atributului Background (Etichet? HTML)
Utilizarea unei foi de stil interne

Dac? dorim s? ad?ug?m imaginea de fundal īn documentul HTML folosind atributul Background, atunci trebuie s? urm?m pa?ii de mai jos. Folosind ace?ti pa?i, putem vizualiza cu u?urin?? o imagine pe o pagin? web:

Īn primul rānd, trebuie s? tast?m codul HTML īn orice editor de text sau s? deschidem fi?ierul HTML existent īn editorul de text īn care dorim s? utiliz?m atributul de fundal.

Sintaxa:
<body background="image_fisier.jpg">

 

Exemplu:
Pute?i īncerca s? rula?i urm?torul cod pentru a observa imaginea pe fundal

<!DOCTYPE html>
<html>
<head>
<title>Inserare imagine fundal, background HTML - example</title>
</head>
<body background="https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg">
<h2>Inserare imagine fundal, background HTML</h2>
<p>Inserare imagine fundal, background HTML</p>
</body>
</html>

 

Utilizarea unei foi de stil interne pentru inserare imagine fundal HTML

Folosirea foii de stil (<style>) CSS intern.
Dac? dorim s? ad?ug?m imaginea de fundal īn documentul HTML folosind CSS intern, atunci trebuie s? urm?m pa?ii de mai jos.
Folosind ace?ti pa?i, putem vizualiza cu u?urin?? o imagine pe o pagin? web, exemplu:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS background image size to fit full screen responsive - how to create - example</title>
<style>
body {
/* Location of the image for page */
background-image: url(https://www.agernic.com/uploads/css-background-image-size-fit-full-screen.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
h1,h2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
}
#container { width: auto; margin: 50px auto; padding: 20px; background: white; -moz-box-shadow: 0 0 20px black; -webkit-box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }
</style>
<head>
<body>
<div id="container">
<h1>CSS background image size to fit full screen - how to create - example</h1>
This is a way to add background image for a web page using html. <br />
In this case I used:<br />
<strong>html</strong>
to cover the entire background. <br />
</div>
<html/>
</body>

 

inserare imagine fundal html
aliniere imagine html
imagine html efecte imagini
chenar, culoare bordura
Tags: imagine html link, de fundal, background, aliniere imagine html, centrare, bordura, marime

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika