مشکل در ریسپانسیو کردن یک عکس در هدر سایت

حل شده 

CSS

توسط sirnamdari در 1 سال پیش
2 75.1k 6 1 سال پیش
sirnamdari kingblogg
0

سلام دوستان توی هدر سایت یدونه عکس 100% صفحه دارم که روش 2 تا تگ گذاشتم که معرفی سایته ولی مشکلی که وجود داره زمان ریسپانسیوه که عکس جمع نمیشه و همونطور بزرگ باقی میمونه، راه های مختلفی رو امتحان کردم خیلی هم سرچ کردم گوگل ولی نتیجه ای نگرفتم. کد هاشم به این صورت هست که یدونه div گذاشتم که عکس رو تو css بهش دادم و داخل این div دو تا تگ h1 , p رو گذاشتم. البته قبلش اومدم یه div گذاشتم داخلش 3 تا تگ گذاشتم که یکیش همون تگ img بود که در این صورت با کلاس img-responsive بوت استرپ ریسپانسیو شد ولی دیگه اون تگ های معرفی روی عکس قرار نگرفتن و افتادن بعدش، از position , z-index , max-width هم استفاده کردم ولی باز جواب نداد

پاسخ ها

0

کد کو پس؟

این مثالو یه نگاه بنداز احتمالا مشکلت حل بشه:

body, html {
    height: 100%;
}

.bg {
    /* The image used */
    background-image: url("img_girl.jpg");

    /* Full height */
    height: 100%;

    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

https://www.w3schools.com/howto/howto_css_full_page.asp دمو: https://www.w3schools.com/howto/tryhow_css_fullpage_demo.htm

0

سخت شد:) کدشو نمیتونی بذاری؟ کد اون قسمت فقط با کدای CSS

0

باشه الان میزارم، نریا ، آنلاین باش 😂

0

فدات ، ببین همچین کاری میخوام بکنم

یه هدر اینجوری میخوام بزارم، یه عکس با نوشته، اگه عکس و تگ هارو با تگ img بزارم که روی هم قرار نمیگیرین اگه هم برم عکس رو از تو css بزارم اون موقع دیگه ریسپانسیو نمیشه نمیدونم چیکارش کنم، اگه بازم میبینی که سخته تا کدای 2 حالت رو بفرستم

آخرین ویرایش: 18-03-2018 ساعت 09:32، توسط sirnamdari
1

واقعا دمت گرم، فقط چون background-position رو نذاشته بودم ریسپانسیو نمیشد!

0

خواهش میکنم ;)

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.

لطفا ابتدا لاگین کنید