Блог

Главная - Вопросы по программированию - я не хочу, чтобы на картинке оставалось немного места с правой стороны, я хочу, чтобы текст был в центре, я хочу, чтобы картинка была отзывчивой, как я могу это сделать?

я не хочу, чтобы на картинке оставалось немного места с правой стороны, я хочу, чтобы текст был в центре, я хочу, чтобы картинка была отзывчивой, как я могу это сделать?

#html #css

#HTML #css

Вопрос:

введите описание изображения здесь, пожалуйста, помогите мне, если вы знаете, спасибо, и если кто-нибудь уже создавал веб-сайт для ресторана, пожалуйста, пришлите мне код. Я хочу использовать ее в качестве ссылки, я буду вам очень благодарен, это мне очень поможет.

 /* home section */

#home{
  display: flex;
  flex-direction: column;
  padding: 3px 200px;
  justify-content: center;
  align-items: center;

}

#home::before{
  content: "";
  background-image: url("../images/1.jpeg");
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  opacity: 1.4;
  
}

<section id="home">
 <h1 class="h-primary">Welcome to Half Dozen Shawarma</h1>
 <p class ="h-primary"> Lorem 14</p>
 <button class = "btn"> Menu </button>

Комментарии:

1. Stackoverflow предназначен для того, чтобы задавать вопросы об ошибках или когда вы поражены, вы не можете попросить других разработчиков отправить весь код, не попробовав что-то самостоятельно… Но поскольку вы новичок, я собираюсь опубликовать ссылку, которая может вам помочь … github.com/marynganga/Restaurant-Website-Template . Удачи и счастливого обучения…

2. Пожалуйста, уточните вашу конкретную проблему или предоставьте дополнительные сведения, чтобы выделить именно то, что вам нужно. Как написано в настоящее время, трудно точно сказать, о чем вы спрашиваете.

Ответ №1:

демонстрация: https://codepen.io/shahemm/pen/YzrWvBv

Вот вы где :

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section id="home">
 <h1 class="h-primary">Welcome to Half Dozen Shawarma</h1>
 <p class ="h-primary"> Lorem 14</p>
 <button class = "btn"> Menu </button>
</body>
</html>

css :

 #home{
  display: flex;
  flex-direction: column;
  padding: 3px 200px;
  justify-content: center;
  align-items: center;}

  #home::before{
  content: "";
  background-image: url("https://picsum.photos/1280/1080");
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: -1;
  background-size: cover; 
  background-repeat: no-repeat;
  opacity: 1.4;}

и чтобы наклониться больше, посетите https://www.w3schools.com/cssref/pr_background-image.asp

Счастливого обучения 🙂

Метки: , , , , ,