Hi I have the problem with the background of my ImageSlider. If I make the browser smaller the image gets smaller but the background not. If I take for the container in CSS width: auto height: auto max-width: 100% the background disappears completely. Can someone help me. Thanks a lot.
MY CSS-Code:
@charset "UTF-8";
/* CSS Document */
/* Simplify width and height calculations */
html {
box-sizing: border-box;
}
*, *:before,
*:after {
box-sizing: inherit;
}
*
{
padding:0px;
margin:0px;
}
/* ganze Seite */
body {
font-family: source-sans-pro;
font-style: normal;
font-weight: 400;
font-size: medium;
}
#wrapper {
margin-right: auto;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
background-color:#FBFBFB;
}
/* Kopf */
.Damaris {
max-width: 100%;
max-height: 100%;
width: 345px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
top: 30px;
}
.Background {
max-width: 100%;
width: auto;
height: 250px;
margin-left: auto;
margin-right: auto;
background-image: -moz-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);
background-image: -webkit-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);
background-image: -ms-linear-gradient( 85deg, rgb(153,201,250) 60%, rgb(3,9,252) 100%);
position: relative;
top: 0px;
left: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
display: inherit;
margin-top: 0px;
margin-bottom: 0px;
}
.Sira {
max-width: 100%;
max-height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
margin-bottom: 20px;
position: relative;
top: 30px;
}
.header {
position: relative;
}
/* Navigationsmenu */
#nav {
background-color: #29009E;
background-color: rgba(41,0,158,0.6);
color: #29009E;
text-transform: none;
font-variant: normal;
font-style: normal;
font-weight: 200;
text-align: center;
text-decoration: none;
}
.navmenu {
margin: 0;
text-align: center;
background-color: #29009E;
background-color: rgba(41,0,158,0.80);
}
.navmenu a {
color: #29009E;
font-weight: 200;
text-decoration: none;
text-transform: uppercase;
display: block;
padding-top: 0.1em;
padding-bottom: 0.1em;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #000000;
}
a:visited {
color: #000000;
}
a:hover, a:active, a:focus {
color: #000000;
text-decoration: none;
}
#menulink {
background-color: #29009E;
background-color: rgba(41,0,158,0.80);
margin: 0;
text-align: center;
}
#menulink a {
color: #000000;
text-transform: uppercase;
font-weight: 400;
text-decoration: none;
padding-top: 0.1em;
padding-bottom: 0.1em;
font-family: source-sans-pro;
font-style: normal;
font-size: 5em;
}
#navlinks {
width: 100%;
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
background-color: #29009E;
background-color: rgba(20,3,186,0.75);
position: absolute;
-webkit-transition: all ease-out 0.5s;
transition: all ease-out 0.5s;
font-family: source-sans-pro;
font-style: normal;
font-weight: 200;
}
#navlinks.displayed {
top: auto;
z-index: 1;
opacity: 1;
}
#navlinks.start {
display: none;
}
#navlinks.collapsed {
top: auto;
opacity: 0;
}
#navlinks a {
display: block;
padding-top: 10px;
padding-bottom: 10px;
color: #000000;
font-weight: 600;
text-decoration: none;
text-transform: uppercase;
font-size: x-large;
}
#navlinks a:hover, #navlinks a:active, #navlinks a:focus, #navlinks a.thispage {
color: #000000;
}
/* Hauptteil */
.intro {
background-color: #01AF5F;
background-color: rgba(1,175,95,0.58);
color: #000000;
font-family: source-sans-pro;
font-style: normal;
font-weight: 400;
font-size: x-large;
text-align: justify;
text-decoration: none;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
padding-right: 40px;
}
/*SlideShow*/
.slider-container{
width:100%;
height: 810px;
background-color:#FAF1A1;
}
.slide{
position:absolute;
width:100%;
height: 800px;
overflow: hidden;
}
.slide>.img-container{
position: relative;
width: 100%;
height: 800px;
text-align: center;
padding: 10px 0px;
}
.slide>.img-container>img{
height: auto;
width: auto;
max-width: 100%;
}
.btn{
position: absolute;
font-size: 40px;
font-weight: bold;
font-family: arial, sans serfif;
color: #000000;
text-decoration: none;
background-color:#D6D4D4;
background-color:rgba(214,212,212,0.30);
cursor: pointer;
border-radius: 50px;
margin: 1%;
}
#right{
right:0
}
.news {
background-color: #046BCC;
background-color: rgba(4,107,204,0.70);
color: #000000;
font-family: source-sans-pro;
font-style: normal;
font-weight: 300;
font-size: large;
text-align: justify;
text-decoration: none;
text-transform: none;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 40px;
padding-right: 40px;
}
h3 {
color: #020202;
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
font-size: xx-large;
text-align: center;
padding-bottom: 10px
}
h4 {
color: #020202;
font-family: source-sans-pro;
font-style: normal;
font-weight: 400;
font-size: x-large;
text-align: center;;
padding-top: 40px
}
.name{
color: #020202;
font-family: source-sans-pro;
font-style: normal;
font-weight: 300;
font-size: large;
text-align: center;
padding-top: 10px;
padding-bottom: 4px;
margin: 0 auto;
}
.table{
color: #020202;
font-family: source-sans-pro;
font-style: normal;
font-weight: 300;
font-size: large;
text-align: center;
margin: 0 auto;
background: #AEB8FF;
max-width: 100%;
}
.calender{
font-family: source-sans-pro;
font-style: normal;
font-weight: 300;
font-size: large;
line-height: 40px;
text-align: center;
}
/* Fuss */
footer {
color: #000000;
background-image: -moz-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);
background-image: -webkit-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);
background-image: -ms-linear-gradient( 90deg, rgb(253,3,3) 0%, rgb(251,191,74) 44%);
height: 250px;
}
.flex-grid {
display: flex;
padding-top: 20px;
width: 100%;
text-align: center;
}
.col {flex: 1;}
.insta>img{
height: 100px;
width: 100px;
}
.face>img{
height: 100px;
width: 100px;
}
.mail>a>img{
height: 100px;
width: 100px;
border-radius: 50px;
background: #908D8D;
}
.right {
font-family: source-sans-pro;
font-style: normal;
font-weight: 600;
font-size: large;
line-height: 40px;
text-align: right;
padding-top: 20px;
padding-right: 10px;
}
.copyright{
font-family: source-sans-pro;
font-style: normal;
font-weight: 300;
font-size: large;
text-align: center;
padding-top: 30px;
}
/* Darstellung */
@media (min-width:700px){
#menulink {
display: none;
}
#navlinks {
position: static;
background-color: #2804B6;
}
#navlinks.collapsed {
opacity: 2;
}
#navlinks a {
width: 20%;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
float: left;
color: #000000;
background-color: #29009E;
background-color: rgba(20,3,186,0.75);
}
}
My html-code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sira Accola: Home</title>
<link href="../css/home.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
<script>var __adobewebfontsappname__="dreamweaver"</script>
<script src="http://use.edgefonts.net/actor:n4:default;source-sans-pro:n4,i4,n2,n3,n7,n9,i2,n6:default.js" type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<header class="header" >
<figure class="Background">
<figure>
<img src="../images/DAMARIS_SCHRIFTZUG.png" alt="" class="Damaris">
</figure>
<figure> <img src="../images/SIRA_ACCOLA.png" alt="" class="Sira">
</figure>
</figure>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks">
<li><a href="home.html" class="thispage">Home</a></li>
<li><a href="about_me.html">About me</a></li>
<li><a href="#">Team</a></li>
<li><a href="#">Horses</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
</header>
<main id="main">
<div class="intro">
<p>Herzlich willkommen auf meiner Web Site. Ich freue mich über Deinen Besuch.
Mit unserer Home Page wollen wir über meinen reiterlichen Werdegang, über unserer Pferde und unser Team informieren sowie Eindrücke unserer Passion vermitteln.
Die Resultate unserer Arbeit mit den Pferden sind via Link auf der Homepage des Schweizerischen Verbands für Pferde Sport (fnch.ch) einzusehen.
Weil wir unsere Basis im Tessin in der Scuderia von Linda Gianella Crotta haben, reiten wir meistens im Tessin und besuchen die Concorsi in Norditalien. Diese sind für uns pferdeschonend innert 1-2 Stunden erreichbar und bieten ein wunderbares und interessantes Umfeld mit Italienischem Flair.
</p>
</div>
<div class="slider-container">
<div class="slide">
<div class="img-container">
<img src="../images/PHOTO-2018-07-08-07-22-38.jpg" alt="">
</div>
</div>
<div class="slide">
<div class="img-container">
<img src="../images/PHOTO-2018-07-08-07-22-39.jpg" alt="">
</div>
</div>
<div class="slide">
<div class="img-container">
<img src="../images/IMG_5880.jpg">
</div>
</div>
<a href="javascript:void(0)" id="left" onClick="previousSlide(-1)" class="btn"><</a>
<a href="javascript:void(0)" id="right" onClick="nextSlide(+1)" class="btn">></a>
</div>
<div class="news">
<h3 class="h3"> Neuigkeiten</h3>
<h4> Reittunier in Busto Arsizio 29. Juni - 01. Juli 2018
</h4>
<p class="name"> Tina de l'Yserande
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>International CSI1* 125</td>
<td>International CSI1* 125</td>
<td>International CSI1* 125</td>
</tr>
<tr>
<td>5 von 30</td>
<td>22 von 36</td>
<td>6 von 40</td>
</tr>
</tbody>
</table>
</p>
<p class="name">
Grace XII
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>International CSI1* 115</td>
<td>International CSI1* 115</td>
<td>International CSI1* 115</td>
</tr>
<tr>
<td>Zurückgezogen</td>
<td>13 von 16 </td>
<td>8 von 20</td>
</tr>
</tbody>
</table>
</p>
<p class="name"> Simeon de l'Herbage
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
</tr>
<tr>
<td>International CSI1* 135</td>
<td>International CSI1* 135</td>
</tr>
<tr>
<td>4 von 41</td>
<td>6 von 52</td>
</tr>
</tbody>
</table>
</p>
<h4> Reittunier in Gorla Minore 06. - 08. Juli 2018
</h4>
<p class="name"> Tina de l'Yserande
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>National A5* C130</td>
<td>National A5* C135</td>
<td>National A5* C135</td>
</tr>
<tr>
<td>11 von 58</td>
<td>13 von 34</td>
<td>5 von 48</td>
</tr>
</tbody>
</table>
</p>
<p class="name"> Grace XII
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>National A5* C120 </td>
<td>National A5* C125</td>
<td>National A5* C125</td>
</tr>
<tr>
<td>Ausser Konkurrenz</td>
<td>4 von 25</td>
<td>5 von 20</td>
</tr>
</tbody>
</table>
</p>
<h4>Reitunier in Ascona</h4>
<p class="name"> Tina de l'Yserande
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>Turnier</td>
<td>Turnier</td>
<td>Tunier</td>
</tr>
<tr>
<td>Rang</td>
<td>Rang</td>
<td>Rang</td>
</tr>
</tbody>
</table>
</p>
<p class="name"> Grace XII
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>Turnier</td>
<td>Turnier</td>
<td>Tunier</td>
</tr>
<tr>
<td>Rang</td>
<td>Rang</td>
<td>Rang</td>
</tr>
</tbody>
</table>
</p>
<p class="name"> Simeon de l'Herbage
<table class="table" width="100%" border="0">
<tbody>
<tr>
<td>Freitag</td>
<td>Samstag</td>
<td>Sonntag</td>
</tr>
<tr>
<td>Turnier</td>
<td>Turnier</td>
<td>Tunier</td>
</tr>
<tr>
<td>Rang</td>
<td>Rang</td>
<td>Rang</td>
</tr>
</tbody>
</table>
</p>
</div>
<div class="news">
<h3> Kalender
</h3>
<p class="calender"> 24.-26. August 18 Nationales Reitturnier A5 in Busto Arsizio <br>
07.-09. September 18 Internationales Reitturnier CSI2*/CSI1*/CSIYH in Busto Arsizio <br>
20.-23. September 18 Internationales Reitturnier CSI2*/CSI1*/CSIYH in Gorla <br>
12.-14. Oktober 18 Nationales Reitturnier A5 in Vermezzo <br>
25.-28. Oktober 18 Internationales Reitturnier CSI5*/CSI2*/CSIYH in Verona <br>
08.-11. November 18 Internationales Reitturnier CSI2*/CSI1*/CSIYH in Gorla <br>
30. November – 02. Dezember Nationales Reitturnier A5 in Vermezzo <br>
14.-16 Dezember Nationales Reitturnier in Gorla oder Vermezzo </p>
</div>
</main>
<footer>
<div class="flex-grid">
<div class="col"> <i class="insta"><img src="../images/Instagram.png" alt=""></i></div>
<div class="col"> <i class="face"><img src="../images/USE facebook_circle-512.png" alt=""></i></div>
<div class="col"> <i class="mail"><a href="mailto: famaccola@bluewin.ch"><img src="../images/mail.png" alt=""></a></i></div>
</div>
<p class="right">Webdesign by <a href="https://www.facebook.com/aris.accola" class="right">Aris Martin Accola</a> </p>
<p class="center copyright">Copyright © 2018 DAMARIS & CO. All rights reserved</p>
</footer>
</div>
<script type="text/javascript" src="../js/menu.js"></script>
<script type="text/javascript">
var index = 1;
imageSlide();
manualSlide(index);
function previousSlide(n){
index = index + n;
manualSlide(index);
}
function nextSlide(n){
index = index + n;
manualSlide(index);
}
function imageSlide (){
var slide = document.getElementsByClassName("slide");
if(index > slide.length){
index = 1;
}
for (var i = 0; i < slide.length; i++) {
slide.style.display = "none";
};
slide[index-1].style.display = "block";
index = index + 1;
setTimeout(imageSlide,5000);
}
function manualSlide(n){
var slide = document.getElementsByClassName("slide");
if(n > slide.length){
index = 1;
}
if(n < 1){
index =slide.length;
};
for (var i = 0; i < slide.length; i++) {
slide.style.display = "none";
};
slide[index-1].style.display = "block";
}
</script>
</body>
</html>
1 Correct answer
4
Replies
AdChoices