0
Ich habe Hintergrundbilder für meine Website, aber der Hintergrund scheint auf die gleiche Größe wie der Browser zu halten. Ich werde auf Fotos unten erklären, was ich versuche zu erklären.HTML CSS Hintergrundbild behält Breite gleich Größe wie die Breite des Browsers
Das obere Bild zeigt der Hintergrund den Browser paßt, während das zweite Bild, der Hintergrund nicht paßt, wie der Browser auf die linken Seite abgeschnitten wurde, und hat in der Größe halbiert. Hier, anstatt Weißraum zwischen dem Hintergrundbild hinzuzufügen, möchte ich stattdessen das Bild vergrößern.
Ich bin nicht sicher, was könnte das Problem sein, danke für die Hilfe.
@import compass;
@import url(https://fonts.googleapis.com/css?family=Dosis);
@import url(https://fonts.googleapis.com/css?family=Marvel:400,400italic);
/*
html {
background: url(countryside.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
*/
@font-face {
font-family: 'Guldscript';
src: url('.eot');
src: url('guldscript.eot?#iefix') format('embedded-opentype'),
url('guldscript.woff2') format('woff2'),
url('guldscript.woff') format('woff'),
url('guldscript.ttf') format('truetype'),
url('guldscript.svg#Bruss') format('svg');
font-weight: normal;
font-style: normal;
}
html, body{overflow:hidden;}
h1 {
font-family: Guldscript;
color: #FCFFF5;
text-align: center;
font-size: 30px;
text-indent: 40px;
}
h2 {
font-family: Guldscript;
color: #FCFFF5;
text-align: center;
font-size: 20px;
text-indent: 40px;
}
body {
margin: 0;
padding: 0;
font-family: "Source Sans Pro", sans-serif;
}
header {
width: 100%;
padding: 10px 0;
background-color: #1E1E20;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
z-index: 9999;
top: 0;
position: fixed;
}
.container {
width: 40%;
margin: 180px auto;
}
.shrink {
padding: 0.5px 0;
}
.centered {
position: fixed;
top: 70%;
left: 70%;
margin-top: -35%;
margin-left: -35%;
}
.footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
background-color: #1E1E20;
font-family: Guldscript;
color: #FDFDFD;
font-size: 20px;
text-indent: 40px;
height:40px;
padding-top: 20px;
z-index: 10;
}
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #1E1E20;
font-family: 'Dosis', sans-serif;
}
li {
display: inline;
}
li a {
color: white;
text-align: center;
padding: 5px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
p.maintext {
\t padding-top: 100px;
\t padding-left: 20%;
\t padding-right: 20%;
\t font-family: 'Marvel', sans-serif;
\t color: white;
\t background-color: 1E1E20;
\t text-align: justify;
}
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}<!DOCTYPE html>
<!--
\t Sunday, 31st January 2016. | I got bored and made this website | v . 01
-->
<html>
\t <head>
<link rel="stylesheet" href="jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.maximage.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
<title>asd</title>
<link rel="stylesheet" href="styling.css"/>
<script type="text/javascript">
jQuery(document).ready(function() {
$(document).on("scroll", function(){
if ($(document).scrollTop() > 100) {
$(".header").addClass("shrink");
} else {
$(".header").removeClass("shrink");
}
});
});
</script>
<script>
$(function(){
$(".rslides").responsiveSlides({
auto: true,
fade: 700,
speed: 1500,
});
});
</script>
\t </head>
\t <body>
<header class="header">
<nav>
\t <h1>asde</h1>
<!--
<ul>
<li><a href="">me</a></li>
<li><a href="">photos</a></li>
<li><a href="">queries</a></li>
<li><a href="">connect</a></li>
</ul>
-->
</nav>
<!--<h2>Cardiff University</h2>-->
</header>
\t </body>
<!-- <div id="maximage">
</div>-->
<ul class="rslides">
<li><img src="images/home_slideshow/Rugby.jpg" alt="Image of Judgement day, Wales."></li>
<li><img src="images/home_slideshow/Tractor.jpg" alt="Image of our Tractor."></li>
<li><img src="images/home_slideshow/Axe.jpg" alt="Image of an Axe."></li>
</ul>
<div class="footer">
<center>asd</center>
</div>
</html>
Leider ist es nicht ganz klar, was Sie hier tun? –
Sie meinen, es behält die Größe selbst, nachdem Sie die 'background-size: cover'-Bits kommentiert haben? In diesem Fall klingt es wie ein Caching-Problem. Wie auch immer, der Ausschnitt zeigt nichts. Versuchen Sie es mit einem öffentlich verfügbaren Bild. –
@NathanielFlick rslides im CSS ist mit der Liste innerhalb des HTML verknüpft, in dem alle Bilder aufgelistet sind. Ich glaube, dass etwas innerhalb der rslides Teil des CSS (am unteren Rand) ist die Begründung für die Hintergrundbilder nicht die gesamte Seite abdecken –