সিএসএস ব্যবহার করে কি আমার একাধিক পটভূমি চিত্র থাকতে পারে?

316

দুটি ব্যাকগ্রাউন্ড চিত্র থাকা কি সম্ভব? উদাহরণস্বরূপ, আমি শীর্ষে জুড়ে একটি চিত্র পুনরাবৃত্তি করতে চাই (পুনরাবৃত্তি-এক্স), এবং পুরো পৃষ্ঠা জুড়ে আরেকটি পুনরাবৃত্তি (পুনরাবৃত্তি), যেখানে পুরো পৃষ্ঠা জুড়ে একটি পৃষ্ঠার উপরে যা পুনরাবৃত্তি করে তার পিছনে রয়েছে।

আমি খুঁজে পেয়েছি যে এইচটিএমএল এবং দেহের ব্যাকগ্রাউন্ড সেট করে আমি দুটি পটভূমি চিত্রের জন্য পছন্দসই প্রভাব অর্জন করতে পারি:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

এটি কি "ভাল" সিএসএস? এর চেয়ে ভাল পদ্ধতি আর কি আছে? এবং যদি আমি তিন বা ততোধিক ব্যাকগ্রাউন্ড চিত্র চাইতাম?

css background-image

— রুড জুইলিনস্কি
সূত্র

377

CSS3 এই ধরণের জিনিসটিকে অনুমতি দেয় এবং এটি দেখতে এরকম দেখাচ্ছে:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

সমস্ত বড় ব্রাউজারের বর্তমান সংস্করণগুলি এখন এটি সমর্থন করে , তবে আপনার যদি IE8 বা নীচে সমর্থন করতে হয় তবে আপনার চারপাশে কাজ করার সর্বোত্তম উপায় হ'ল অতিরিক্ত ডিভগুলি রাখা:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>

body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}

— nickf
সূত্র

27

একাধিক ব্যাকগ্রাউন্ড ফায়ারফক্স, ক্রোম, সাফারি এবং অপেরা এর সর্বশেষতম সংস্করণ দ্বারা সমর্থিত। এটি IE9 এও সমর্থিত হবে। en.wikedia.org/wiki/…

— Vidime Vidas

4

এবং যদি আপনি আলাদা পুনরাবৃত্তি / অবস্থান সেটিংস রাখতে চান তবে আপনি এটি করতে পারেন: css3.info/preview/mpleple-backgrounds

— ক্রিস্ক

2

আইই 8 - আই 6 এর জন্য আপনি PIE.js ব্যবহার করতে পারেন webdesign.tutsplus.com/tutorials/htmlcss-tutorials/…

— আলে… কোটনিক

1

পটভূমি আকার এই একই নিয়ম অনুসরণ করে? আমি চাই যে আমার সমস্ত ব্যাকগ্রাউন্ডের চিত্রগুলি সম্পূর্ণ উচ্চতা হোক, সেগুলির মধ্যে একটি (যা আমি চিত্রের উচ্চতা হতে চাই)।

— এমটিমুরডক

হ্যাঁ, পটভূমি-আকার একই নিয়ম অনুসরণ করে (অন্যান্য পটভূমির সমস্ত বৈশিষ্ট্যের মতো)। পটভূমি বৈশিষ্ট্য (সাধারণত উপসর্গ ব্যাকগ্রাউন্ড দিয়ে শুরু হয়- এবং তারপরে পটভূমির একটি নির্দিষ্ট সম্পত্তি) আসলে ব্যাকগ্রাউন্ডের বৈশিষ্ট্যের মধ্যেই নির্দিষ্ট করা যায়, তাই একাধিক পটভূমি চিত্রগুলি সমর্থিত হওয়ায় একাধিক তালিকাভুক্ত বৈশিষ্ট্যও সমর্থিত। এটি আকার, অবস্থান, পুনরাবৃত্তি ইত্যাদির ক্ষেত্রে প্রযোজ্য

— ক্যানাইডাইসড

35

এক ডিভিতে দুটি পৃথক ব্যাকগ্রাউন্ড চিত্র ব্যবহার করার সবচেয়ে সহজ উপায় হ'ল কোডটির এই লাইনটি:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

