0
Ich bin auf der Suche nach einer Möglichkeit, ein vollständiges Hintergrundbild reagieren, aber mit internen CSS. Ich habe so viele andere Codes ausprobiert, aber nichts scheint zu funktionieren (getestet in Chrome und Firefox). Die Haltepunkte, die ich habe, sind 320px, 480px, 768px, 1366px und 1920px. Das ist was ich in Bezug auf Code habe. Wie genau sollte ich diese Medienabfragen markieren, um das Hintergrundbild für die entsprechende Breite zu erhalten? Und was sollte beim Entwurf eines Bildes die passende Höhe sein?Volles Hintergrundbild reagiert intern 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>
Nicht sicher zu verstehen .. Sie möchten nur ein Hintergrundbild für Ihren Körper, richtig? Vielleicht meinst du, du willst nicht, dass es sich bewegt, wenn wir die Seite scrollen? – AymDev
Und übrigens, könntest du erklären, was meinst du mit "internal CSS"? – AymDev
@AymDev Ich denke er meint das interne Stylesheet. –