Picture Tag not working on header Element

I to want a Responsive Images to build on header Element , I have Three Images , Two for Smartphone, one for orientation: portrait and other for orientation: landscape , and one more for Desktop . , 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,

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

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

<header>
  <picture class="bilder">
    <source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)'  srcset='/Bilder/night_hoppe.JPG'/>
    <source media='(max-width: 768px) and (orientation: landscape)' srcset='/Bilder/night_smartphone.JPG'/>
    <source media='(min-width: 1280px)' srcset='/Bilder/night_smartphone.JPG'/>
    <img src='night_smartphone.JPG' alt="night"/>

 </picture>
</header>

and my Media Query for Smartphone,

@media only screen and (min-width: 320px) 
               and (max-width: 568px) 
               and (orientation :  portrait) {
body {

      display: grid;
      background-color: #eaf6e5;
      grid-template-columns: 11% 80%  9%;
      grid-row-gap: 3px;
      font-size: 1.0833em;
      margin: 1px;
      grid-template-areas:
       "header  header header"
       "nav     nav   nav"
       "main main  main"
       "footer  footer footer";
}
body > header {

background-image: url("Bilder/night_hoppe.JPG");
background-repeat: no-repeat; 
position: relative;

margin-bottom: 1px; 
position: relative;


border-left: 1px;

}

nav {background-color: #d2f5c4; display: flex; }
nav ul {list-style-type: none;  flex: 1 0 auto; padding: 0px 0px 0px 9px;}
nav li { display: inline-block;}
nav ul:nth-of-type(2) { text-align: left; padding: 0px 30px 0px 25px;  }
#navs {
 padding: 1px 0px 1px;  /* Großer Nav , nur Obern und Unten   */
}

.dropdown-content a {
   padding: 10px 4px;

}
nav a {
  color: black;
  text-decoration: none;
  display: inline-block;
  padding: 0px 1px 0px 1px;
  font-size: 8px;
  font-family:  Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;
} 
body > main {
    height: 180vh;  
}

#name {font-size: 0.55em;}
#email {font-size: 0.55em;}
#text {font-size: 0.3em;}

   /* HOVER  */

.dropdown:hover .dropdown-content {


  top: 18px; 
}

.link_change ul {
    margin-left: 40px;
}    


#img1 {float: left; margin: 1px; }
#copry a {text-decoration: none; margin-bottom: 1px;}
#copry p {font-size: 6px; margin-bottom: 0px; }


}

My Html and Css code here

My problem is that to come these Screenshot,

All Pictures are Gut , when write , with style Tag without picture Tag

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

i to come this screenshot,

But with style Tag can only show a Picture , therefore i will use the picture Tag .

i have to search with small Pictures , but every Time , to come similar Screenshot… therefore i think that the picture are not the problem .

I don’t know why to does it…

Can anyone help me to find a solution for my Problem , Thanks !

I’m going to point out a couple things that might help you clean up this code:

  • You don’t need <style> tags in the html file if you’re using your CSS file for styling
  • The <header> tags need to be before the <body> tags.
    Found a nifty picture to showcase this:
    image
  • Your pictures arent showing up because none of them are formatted correctly. Your last image attempted to show but shows a broken link because you tried to link to an internal image. You need to use links to hosted images outside of your computer on CodePen, try formatting the others to fit this style, and change the image location:
    <img src='/Bilder/night_smartphone.JPG' alt='night' style='width: auto;''>
    Also the <picture> tag you used to surround your images isn’t a valid html tag. I would remove it.
  • I would caution you on using <br> for spacing. It’s frowned upon in the coding community. Use padding and margins if you need extra spacing above/below sections.
    Screenshot%20(13)

First , very thanks for your advice !
but the picture are gut formatted , when write,

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

i to come these Screenshot,

Also the <picture> tag you used to surround your images isn’t a valid html tag. I would remove it.

I used because People tell me in another Forum , that on header-Element should use Element .

