0
Я пытаюсь создать несколько стеков изображений сверху вниз страницы, используя пустые divs с примененным к ним фоном-изображением, проблема в том, что они не У меня есть размер, который браузер действует так, как будто их не существует, есть ли взломать это исправление? когда я добавляю «width» и «height» of «auto», ответы, как будто я не добавляю никаких элементов в div. Если для параметра «background-size» установлено значение «cover», они складывают один поверх другого. Вот фото макета того, что я хочу, чтобы мой конечный результат выглядеть следующим образом: http://i58.tinypic.com/9uptlw.jpgСоздание фонового изображения из div и сделать его автоматическим изменением размера
Вот код:
/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t vertical-align: baseline;
}
/* end of browser styles */
@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
#logo {
\t padding-right: 10px;
\t padding-top: 10px;
}
nav {
\t background: rgba(0,0,0,.7);
\t padding: 5px 0;
\t position: relative;
\t z-index: 10px;
}
nav li {
\t display: inline;
\t padding: 0 20px;
}
nav ul {
\t list-style-type: none;
}
nav ul a{
\t text-decoration: none;
\t color: white;
}
nav a:hover {
\t color: rgb(207, 207, 207);
}
body {
\t height: auto;
\t width: auto;
}
#bg1 {
\t background: url(../images/wedding.png) no-repeat center center;
\t /*width: 1280px;
\t height: 720px;*/
\t background-size: cover;
}
#bg2 {
\t background: url(../images/earrings.png) no-repeat;
\t /*width: 1280px;
\t height: 720px;*/
\t background-size: cover;
}
#bg3 {
\t background: url(../images/watch.png) no-repeat;
\t /*width: 1280px;
\t height: 720px;*/
\t background-size: cover;
}
#bg4 {
\t background: url(../images/lightning.png) no-repeat;
\t /*width: 1280px;
\t height: 720px;*/
\t background-size: cover;
}<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
\t <head>
\t \t <meta charset="utf-8">
\t \t <title>SD עיצובים</title>
\t \t <link href="css/style.css" rel="stylesheet">
\t </head>
\t <body>
\t \t <div id="wrapper">
\t \t \t <header div="mainHeader">
\t \t \t \t <nav div="mainNav">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <img id="logo" src="images/title.png"/>
\t \t \t \t \t \t <li><a href="index.html">דף הבית</a></li>
\t \t \t \t \t \t <li><a href="about.html">אודות</a></li>
\t \t \t \t \t \t <li><a href="jewelery.html">תכשיטים</a></li>
\t \t \t \t \t \t <li><a href="contact.html">צור קשר</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </nav>
\t \t \t </header>
\t \t \t <div id="bg1"></div>
\t \t \t <div id="bg2"></div>
\t \t \t <div id="bg3"></div>
\t \t \t <div id="bg4"></div>
\t \t </div>
\t </body>
</html>/* reset browser styles */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t border: 0;
\t font-size: 100%;
\t vertical-align: baseline;
}
/* end of browser styles */
@import url(http://fonts.googleapis.com/earlyaccess/notosanshebrew.css);
#logo {
\t padding-right: 10px;
\t padding-top: 10px;
}
nav {
\t background: rgba(0,0,0,.7);
\t padding: 5px 0;
\t position: relative;
\t z-index: 10px;
}
nav li {
\t display: inline;
\t padding: 0 20px;
}
nav ul {
\t list-style-type: none;
}
nav ul a{
\t text-decoration: none;
\t color: white;
}
nav a:hover {
\t color: rgb(207, 207, 207);
}
html, body { width: 100%; height: 100%}
#bg1 {
\t background: url(../images/wedding.png) no-repeat;
\t display: block;
\t height: 1920px;
\t width: 1080px;
\t background-size: cover;
}<!doctype html>
<html dir="rtl" lang="he-IL" prefix="og: http://ogp.me/ns#">
\t <head>
\t \t <meta charset="utf-8">
\t \t <title>SD עיצובים</title>
\t \t <link href="css/style.css" rel="stylesheet">
\t </head>
\t <body>
\t \t <div id="wrapper">
\t \t \t <header div="mainHeader">
\t \t \t \t <nav div="mainNav">
\t \t \t \t \t <ul>
\t \t \t \t \t \t <img id="logo" src="images/title.png"/>
\t \t \t \t \t \t <li><a href="index.html">דף הבית</a></li>
\t \t \t \t \t \t <li><a href="about.html">אודות</a></li>
\t \t \t \t \t \t <li><a href="jewelery.html">תכשיטים</a></li>
\t \t \t \t \t \t <li><a href="contact.html">צור קשר</a></li>
\t \t \t \t \t </ul>
\t \t \t \t </nav>
\t \t \t </header>
\t \t \t <div id="bg1"></div>
\t \t \t <div id="bg2"></div>
\t \t \t <div id="bg3"></div>
\t \t \t <div id="bg4"></div>
\t \t </div>
\t </body>
</html>
снова обновлен мальчик вы хард один – Prozi