Picture Tag not working on header Element

bbwd345 · April 9, 2019, 4:07pm

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 !

RadDevDad · April 9, 2019, 4:40pm

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:
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.

bbwd345 · April 9, 2019, 5:10pm

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 .

RadDevDad · April 9, 2019, 7:10pm

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

bbwd345 · April 10, 2019, 3:57pm

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…

ILM · April 10, 2019, 4:13pm

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

bbwd345 · April 10, 2019, 4:23pm

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

ILM · April 10, 2019, 5:01pm

Here there is a semicolon outside of quotes

bbwd345 · April 10, 2019, 5:16pm

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>

RadDevDad · April 10, 2019, 6:16pm

Try removing the /. That might work. Your format is almost identical to HTML picture tag, except for that forwardslash in the end.

bbwd345 · April 10, 2019, 6:37pm

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,

bbwd345 · April 11, 2019, 6:25pm

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…

Topic		Replies	Views
Build a Tribute Page - 9/10 correct HTML-CSS	5	945	February 6, 2021
Tribute Page img responsive not working HTML-CSS	9	421	November 11, 2021
Can't make my img responsive HTML-CSS	3	209	November 14, 2021
Tribute Page: The <img> element should responsively resize, relative to the width of its parent element, without exceeding its original size HTML-CSS	10	844	March 9, 2021
Tribute page img is not responsive Code Feedback	4	390	November 23, 2021

Picture Tag not working on header Element

Related topics