0
Я ищу способ сделать полное фоновое изображение отзывчивым, но с внутренним CSS. Я пробовал так много других кодов, но ничего не работает (проверено в Chrome и Firefox). Точки останова, которые у меня есть, - 320 пикселей, 480 пикселей, 768 пикселей, 1366 пикселей и 1920 пикселей. Это то, что я имею в терминах кода. Итак, как именно я должен пометить эти медиа-запросы, чтобы дать фоновое изображение для соответствующей ширины? Кроме того, при проектировании изображения, какая должна быть соответствующая высота?полное фоновое изображение отзывчивое внутреннее CSS
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Naamloos document</title>
<style>
body {
/* Location of the image */
background-image: url(Version1/dr-muller-landing-page_1920x1080px.png);
/* Image is centered vertically and horizontally at all times */
background-position: center center;
/* Image doesn't repeat */
background-repeat: no-repeat;
/* Makes the image fixed in the viewport so that it doesn't move when
the content height is greater than the image height */
background-attachment: fixed;
/* This is what makes the background image rescale based on its container's size */
background-size: cover;
/* Pick a solid background color that will be displayed while the background image is loading */
background-color: rgb(236,146,189);
/* SHORTHAND CSS NOTATION
* background: url(background-photo.jpg) center center cover no-repeat fixed;
*/
}
<style>
/* Three website */
* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, 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 font: inherit;
\t vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
}
body {
\t line-height: 1;
}
ol, ul {
\t list-style: none;
}
blockquote, q {
\t quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
\t content: '';
\t content: none;
}
table {
\t border-collapse: collapse;
\t border-spacing: 0;
}
.photo-grid {
\t margin: 290px auto;
\t margin-bottom: 0px;
\t max-width: 1920px;
\t text-align: center;
}
.photo-grid li {
\t display: inline-block;
\t margin: 15px;
\t width: 500px;
\t height: 500px;
\t text-align: center;
}
.photo-grid img {
\t display: block;
\t max-height: 100%;
\t max-width: 100%;
}
.photo-grid figure {
\t height: 400px;
\t overflow: hidden;
\t position: relative;
\t width: 400px;
}
.photo-grid figcaption {
\t background: rgba(0,0,0,0.5);
\t color: white;
\t display: table;
\t height: 100%;
\t left: 0;
\t opacity: 0;
\t position: absolute;
\t right: 0;
\t top: 0;
\t z-index: 100;
}
.photo-grid figcaption p {
\t display: table-cell;
\t font-size: 1.5em;
\t position: relative;
\t top: -40px;
\t width: 500px;
\t vertical-align: middle;
}
.photo-grid li:hover figcaption {
\t opacity: 1;
}
.photo-grid img {
\t display: block;
\t height: 500px;
\t width: 500px;
\t -webkit-transition: all 300ms;
\t -moz-transition: all 300ms;
\t transition: all 300ms;
\t max-width: 100%;
}
.photo-grid li:hover img {
\t -webkit-transform: scale(1.4);
\t -moz-transform: scale(1.4);
\t transform: scale(1.4);
}
.photo-grid figcaption p {
\t display: table-cell;
\t color: white;
\t font-size: 2em;
\t position: relative;
\t top: -40px;
\t width: 500px;
\t -webkit-transition: all 300ms ease-out;
\t -moz-transition: all 300ms ease-out;
\t transition: all 300ms ease-out;
\t vertical-align: middle;
}
.photo-grid li:hover figcaption p {
\t -moz-transform: translateY(40px);
\t -webkit-transform: translateY(40px);
\t transform: translateY(40px);
}
.photo-grid figcaption {
\t background: rgba(192,192,192,0.3);
\t color: white;
\t display: table;
\t height: 100%;
\t left: 0;
\t opacity: 0;
\t position: absolute;
\t right: 0;
\t top: 0;
\t -webkit-transition: all 300ms;
\t -moz-transition: all 300ms;
\t transition: all 300ms;
\t -webkit-transition-delay: 100ms;
\t -moz-transition-delay: 100ms;
\t transition-delay: 100ms;
\t z-index: 100;
}
@font-face {font-family:Arial, Helvetica, sans-serif;
src:url(fonts/ITCAvantGardeStd-Demi.otf)
}
div{font-family:Arial, Helvetica, sans-serif;
}
}
</style>
</head>
Не уверен, что понял .. Вы просто хотите установить фоновое изображение на свое тело, не так ли? Может быть, вы имеете в виду, что вы не хотите, чтобы он двигался, если мы прокручиваем страницу? – AymDev
И, кстати, не могли бы вы объяснить, что вы подразумеваете под «внутренним CSS»? – AymDev
@AymDev Я предполагаю, что он означает Внутренний стили. –