تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

Background image 100% in web page

+ إضافة رد

8 مشاركة صفحة 1 من 1


Background image 100% in web page

بواسطة riyaz123 » الأربعاء أغسطس 13, 2014 12:39 pm

How to fix Background image 100% in web page?
صورة العضو الشخصية

riyaz123

  • مشاركات: 15
  • اشترك في: السبت يوليو 05, 2014 7:57 am

Re: Background image 100% in web page

بواسطة nanoverso » الخميس أغسطس 14, 2014 1:04 am

Use CSS to define the body background size to 100%:
body {
background-size: 100% 100%;
}
صورة العضو الشخصية

nanoverso

  • مشاركات: 253
  • اشترك في: السبت مايو 10, 2014 12:08 am
  • مكان: Brazil
--
Free VST Plugins Download.

Re: Background image 100% in web page

بواسطة Farhin Qureshi » الخميس يناير 19, 2017 12:19 pm

Hi,

I think you have need to try this code.

CODE: تحديد الكل
body {
    background-image:url("../images/myImage.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
html {
    height: 100%
}


Thanks.
صورة العضو الشخصية

Farhin Qureshi

  • مشاركات: 45
  • اشترك في: الثلاثاء يناير 03, 2017 11:33 am
--
Farhin Qureshi
.NET Developer
http://www.ifourtechnolab.com

Re: Background image 100% in web page

بواسطة eh3an2010 » الثلاثاء يناير 24, 2017 6:48 am

background-size: cover;
صورة العضو الشخصية

eh3an2010

  • مشاركات: 1
  • اشترك في: الثلاثاء يناير 24, 2017 6:45 am

Re: Background image 100% in web page

بواسطة jackmarco » الجمعة فبراير 24, 2017 8:57 am

You need to set the height of html to 100%

body {
background-image:url("../images/myImage.jpg");
background-repeat: no-repeat;
background-size: 100% 100%;
}
html {
height: 100%
}
http://jsfiddle.net/8XUjP/
صورة العضو الشخصية

jackmarco

  • مشاركات: 2
  • اشترك في: الجمعة فبراير 10, 2017 7:48 am

Re: Background image 100% in web page

بواسطة jelena » الأربعاء مارس 08, 2017 11:06 am

Here is simple example:

html part of code:

CODE: تحديد الكل
<div class="bgWrapper">
   <div class="bgInner">
     <h1>Some text over image</h1>
  </div>
</div>


css part of code:

CODE: تحديد الكل
.bgWrapper{
  width:100%;
  height:200px;
  /* Best practice for full width bg photos */
  background-image:url("https://images.unsplash.com/photo-1467173572719-f14b9fb86e5f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=b734e103303c5965225682077ee72f86");
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

.bgInner{
  width:100%;
  height:100%;
  /* always add transparent background color so text can be visible better. Last number (0.5) is transparency and first color but in rgb */
  background-color:rgba(0,0,0,0.5);
  display:table;
}

h1{
  color:#fff;
  text-align:center;
  display:table-cell;
  vertical-align:middle;
}


You can see the FULL EXAMPLE on jsfiddle that I made ( https://jsfiddle.net/48agcpty/1/ ).
صورة العضو الشخصية

jelena

  • مشاركات: 2
  • اشترك في: الأربعاء مارس 08, 2017 10:40 am
  • مكان: Florida

Re: Background image 100% in web page

بواسطة jody70 » الأربعاء مارس 08, 2017 1:01 pm

We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window) http://www.generalelectricservice.ir/
صورة العضو الشخصية

jody70

  • مشاركات: 2
  • اشترك في: الأربعاء مارس 08, 2017 12:53 pm
  • مكان: http://seocando.ir/

Re: Background image 100% in web page

بواسطة jody70 » الأربعاء مايو 03, 2017 6:34 am

jody70 كتب:We can do this purely through CSS thanks to the background-size property now in CSS3. We'll use the html element (better than body as it's always at least the height of the browser window) http://www.generalelectricservice.ir/
صورة العضو الشخصية

jody70

  • مشاركات: 2
  • اشترك في: الأربعاء مارس 08, 2017 12:53 pm
  • مكان: http://seocando.ir/


+ إضافة رد

صفحة 1 من 1