Question

I have Three Images , Two for Smartphone, one for orientation: portrait and other for orientation: landscape , and one more for Desktop .

I to try my Responsive Images to my header Element with these Code;

<header>

 <picture>
  <source media='(max-width: 29.9375em) and (orientation: portrait)'  srcset='/Bilder/night_smartphone.JPG'>
  <source media='(max-width: 47.9375em) and (orientation: landscape)' srcset='/Bilder/night_tablet.JPG'>
  <source media='(min-width: 80em)' srcset='/Bilder/night.JPG'>
  <img src='/Bilder/night_smartphone.JPG' alt='night'>
 </picture>
</header>

But I to come this Screenshot,

How to show , I to come the Picture from night_smartphone.JPG , but on the middle from Screen, to other Image... The Code from my @media Query Portrait for Smartphone,

@media only screen and (min-width: 20em) 
               and (max-width: 29.9375em) 
               and (orientation :  portrait) {

My head Element,

<head>

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

    <title>Das letzte von Windows 10</title>

</head>

But when give to header Element , this code,

<header style="background-image: url('Bilder/night_smartphone.JPG'); background-repeat: no-repeat"; ></header>

I to come this Screenshot,

How to show, my problem it is not the Big from my image....

I have Two Files , one for my Css Tags , windows.css , and a more for my Media Query ,tablet.css , both to link this with,

<style>

 <?php 
   include 'CSS/windows.css'; 
   include 'CSS/tablet.css';
 ?>
</style>

Too , when change it to

<link rel="stylesheet" type="text/css" href="CSS/tablet.css">
<link rel="stylesheet" type="text/css" href="CSS/windows.css">

on my head Element , it not change....

I have to build my footer Element ,with a similar Code , and not come these Problem.. I build my Website without wordpress , i build it , i self ...

Can Please anyone help me and say because my Responsive Images not working .

Responsive Images not working on header Element

0 个答案: