كيفيه جعل الصور تحت كل الأكواد فيhtml

Osama Darwish2 · 16 أغسطس 2023

Mustafa Suleiman · 16 أغسطس 2023

السؤال غير واضح، وعلي أي حال باستطاعتك استخدام وسم <div> ووضع الصور فيه ثم استخدام خاصية display: block لجعل الوسم <div> يظهر ككتلة، مما سيضع الصور تحت كل الأكواد.

مثال:

<html>
<head>
<title>My HTML Page</title>
</head>
<body>

<h1>This is my heading</h1>

<p>This is my paragraph.</p>

<div style="display: block;">
<img src="image1.png" alt="This is an image.">
<img src="image2.png" alt="This is another image.">
</div>

</body>
</html>

محمد Fahmy · 16 أغسطس 2023

سؤالك غير واضح.

ولكن إذا كنت تقصد كيف تجعل الصورة كخلفية للموقع يمكنك فعل ذلك من خلال فتح ملف HTML الخاص بصفحة الموقع ثم قم بإضافة عنصر `style` داخل عنصر `<head>` لتعريف الأنماط الخاصة بالصورة الخلفية. يمكنك استخدام الكود التالي كنموذج:

<style>
    body {
        background-image: url('path/to/image.jpg');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>

تأكد من استبدال `'path/to/image.jpg'` بمسار الصورة الفعلي في الخادم الخاص بك.

وهكذا يتم وضع الصورة كخلفية لجميع عناصر صفحة الموقع. يمكنك تخصيص الأنماط حسب رغبتك، مثل تكرار الصورة أو تغيير حجمها. في المثال أعلاه، تم تعيين `background-repeat` إلى `no-repeat` لتجنب تكرار الصورة، وتم تعيين `background-size` إلى `cover` لجعل الصورة تمتد لتغطية كل المساحة المتاحة.

Thaer Alhabbash · 17 أغسطس 2023

السؤال غير واضح , ولكن اذا اردت ان توزع الصور و تضعها بشكل منسق على موقع فبإمكانك استخدام ال cards ولديك المثال التالي لاستخدام ال cardsو حيث ان وضيفته يقوم بعرض 3 صور في كل صف مع عنوان و تفاصيل للصورة مع تكرار ذلك الامر اذا اردت اضافة صور اخرى كما يمكنك جعل 4 او 6 صور في كل صف وهذا يعتمد على عمليى توزيع الاعمدة في كل صف حيث ان كل صف يحتوي على 12 عمود , بحيث يمكنك وضع 4 أعمدة لكل صورة:

<div class="card-group">
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img class="card-img-top" src="..." alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

يمكنك استخدام الصفوف و الأعمدة في عرض وتنسيق الصورة في الصفحة كما يلي:

<div class="row">
  <div class="col col-md-4"><img src="...." height="250px" width="300px"></div>
  <div class="col col-md-4"><img src="...." height="250px" width="300px"></div>
  <div class="col col-md-4"><img src="...." height="250px" width="300px"></div>
</div>

أما اذا كنت تقصد بوضع خلفية للصفحة أو كما تقصد تحت كل الأكواد فيمكنك داخل ملف ال css تنفيذ ما يلي:

    body {
        background-image: url('your-image-path');
        background-repeat: no-repeat;
        background-size: cover;
    }

كيفيه جعل الصور تحت كل الأكواد فيhtml

السؤال

Osama Darwish2

رابط هذا التعليق

شارك على الشبكات الإجتماعية

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

محمد Fahmy

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Thaer Alhabbash

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية