背景图片不会加载到active.css中

Question

So i have this problem with an image, which won't load in my responsive.css code. 所以我有一个图像问题，该图像不会加载到我的response.css代码中。 I'm trying to change a background image according to various resolutions of the website. 我正在尝试根据网站的各种分辨率更改背景图片。 below i post the parts of my codes in html and responsive.css. 下面，我将我的代码部分发布在html和响应.css中。 I already checked the path to the image and the image is in the file which contains html, css, responsive. 我已经检查了图像的路径，并且图像在包含html，css，响应式文件中。 Any tips how to make it work? 任何提示如何使其工作？ I'm a beginner when it comes to html and css. 我是HTML和CSS的初学者。

HTML: HTML：

 #background { width: 100vw; background-position: center; background-size: cover; } responsive.css: figure { width: 100%; } @media (max-width: 992px) { #background { height: 50vh; } } @media (min-width: 993px) and (max-width: 1170px) { #background { height: 70%; width: 100%; background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-2.jpg'); } }

 <figure> <img src="zadanie-domowe-rwd-materialy/obrazy/man-1.jpg" alt="Zdjęcie nr 1" id="background"> </figure>

Answer 1

Your HTML needs an amendment: 您的HTML需要修改：

<body>
    <figure id="background"></figure>
</body>

Remove the img tag and apply an id of background to the figure tag. 删除img标签，然后将背景ID应用于图形标签。

Img tags are not background images, so all images will appear on top of backgrounds. Img标签不是背景图片，因此所有图片都将显示在背景顶部。 To create the condition, both images need to be added within css as background-image 要创建条件，需要将两个图像都添加到css中作为背景图像

You will need to add this to your css too: 您也需要将此添加到CSS中：

#background {
    position: relative;
    height: 500px; // Or a different height
    width: 100%; // Change to 100% of element or window
    background-position: center;
    background-size: cover;
    // Add the follow
    background-image: url('../zadanie-domowe-rwd-materialy/obrazy/man-1.jpg');
 }

Update: Entire Code 更新：整个代码

HTML 的HTML

  <body>
        <figure id="background"></figure>
  </body>

CSS 的CSS

#background {
  position: relative;
  height: 500px; // Or a different height
  width: 100%; // Change to 100% of element or window
  background-position: center center;
  background-size: cover;
  background-image: url('http://placehold.it/350x150');
}

@media (min-width: 992px) and (max-width: 1170px) {
    #background {
        background-image: url('https://unsplash.it/200/300');
    }
}

See JsFiddle 见JsFiddle

I hope this helps 我希望这有帮助

Answer 2

For responsive only change .css file not HTML . 对于仅响应式更改.css文件，而不更改HTML。 if you want to change the img in mobile or other device ing use in css Like this Try it i thing it's helpful . 如果您想更改css中移动设备或其他设备中使用的img， Try it像这样Try it我很有帮助。 https://jsfiddle.net/dup1d62k/4/ https://jsfiddle.net/dup1d62k/4/

背景图片不会加载到active.css中

问题描述

2 个解决方案

解决方案1
1 2017-03-23 10:23:42

解决方案2
0 2017-03-23 10:46:40

背景图片不会加载到active.css中

问题描述

2 个解决方案

解决方案1 1 2017-03-23 10:23:42

解决方案2 0 2017-03-23 10:46:40

解决方案1
1 2017-03-23 10:23:42

解决方案2
0 2017-03-23 10:46:40