صفحه اصلی / ▼آموزشLearning / –3 آموزش سی اس اس Learning CSS3 / تمام صفحه کردن عکس پشت زمینه با CSS

تمام صفحه کردن عکس پشت زمینه با CSS

اگر عکسی را برای پشت زمینه انتخاب کنید میبینید که تمام صفحه توسط عکس پر نمیشه و گوشه های صفحه خالی میمونه.

با استفاده از خاصیت زیر عکس تمام پیکسل های صفحه را پوشش میدهد.

کد HTML :

<html>
<head>
 <title></title>
 <link href="style.css" type="text/css" rel="stylesheet"></link>

</head>

<body>
 <img alt="full screen background image" src="banner.jpg" id="full-screen-background-image" />
 <div id="wrapper">
 <p align="center">Your Text ...</p>
 </div>
</body>
</html>

 

کد style.css :

html, body {
 height: 100%;
 width: 100%;
 padding: 0;
 margin: 0;
}

#full-screen-background-image {
 z-index: -999;
 min-height: 100%;
 min-width: 1024px;
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
}

#wrapper {
 position: relative;
 width: 800px;
 min-height: 400px;
 margin: 100px auto;
}

نتیجه : http://paulmason.name/media/demos/full-screen-background-image

درباره مدیر سایت

سعید حسینی هستم کارشناسی مهندسی نرم افزار مدیر سایت و علاقه مند به فناوری اطلاعات و تکنولوژی های نو علاقه مند به وردپرس و جوملا و مدتی افتخار همکاری با انجمن پشتیبانی وردپرس پارسی را نیز داشتم. مهارتهای نرم افزاری • وب : PHP , HTML , Java script , JQuery , asp , CSS & CSS3 , Dreamweaver • برنامه نویسی : Delphi , C ++ , C sharp • بانک اطلاعاتی : SQL Server , MySQL , Oracle • طراحی : Photoshop ورزش های مورد علاقه ام شنا و فوتبال و دوچرخه سواری هستند.

همچنین بخوانید

اضافه کردن متن به CSS با خاصیت Content

اگر برای شما هم سوال پیش آمده که چطوری با css متنی را اضافه کنیم …

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *