PDA

View Full Version : مبتدی: عدم نمایش عکس تعیین شده برای بکگراند در فایل CSS


ghasem110deh
پنج شنبه 28 دی 1396, 18:53 عصر
سلام به همه :-)
دوستان من با کد زیر خواستم یه عکس رو توی بکگراند صفحه اصلی سایت نمایش بدم اما عکس رو نشون نمیده !

این html :


< <title>FULL IMAGE BK</title> <link rel="stylesheet" type="text/css" href="css/card_style.css"></head><body> <div class="hero-image"> <div class="hero-text"> <form action="/review" class="review-form" enctype="text/plain" method="get"> <div class="home-banner"> <div class="review-box"> <h1> متن </h1> <p> متن دوم <br /> متن سوم </p> <div style="position: relative;"> <div class="form-wrapper"> <input type="text" name="site" id="site" placeholder="your name ..." /> </div> <button type="submit"> جستجو </button> </div> </div> </div> </form> </div> </div> </body>


اینم کد CSS :
.hero-image { background-image: url('/images/site_bk.jpg');
background-repeat: no-repeat;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
parvizwpf
پنج شنبه 28 دی 1396, 20:38 عصر
بهتر از کل ساختار فایلهاتون یه فایل زیپ بزارید
anvar
پنج شنبه 28 دی 1396, 20:52 عصر
خط اول از دستورات CSS رو به شکل زیر تغییر بدید درست میشه -

background-image: url("../images/site_bk.jpg");

فرض می کنیم که فایل ها و فولدرهای شما (اعم از فایل های html و css و تصاویر) در داخل پوشه ای به نام X قرار دارند.
در داخل این پوشه شما فایل html صفحه رو دارید - همچنین 2 پوشه به نام های CSS و images هم در کنار این فایل html وجود دارند.

فایل CSS شما در پوشه CSS و تصویر مورد نظر هم در پوشه images قرار دارد - زمانی که در داخل فایل CSS می خواهید مسیر تصویری را بدهید که در پوشه images قرار دارد باید به پوشه root برگردید و بعد آدرس images و نام تصویر بعلاوه فرمت آنرا قید کنید - برای برگشت به پوشه root از علامت ../ می کنیم - حالا شما در پوشه روت هستید. از اینجا به بعد باید پوشه تصاویر یعنی images و بعد هم نام فایل تصویر مورد نظر را ذکر می کند که در پایان می شود

background-image: url("../images/site_bk.jpg");
anvar
پنج شنبه 28 دی 1396, 20:55 عصر
اگر با تغییر کد بالا - صفحه شما باز هم تصویر رو نشون نداد - کش مرورگر را پاک کنید تا فایل CSS جدید لوود و اعمال شود