Привязать кнопку-картинку к фону

213
26 сентября 2018, 10:50

     .button{
                background-image:url('b1.jpg'); 
                position: absolute;
                z-index: 2;
                top: 50%;
                left: 50%;
                margin-left: -220px; 
                margin-top: 150px;

            }
<!DOCTYPE html>


<head>
    <title>Online store</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="descritpion" content="Online store on sale of electronics">
        <link rel="stylesheet" href="style.css">

 <div class="image">
        <img src="2.jpg" alt="Online Store" class="logo ">
        <div class="button">
                <a href="place.html"><img  src="b1.jpg" alt"Place"></a>
            </div>
        <h2>Tourism</h2>
</head>
<body>
        <h1>Турзим - это важная составляющая нашей жизни</h1>
</body>

Как привязать картинку посередине фона, она стояла уже везде, но только не там, где нужно. У меня скоро истерика начнется(

Answer 1

Добавьте в стили .button следующее:

.button {
    background-image:url('b1.jpg'); 
    display:inline-block;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin-left: -100px; // тут укажите половину ширины кнопки
    margin-top: -20px; // тут укажите половину высоты кнопки
    width: 200px; // укажите ширину картинки для кнопки
    height: 40px; // укажите высоту картинки для кнопки
}
Answer 2

.button { 
  background-image: url('b1.jpg');  
  position: absolute; 
  z-index: 2; 
  top: 50%; 
  background-color: #07f; /*цвет вместо картинки*/ 
  /* Вот это нужно добавить */ 
  display: inline-block; 
  width: 200px; /*Ширина как у img*/ 
  left: 0; 
  right: 0; 
  margin: 0 auto; /*по высоте 0 отступ, а по ширине автоматический*/ 
} 
 
.button img { 
  display: block; 
  width: 200px; /* Желательно выставить статичную ширину */ 
  height: 50px; 
}
<div class="button"> 
  <a href="place.html"><img src="b1.jpg" alt="Place"></a> 
</div>

READ ALSO
Как расширишь footer с помощью css (height-свойство)?
HTML

Как расширишь footer с помощью css (height-свойство)?

Footer хочу расширить именно с помощью свойства heightНе получается

 252
Ошибка карты кода (bootstrap.js)
jQuery

Ошибка карты кода (bootstrap.js)

Собираю все js скрипты в один

 241
Как найти схожее значения в DOM элементах?
jQuery

Как найти схожее значения в DOM элементах?

Хочу добавить активный класс в список с городами, как это сделать, ниже приведен мой код:

 252
Заменить пробелы в строке на тире
jQuery

Заменить пробелы в строке на тире

Например, у меня есть строка Фрукты на продажу, и мне нужно получить строку в таком виде - Фрукты-на-продажуКак это можно реализовать?

 208