1. дома
  2. Вопрос и ответ
  3. Как установить фоновое изображение, подходящее для браузера с помощью html

Как установить фоновое изображение, подходящее для браузера с помощью html

2014-01-10 2 views
3

Я сделал простую страницу входа и установил изображение в качестве фона, но оно не подходит для экрана браузера. Я использую html для этой цели, что мне делать в соответствии с изображением на экран браузера. Пожалуйста, опишите подробно.Как установить фоновое изображение, подходящее для браузера с помощью html

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01Transitional 
//EN""http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>JSP Page</title> 
</head> 
<body> 
<h1>Login Page</h1> 
<center> 
<h2>SignUp Details</h2> 

<body background="Indian_wallpapers_205.jpg"> 
<form action="LoginCheck.jsp"method="post"> 
</br>Username:<input type="text" name="username"> 
</br>Password:<input type="password" name="password"> 
</br> 
<input type="submit" value="Submit"> 
</form> 
</center> 
</body> 
</html>

источник

2014-01-10 Make

+1

с помощью CSS, чтобы решить эту проблему ... и проверить эту ссылку 'css-tricks.com/perfect-full-page-background-image' –

+0

* Sidenote: * ''

тег является устаревшим & удалены из поддержки браузера. Не используйте его. – Raptor

ответ

13

Вы можете достичь того, чего хотите, создав файл .css и ссылку на свой тег <head> сразу после </title> (закрывающий тег заголовка).

Изображение с высоким разрешением будет полезно использовать около 2112x1584 пикселей, но учитывает размер файла, поскольку это будет иметь значение для времени загрузки страницы.

При открытии тэга <body> просто удалите свойство фона, поскольку оно будет объявлено через .css-файл.

Когда изображение готово, поместить этот код в свой .css файл

body { 
background-image: url(imagePAth/Indian_wallpapers_205.jpg); /*You will specify your image path here.*/ 

-moz-background-size: cover; 
-webkit-background-size: cover; 
background-size: cover; 
background-position: top center !important; 
background-repeat: no-repeat !important; 
background-attachment: fixed; 
}

Когда файл .css будет сделано, вы можете связать его с <head> тега. Это будет выглядеть примерно так: <link rel="stylesheet" type="text/css" href="yourCSSpath/yourCSSname.css" />

Вот как я делаю фоновое изображение в соответствии с экраном браузера.

источник

2014-01-10 05:54:11

+0

'! Important' не требуется. – Raptor

0

добавить CSS в таблице стилей

body 
    { 
     background:url(Desert.jpg) no-repeat center center fixed; 
     background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     margin: 0; 
     padding: 0; 
    }

FIDDLE

источник

2014-01-10 05:45:33 Karuppiah

1

использование фона размер: крышка собственности. это будет полный экран.

body{ 
background-size: cover; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
}

here is fiddle link

источник

2014-01-10 05:48:46

0

Попробуйте этот код: Это может помочь вам

<html> 
    <head> 
<style> 
    body 
     { 
      background:url('images/top-left.jpg') no-repeat center center fixed; 
      background-size: cover; 
      -webkit-background-size: cover; 
      -moz-background-size: cover; 
      -o-background-size: cover; 
      margin: 0; 
      padding: 0; 
     } 

    </style> 
</head> 
    <body> 
    <form action="LoginCheck.jsp"method="post"> 
    </br>Username:<input type="text" name="username"> 
    </br>Password:<input type="password" name="password"> 
    </br> 
    <input type="submit" value="Submit"> 
    </form> 
    </center> 
    </body> 


</html>

источник

2014-01-10 05:48:47

+1

'