Фон связан, но не будет отображаться - PullRequest
Новая
       5

Фон связан, но не будет отображаться

1 голос
/ 16 апреля 2019

Я пытался включить фон, который создал в иллюстраторе.Файл был экспортирован как PNG, но когда я пытаюсь связать его в коде с использованием background-image, он не будет работать.Я пытался связать его через файлы, а также загрузить его на сайт, откуда его можно получить.

Коробка, в которую я хочу ее поместить, - это "bottom-item-about" 

/*Main about flex container styling*/
.grid-items {
  display: flex;
  flex-flow: row wrap;
}

/*Styling of items inside main about flex container */
.grid-items > div {
  width: 100px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}

/*The left, right & bottom box main styling*/
.grid-item {
  flex: 1 calc(50% - 20px);
  padding: 0 50px 40px;
  box-sizing: border-box;
  min-height: 650px;
  position: relative;
  overflow: hidden;
  flex-direction: column;
  justify-content: center;
  display: flex;
  text-align: center;
}

/*Bottom about box styling*/
.grid-item-wide {
  flex: 1 100%;
  min-height: 575px;
  padding-bottom: 20px;
}

/*Left about box colour*/
.left-item-about {
  background-color: #F2D0A4;
}
/*Right about box colour*/
.right-item-about {
  background-color: #545E75;
  color: #fff;
}
/*Bottom about box colour*/
.bottom-item-about {  
  background-image: url(https://imgur.com/DWpaLxD);
  /* or can use 'url(img/services-background.png)*/
  background-color: #3F826D;
  color: #fff;
}
<!DOCTYPE html>
<html>
	<head>
		<title>Hector's Portfolio</title>
		<!-- CSS style sheet -->
		<link rel="stylesheet" type="text/css" href="css/style.css">
		<!-- Font link -->
		<link href="https://fonts.googleapis.com/css?family=Cardo:400,700|Montserrat:400,500,800" rel="stylesheet">
		<!-- Linking social icons -->
		<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
		<!-- Scaling debending on device -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
<!-- Body with class to style what is inside of it -->
<body class="layout-portfolio">

<div class="grid-item grid-item-wide bottom-item-about"> <!-- this container needs the background -->

		<!-- Services text container -->
		<div class="grid-item grid-item-service-wide">
		<!-- Services Title -->
	  	<h3 class="case-item-header">Services</h3>
	  	</div>
		<!-- Services icons/info section -->
		<div id="about" class="content-wrapper gridItems-peak grid-items">
		  <!-- Two child elements inside flex container  -->
		  <!-- Left side icons/info -->
		  <div class="grid-item-services left-item-services">
		  </div>
		  <!-- Right side icons/info -->
		  <div class="grid-item-services right-item-services">
		  </div>
		</div>
</body>
</html>

Ответы [ 3 ]

1 голос
/ 16 апреля 2019

Просто измените путь фонового изображения с https://imgur.com/DWpaLxD на https://i.imgur.com/DWpaLxD.jpg для bottom-item-about класса. 

/*Styling of items inside main about flex container */

.grid-items > div {
    width: 100px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

/*The left, right & bottom box main styling*/
.grid-item {
    flex: 1 calc(50% - 20px);
    padding: 0 50px 40px;
    box-sizing: border-box;
    min-height: 650px;
    position: relative;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    display: flex;
    text-align: center;
}

/*Bottom about box styling*/
.grid-item-wide {
    flex: 1 100%;
    min-height: 575px;
    padding-bottom: 20px;
}

/*Left about box colour*/
.left-item-about {
    background-color: #F2D0A4;
}


/*Right about box colour*/
.right-item-about {
    background-color: #545E75;
    color: #fff;
}

/*Bottom about box colour*/
.bottom-item-about {
    background-image: url(https://i.imgur.com/DWpaLxD.jpg);
    /* or can use 'url(img/services-background.png)*/
    background-color: #3F826D;
    color: #fff;
}
<div class="grid-item grid-item-wide bottom-item-about">
    <div class="grid-item grid-item-service-wide">
        <h3 class="case-item-header">Services</h3>
    </div>
    <div id="about" class="content-wrapper gridItems-peak grid-items">
        <div class="grid-item-services left-item-services">
        </div>
        <div class="grid-item-services right-item-services">
        </div>
    </div>
</div>
1 голос
/ 16 апреля 2019 
/*Bottom about box colour*/
.bottom-item-about {  
  background-image: url(https://imgur.com/DWpaLxD);
  /* or can use 'url(img/services-background.png)*/
  background-color: #3F826D;
  color: #fff;
}

замените эту строку: 

`background-image: url(https://imgur.com/DWpaLxD);`

на эту: 

`background-image: url(https://i.imgur.com/DWpaLxD.jpg);`

это реальный URL вашего загруженного изображения.заканчивается расширением изображения (.jpg, .png, .gif, ...)

или URL вашего локального файла, и оно должно работать

1 голос
/ 16 апреля 2019 
.bottom-item-about {   
  background:url(../img/services-background.png) left top #3F826D;
  color: #fff;
}

попробуйте использовать ../ этот путь, который он не выбирает, может быть из-за того, что вы поместили изображение в /img, а ваш css - в /css

...