Как добавить фоновое изображение, если на изображении уже есть изображение?

Это форма входа, которую я создаю, и у нее уже есть изображение (некоторый логотип). Я хотел бы добавить фоновое изображение для той же страницы, чтобы сделать его красивым. К сожалению, мой CSS не помогает мне это делать. Что я должен сделать, чтобы добавить фоновое изображение на моей веб-странице, когда уже есть изображениеКак добавить фоновое изображение, если на изображении уже есть изображение?

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title> 
     Login 
    </title> 
    <link rel="stylesheet" type="text/css" href="css/Login.css"> 
    </head> 
    <body > 
    <header > 
     <h1>Loan Management System </h1> 
    </header> 
    <!--This is the image --> 
    <img src="Images/logo_large.jpg" height="200px" width="200px" title="Logo" class="logo"> 
    <form> 
     <label>Username</label>      
     <input type="text" name="username"/>      
     <label>Password</label>      
     <input type="password" name="password"/>      
     <button type="submit" name="login">Login</button> 
    </form> 
    </body> 
</html>

CSS

header 
{ 
    position:absolute; 
    font-size:13px; 
    color:#000040; 
    text-shadow:5px 5px 5px #CCCCD9; 
    margin-top:80px; 
    margin-left:280px; 
} 

body 
{ 
    position:relative; 
    font-family:Georgia,serif; 
    background-color:#A52A2A; 
    background-image:url(Images/login2.jpg); 
} 

.logo 
{ 
    position:absolute; 
    display:block; 
    padding:5px; 
} 

form 
{ 
    position:absolute; 
    width:300px; 
    height:300px; 
    border:5px solid #194775; 
    border-radius:20px; 
    margin-top:161px; 
    margin-left:362px; 
    box-shadow:2px 2px 2px #194775; 
} 

label,input 
{ 
    display:block; 
    margin-top:25px; 
    margin-left:55px; 
} 

label 
{ 
    font-weight:700; 
} 

input 
{ 
    width:200px; 
    height:2em; 
    border:2px solid #036; 
    border-radius:10px; 
} 

input:hover 
{ 
    border-radius:10px; 
    border-color:#FF8A00; 
} 

input:focus 
{ 
    background-color:#DBDBFF; 
} 

button 
{ 
    display:block; 
    margin-top:25px; 
    margin-left:55px; 
    width:90px; 
    height:40px; 
    color:#FFF; 
    border:2px solid #000; 
    border-radius:10px; 
    background-color:#243D91; 
} 

button:hover 
{ 
    background-color:#0FCCF0; 
    border-color:#003D91; 
}

источник

2014-02-03 Gihanmu

Это изображение 'Images/login2.jpg' относительно вашей таблицы стилей по этому пути? Если изображение не применяется, но цвет есть, это указывает на неправильный путь к изображению. –

, как сказал Джоэл, убедитесь, что путь к файлу верен. Обычно большинство веб-разработчиков используют «img», поэтому путь будет 'img/background.jpg'. Также убедитесь, что файл присутствует –

Можете ли вы добавить скрипку? –

Я отправляю это как «ответ», потому что это просто слишком долго для комментария. Как я упоминал в своих комментариях, css-пути к URL-адресам анализируются относительно каталога, где хранится css, а не каталога страницы, которая его включает. В качестве примера:

У вас есть сайт с корневым и 2 подпапками, CSS и Images. Ваша структура каталогов может выглядеть следующим образом:

mypage.html 
myotherpage.html 
CSS\styles.css 
CSS\layout.css 
Images\login.jpg 
Images\login2.jpg

Если mypage.html имеет ссылочный ссылку на styles.css, то любые URL изображения, которые включены в styles.css нужно будет ссылаться из каталога CSS.

background-image: url(Images/login2.jpg); 
/* This fails because there is no CSS\Images directory */ 

background-image: url(../Images/login2.jpg); 
/* This works because that is the natural path to the Images directory from CSS */

Чтобы избежать путаницы, я предпочитаю использовать абсолютные пути в моем CSS когда это возможно, но это становится понятно, трудно, когда у вас есть потенциал, чтобы пересекать границы домена или протокола. Если у вас несколько доменов, указывающих на одну и ту же папку сайта, то у вас будет ссылка на стиль с myfirstsite.com на mysecondsite.com, и это может быть неуместным (особенно если проблема с брендингом является проблемой). У вас может также быть https-часть сайта, которая затем будет иметь ссылку на версию https-сайта, которая создавала бы ошибки/предупреждения ssl.

источник

2014-02-03 16:20:44

Спасибо за все :-) – Gihanmu

Ну, очевидно подозреваемый будет что вы проверяете путь к изображению. Если это так, то вам может понадобиться посмотреть на свойство z-index CSS. Это касается способа упорядочения изображений в вертикальном пространстве. Вы можете прочитать об этом here .. В вашем случае фон тела будет сзади (z-index: 0), а затем логотип спереди (z-index : 1).

источник

2014-02-03 15:20:22

Я думаю, как упомянуто в комментариях. Вы должны проверить свой путь, чтобы убедиться, что он отображает.

Проверьте мои Fiddle

body{ 
position:relative; 
font-family:Georgia,serif; 
/* I have used background-color property and it gets applied, but I really do not want it*/ 
background-color:brown; 
/* Here is my background image.But it is not applied in the page */ 
background-image:url("https://mozorg.cdn.mozilla.net/media/img/firefox/os/bg/1400/birthday.jpg"); 
}

источник

2014-02-03 15:23:08 Anele

Как добавить фоновое изображение, если на изображении уже есть изображение?

ответ

Смежные вопросы