Hallo Ihr Lieben,
auch auf die Gefahr hin, dass ich wieder angepöpelt werde wie alt doch diese Internetseite ist, möchte ich Euch um Hilfe bitten.
Es geht um diese Seite: http://www.quadspasserleben.de
Ich möchte in dem Textbereich, also den Teil mit dem hellen Hintergrund ein Hintergrundbild mit Reifenabdrücken einarbeiten aber ich kann einfach nicht finden wo. Ich sage dazu, dass ich
keine Expertin bin und mich mit css nicht wirklich gut auskenne, vieles ändere ich durch probieren aber irgendwie bekomme ich das mit dem Hintergrundbild nicht hin.
Diese Befehle möchte ich einbauen aber wo:
background-image: url(images/Hintergrund.jpg);
background-repeat: repeat;
Hier schicke ich Euch noch die format.css. Ich hoffe irgendjemand kann sich mir annehmen.
/* ############################################################ */
/* allgemein */
/* ############################################################ */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after { clear:both; }
.clearfix { *zoom: 1; }
.section { clear: both;
margin: 0rem;
}
html, body {
font-family:'open_sanslight',georgia, tahoma, arial, Verdana, Segoe, 'Open Sans',helvetica,roboto ,sans-serif;
font-size:40.5%;
line-height:1.2;
height:100%;
}
body {
font-size:1.4rem;
margin: 0 auto;
color:#000000;
background:#fac247;
}
/* überschriften */
h1, h2, h3, h4, h5 {
color:#bb0505;
text-align:left;
letter-spacing:0px;
font-weight:normal;
text-transform:none;
}
h1 {
font-size:2rem;
font-weight:bold;
line-height: 2.3rem;
margin-top: 0rem;
margin-bottom: 1.2rem;
text-align: center
}
h2 {
font-size:1.5rem;
font-weight:bold;
line-height: 1rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
text-align: center
}
h3 {
font-size:1rem;
line-height: 2.4rem;
margin-top: 1rem;
margin-bottom:2.5rem;
letter-spacing:0rem;
text-align: center
}
.rund {border-radius:36rem; }
/* allgemeine links */
a {background-color:transparent;
color:#464646;
text-decoration: underline;
}
a:hover {color:#464646;
text-decoration:none;
}
/* quelltext-erklärungen - wenn vorhanden */
pre {white-space:pre-wrap;font-size:1.5rem;padding:1rem 0.5rem 1rem 0.5rem;
margin-bottom:2rem;text-align:center;border:solid 0.1rem #FFFFFF;
background:#9F9F9F ;
color:#EFEFEF;
}
/* ############################################################ */
/* speziell*/
/* ############################################################ */
/* float */
.col {width: 100%;
margin: 0 auto;
float:left;
}
.container_haupt {
margin:0 auto;
width:100%;
background:gray;
background:linear-gradient(to right ,gray ,white ,gray );
}
/* bilder -anpassen der grösse */
img {max-width: 100%;display:block;
margin:0 auto;
}
.name {display:block;
padding:0rem 0rem 0rem 0rem;
font-size:1.2rem;
line-height: 1.8rem;
letter-spacing:0.2rem;
color:#666666;
text-shadow:.1rem .1rem .1rem #fff;
font-variant:small-caps;
}
.slogan {display:block;
padding:0rem 0rem 0rem 0rem;
font-size:1.4rem;
line-height: 1.6rem;
letter-spacing:0.1rem;
color:#BF0000;
text-shadow:.1rem .1rem .1rem #fff;
font-variant:small-caps;
}
.slogan-end {letter-spacing:0.1rem; }
.slogan-end span {color:#bb0505; }
.slogan-end span .fa {font-size:2rem;
color:red;text-shadow:0rem 0rem .1rem #000;
}
.erstes-wort {text-transform:uppercase;
color:#B90000;
}
/* icons */
.icons .fas,
.icons .fab,
.icons .far {display:inline-block;
margin:0.5rem;
text-align:center;
font-size:2.5rem;
height:5rem;
line-height:5rem;
width:5rem;
border-radius:36rem;
}
.icons.vers1 .fas,
.icons.vers1 .fab,
.icons.vers1 .far {
background:#DFDFDF;/* IE9 */
background:linear-gradient(to right bottom, #AFAFAF,#EFEFEF, #AFAFAF );
color:#000;
}
.icons.vers2 .fas,
.icons.vers2 .fab,
.icons.vers2 .far {background:#000;
color:white;
}
/* liste mit eigenem aufzählungszeichen als font-icon */
.liste1 {padding-left:4rem; }
.liste1 li {position:relative;
list-style-type: none;
padding-left:4rem;
}
.liste1 li:before {
position:absolute;
font-family:'Font Awesome 5 Free'; /* - use 'Font Awesome 5 Brands' for brands icons */
content:"\f35a";
font-weight: 900;/* Weight of the font (by fontawesome)- use:
- 400 for Regular and Brands symbols;
- 900 for Solid symbols. */
top:0;
left:20px;
color:#fac247;
}
/* liste2 zweite liste mit eigenem aufzählungszeichen als font-icon */
.liste2 {
padding-left:20rem;
}
.liste2 li {position:relative;
list-style-type: none;
padding-left:2rem;
}
.liste2 li:before {
position:absolute;
font-family:'Font Awesome 5 Free'; /* - use 'Font Awesome 5 Brands' for brands icons */
content:"\f35a";
font-weight: 900;/* Weight of the font (by fontawesome)- use:
- 400 for Regular and Brands symbols;
- 900 for Solid symbols. */
top:0;
left:20px;
color:#000;
}
.liste2 li:hover:before{
color:red;
}
/* liste3 - mit standard-aufzählungszeichen square */
.liste3 {
padding-left:3rem;
}
.liste3 li {
list-style-type: square;
padding-left:0rem;
color:#000;
}
/* ############################################################ */
/* bereich kopf Hintergrund gelb mit Logo*/
/* ############################################################ */
.kopf-main {
margin:0 auto;
color:#fac247;
text-align:center;
padding:0rem 0rem 0rem 0rem;
}
.kopf {width:100%;
display:table;
table-layout:auto;
overflow: hidden;
border-collapse:separate;
border-spacing:0rem;
margin: 0 auto;
padding:0rem;
background:#fac247;
border-color:#fff;
box-shadow:0rem 0rem 0.1rem black;
}
.kopfbox-a {display:block;
padding:6.5rem;
text-align:right;
}
.kopfbox-b {display:block;
padding:0rem 0rem 0rem 1rem;
text-align:left;
}
/* die icons im kopfbereich -Home-Kontakt... */
.kopf a .fas,
.kopf a .fab,
.kopf a .far {
margin:.5rem;
text-align:center;
font-size:1.5rem;
height:3rem;
line-height:3rem;
width:3rem;
background:#bb0505;
color:white;
border-radius:36rem;
}
.kopf a:hover .fas,
.kopf a:hover .fab,
.kopf a:hover .far {
color:white;
background:black;
text-shadow:none;
}
/* ############################################################ */
/* bereich logo */
/* ############################################################ */
.logo-main {position:relative; /* wegen bildwechsler */
background:#fff;
margin:0.5 auto;
color:#313131;
padding:0rem;
border-top:solid .0rem;
border-bottom:solid 0rem;
border-color:#bb0505;
box-shadow:0rem 0rem 0rem black;
}
.logo {position:relative; /* wegen bildwechsler */
width:100%;
display:table;
table-layout:fixed;
border-spacing:0rem;
margin: 0.1rem auto;
padding:0rem;
border-color:black;
box-shadow:0rem 0rem 0rem black;
}
.logobox-a {width:70%;border-right:solid .1rem white;
display:table-cell;
vertical-align:middle;
padding:0rem;
background:#bb0505;/* IE8 */
background:rgba(0 , 0 , 0, .6);
}
.logobox-b {width:30%;
display:table-cell;
text-align:right;
vertical-align:bottom;
height:18rem;
padding:1rem;
background:#bb0505;/* IE8 */
background:rgba(0 , 0 , 0, .4);
}
/* die icons im logobereich */
.logo .fas,
.logo .fab,
.logo .far {
margin:.3rem;
text-align:center;
font-size:1.5rem;
height:3rem;
line-height:3rem;
width:3rem;
background:#bb0505;
color:#fff;
border-radius:36rem;
}
.logo a:hover .fa {
color:red;
background:#FFFFFF;
text-shadow:none;
}
/* ############################################################ */
/* bereich inhalt */
/* ############################################################ */
.inhalt-main {margin:0 auto;
padding:0;
margin:0;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* inhalt */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.inhalt {width:100%;
margin: 0 auto;
background:#F9F9F9;
}
.inhaltbox-a {display:block;
width:100%;
text-align:center;
padding:5rem 2rem 6rem 1rem;
min-height:50rem;
}
.inhalt blockquote {display:block;margin:0 auto;
width:100%;
text-align:center;
box-shadow:0rem 0rem 0rem #BFBFBF;
}
.inhalt blockquote span {
color:#bb0505;
background-color:#fac247
}
.inhalt blockquote b {
color:#fff;
background-color:#000;
font-family:monospace;
}
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* bilder */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
.bilder {
padding:0rem;font-size:1.2rem;
text-align:center;
position: relative;
}
.bilder .span_1_of_1 {width:100%;padding:1rem 0rem 1rem 0rem;}
.bilder .span_1_of_2 {width:100%;padding:10rem;}
.bilder .span_1_of_3 {width:100%;padding:0rem;}
.bilder .span_1_of_4 {width:100%;padding:0rem;}
.bilder .span_1_of_4b {width:100%;padding:0rem;}
.bildbox {
text-align:center;
padding:0.2rem 0rem 0rem 4rem;
}
/* bildeigenschaften (rahmen, schatten) für UNSERe Fahrzeuge */
.bilder img {
border:solid .2rem #bb0505;
box-shadow:0.3rem 0.2rem .3rem #fac247;
}
/* ############################################################ */
/* bereich fuss */
/* ############################################################ */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* fuss*/
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* === fuss === */
.fuss-main {margin:0 auto;
text-align:center;
text-shadow:none;
padding:0rem;
}
.fuss {display:block;
margin: 0 auto;
width:100%;
background:#bb0505;
border-top:solid 1rem;
border-color:#fff;
color:#fac247;
padding: 0;box-shadow:0rem 0rem 0.1rem black;
}
.fussbox {text-align:center;
display:block;
padding:1rem 2rem 1rem 2rem;
margin-bottom:0rem;
font-size:1.4rem;
}
.fuss hr {margin-top:0.5rem;margin-bottom:0.3rem;
background:transparent;
width:90%;
border:none; /* IE */
height:0.1rem; /* IE */
border-bottom: solid 0.1rem #fff;
}
.fuss i {font-style:italic;
text-transform:uppercase;
letter-spacing:0rem;
}
/*===== fussmenu 2 ===== */
.fussmenu2 ,
.fussmenu2 ul,
.fussmenu2 li {
list-style: none;
margin: 0;
padding: 0;
border: 0;
}
.fussmenu2 {width:100%;margin:0 auto; }
.fussmenu2 li { display:inline;
width:100%;
line-height:2.6rem;
margin-left:0rem;
padding-left:0.1rem;
}
.fussmenu2 a {
width : 100%;
text-align:left;
color:#fac247;
text-decoration: none;
padding:0rem;
letter-spacing:.1rem;
}
.fussmenu2 a:hover {
color:#fac247;
text-shadow:none;
background:transparent;
text-decoration: underline;
}
