什么是防止我的标题图像加载

我一直无法看到我的标题图像。我试图为移动设备和非移动设备设置单独的标头。我正在使用这个代码（我现在使用/ ** /将它放在注释中）。什么是防止我的标题图像加载

/* @media screen and (max-width: 600px) { 
.custom-header { background: url("https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg") no-repeat; width: 100%; 
      background-size:contain; 
    } 


} 

@media screen and (min-width: 601px) { 
.custom-header { background: url("https://i1.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg") no-repeat; 
     width: 100% ; 
         background-size:contain; 


    } 
} */

我试着恢复到只是做定制 - >标题图像和选择一个标题的方式更简单的方法。那也不行了。

看起来好像我的Bootstrap代码存在问题，我对Bootstrap非常陌生，但建议使用它。

我的网站是www.rosstheexplorer.com

当设备宽度小于601px大于我想下面的情况发生

我不希望有永远是菜单之间的任何空间和自定义标题
我不希望有永远是客户头球高出任何空间
我不想H1，插件或者页面上的任何其他内容不断重叠ŧ他的客户头
我不希望有永远是任何空白客户头
我希望始终能够看到整个文本“罗斯的浏览器”的左边或右边，我唐“不想在最后的R永远被删除

在header.php中我有

<?php wp_head(); ?> 

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 


</head>

我试着删除下面的代码，看看是否会有所作为，但我的头仍然没有加载。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

任何人都可以提供一个建议吗？

来源

2017-06-14 Ross Symonds

值得注意的是，您应该在脚本和样式中使用wp_enqueue，而不是标头在header.php文件中 –

我会把它作为评论发布，但我还是不能发表评论。

您无法看到图像的原因是因为您将其设置为div的背景，而不是实际的html对象。

为了看到div的背景，它需要定义一个height。

你.custom-headerdiv具有指定的1500pxwidth但没有指定height，这就是为什么你不能看到它。

有很多方法来解决这个问题，但因为你是具体的关于你的头，我建议刚通过自身添加标题为图像

<img src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

这并没有解决所有问题但话又说回来，我只是打算将其作为评论。

更新：

为了增加媒体查询来控制你可以添加类的img标签头。然后，您可以在CSS中的示例 - 选择器中使用class - .header-image添加媒体查询。

请参见下面的代码：

.header-image { 
 
//** CSS for devices BIGGER than 660px goes here **/ 
 
} 
 

 
@media screen and (max-width: 660px) { 
 
    .header-image { 
 
     //** CSS for devices SMALLER than 660px goes here **/ 
 
    } 
 
}

<img class="header-image" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

来源

2017-06-14 08:30:15

谢谢，现在我的问题是弄清楚如何将媒体查询合并到header.php中。我在这里谈论这个问题 - https://stackoverflow.com/questions/44552136/incorporating-a-media-query-into-header-php –

你可以添加类到img标签来实现。检查上面的更新 –

我现在已经整理了这个问题。谢谢各位的帮助

我有两个标题图片，一个用于移动设备。我有关于header.php和其他CSS中的标题图像的代码。

在header.php中的代码是

<body <?php body_class(); ?>> 
<div id="page" class="hfeed site"> 
    <a class="skip-link screen-reader-text" href="#content"><?php _e('Skip to content', 'penscratch'); ?></a> 


<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg"> 


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

在额外的CSS代码

@media screen and (min-width: 661px) { 
    .mobile-header-img { 
     display: none; 
     width: 100%; 
    } 
} 

@media screen and (max-width: 660px) { 
    .header-img { 
     display: none; 
    } 
}

我的问题现在越来越标题在整个页面上伸展。你可以在这里阅读关于这个问题Increasing The Width Of Your Header。

来源

2017-06-17 14:11:42

什么是防止我的标题图像加载

回答

相关问题