স্পষ্টতই, এটি কেবল ওয়েবসাইটের বডির জন্য হতে হবে না, আপনি এটি যে কোনও ডিভিতে চান তা ব্যবহার করতে পারেন।

আশা করি এইটি কাজ করবে! আমার ব্লগে একটি পোস্ট রয়েছে যা সম্পর্কে আরও নির্দেশাবলী বা সহায়তা প্রয়োজন হলে যদি এই বিষয়ে আরও গভীরতার সাথে আলোচনা করা হয় - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- dIV আছে ।

— TheLibzter
সূত্র

নোট করুন যে এটি কেবল পটভূমিতে কাজ করে ব্যাকগ্রাউন্ড-চিত্রের সাথে নয়

— yoel halb

24

এটা ব্যবহার কর

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

ব্যাকগ্রাউন্ড-পজিশনের সাথে আপনার প্রতিটি চিত্রের অবস্থান সামঞ্জস্য করার একটি সহজ উপায়: এবং ব্যাকগ্রাউন্ড-পুনরাবৃত্তির সাথে পুনরাবৃত্তি সম্পত্তি সেট করুন: প্রতিটি চিত্রের জন্য স্বতন্ত্রভাবে

— code.rider
সূত্র

13

এফএফ এবং আইই এর বর্তমান সংস্করণ এবং কিছু অন্যান্য ব্রাউজার একক সিএসএস 2 ঘোষণায় একাধিক ব্যাকগ্রাউন্ড চিত্র সমর্থন করে। এখানে দেখুন http://dense13.com/blog/2008/08/31/m Multiple-background-images-with-css2/ এবং এখানে http://www.quirksmode.org/css/m Multiple_backgrounds.html এবং এখানে http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

IE এর জন্য, আপনি কোনও আচরণ যুক্ত করার বিষয়টি বিবেচনা করতে পারেন। এখানে দেখুন: http://css3pie.com/

— শ্যানন
সূত্র

4

হ্যাঁ, এটি সম্ভব এবং জনপ্রিয় ব্যবহারযোগ্যতা পরীক্ষার ওয়েবসাইট সিলভারব্যাক দ্বারা প্রয়োগ করা হয়েছে । আপনি যদি সোর্স কোডটি দেখেন তবে দেখতে পাবেন যে পটভূমিটি একে অপরের শীর্ষে রাখা বেশ কয়েকটি চিত্র নিয়ে গঠিত।

কীভাবে প্রভাব ফেলবেন তা ভিটামিনের উপরে পাওয়া যেতে পারে তা নিবন্ধে এখানে দেওয়া হয়েছে । এই 'পেঁয়াজ ত্বক' স্তরগুলি মোড়ানোর জন্য অনুরূপ ধারণাটি এ লিস্টের পাশাপাশি পাওয়া যাবে ।

— মাইক বি
সূত্র

4

আপনি যদি একাধিক পটভূমি চিত্র চান তবে সেগুলি ওভারল্যাপ করতে না চান, আপনি এই সিএসএসটি ব্যবহার করতে পারেন:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

এই এইচটিএমএল কাঠামো সহ:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>

— রেচেল
সূত্র

2

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>

স্নিপেট প্রসারিত করুন

আমরা CSS3 ব্যবহার করে সহজেই একাধিক চিত্র যুক্ত করতে পারি। আমরা এখানে http://www.w3schools.com/css/css3_backgrounds.asp বিস্তারিত পড়তে পারি

— রিংকু
সূত্র

1

আপনার পটভূমির শীর্ষে একটি ডিভ থাকতে পারে যার সাথে একটি পটভূমি এবং অন্য একটি মূল পৃষ্ঠার জন্য এবং পৃষ্ঠাগুলি তাদের মধ্যে পৃথক করে রাখতে পারেন বা সামগ্রীটি অন্য জেড-স্তরে ভাসমান ডিভিতে রেখে দিতে পারেন। আপনি যেভাবে এটি করছেন তা কার্যকর হতে পারে তবে আমি সন্দেহ করি যে এটি আপনার সম্মুখীন হওয়া প্রতিটি ব্রাউজার জুড়ে কাজ করবে।

— শন জেমস
সূত্র