That’s not a valid image format. You’re trying to link to an image hosted in your computer when codepen doesn’t have access to your computer

sorry because not answer your before , i come now from work…
sorry i don’t understand your… when my problem is on my Picture Tag , you asked me to codepen , in codepen have to show my Html and Css, Code…

You have a semicolon outside quotes there, it may be giving you issues

Thanks for your answer! , can Please you say to me, where it is…

Here there is a semicolon outside of quotes

Now i know what you to mean …

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

come the image gut , how to show the screenshot,

My Problem is with picture Tag,

<picture class="bilder">
    <source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)'  srcset='/Bilder/night_hoppe.JPG'/>
    <source media='(max-width: 768px) and (orientation: landscape)' srcset='/Bilder/night_smartphone.JPG'/>
    <source media='(min-width: 1280px)' srcset='/Bilder/night_smartphone.JPG'/>
    <img src='night_smartphone.JPG' alt="night"/>

 </picture>

Try removing the /. That might work. Your format is almost identical to https://www.w3schools.com/tags/tag_picture.asp, except for that forwardslash in the end.

Thanks for your answer ! ,

With these Code i have not problem , the problem is with Picture Tag

I to observe that similar thing does to my Desktop… , the image change (the image which i to give on Desktop) , the header-Element to become bigger and the picture to move to right side… , screenshot from my Desktop,

I to write my Code more easy …because on my Desktop have similar problem as Smartphone , therefore give the Media Query from desktop , which similar from Smartphone is… maybe the problem is more easy to find …

I have three Files

The Media Query File name hope_query.css ,

@media (min-width:  1025px) and (max-width: 1280px) {
  
  body {
    display: grid;
    display: -ms-grid; 
    background-color: #eaf6e5;
    grid-row-gap: 5px;
    grid-template:  
        
        "header header header" auto
        "nav nav nav" auto
        "main main gap1" 1em
        "main main werb" 11em 
        "main main gap2" 3em
        "main main info" 1fr
        "footer footer footer" auto / 8% 64% 28%;
        
       
       -ms-grid-columns: 8% 64% 28%;
       -ms-grid-row:  120px 80px 103px 200px 110px 90px; 
       -ms-grid-gap: 5px;
    }
     .dropdown-content a {
       padding: 10px 12px;
   }
    .dropdown:hover .dropdown-content {

      top: 28px; 
    } 
    

    
}    
    

header {
	grid-area: header;
	-ms-grid-column: 1;
    -ms-grid-column-span: 3;
    -ms-grid-row: 1;
    -ms-grid-row-span: 1;

  background-image: url("Bilder/view.JPG");
  background-repeat: no-repeat;
  background-size: cover;
  padding: 65px;
  
  
  
    
}

.
.
.

The html Code , hope.php

<?php
 
 header('Content-Type: text/html; Charset=utf-8');
 mb_internal_encoding('UTF-8');
 date_default_timezone_set('UTC');
 error_reporting(E_ALL);
 




?> 

<!doctype html>
<html lang="en">
<head>

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

	<title>Computer</title>
	
	   <link rel="stylesheet" href="/meine/hope/hope_windows.css">
     <link rel="stylesheet" href="/meine/hope/hope_query.css">

	
</head>	

<header>
  <picture class="bilder">
    <source media='(min-width: 320px) and (max-width: 568px) and (orientation: portrait)'  srcset='/meine/hope/night_hoppe.JPG'/>
    <source media='(max-width: 768px) and (orientation: landscape)' srcset='/meine/hope/night_smartphone.JPG'/>
    <source media='(min-width: 1280px)' srcset='/meine/hope/night.JPG'/>
    <img src='/meine/hope/night_smartphone.JPG' alt='night'>

 </picture>
</header>

<body>

all Code here

and the third , hope_windows.css , because it not have influence of my problem , edit it not , it is only CSS code , bu it is in codepen .

How to show my Desktop

I think with Grid Layout can’t does more … , so , i to try many methods but can’t the Picture centered on header Element…