hello, i've bee searching for this from a while but i couldn't find an answer of my quetion, so i have 2 div with width 100% and heighh is really no defined it depend to the content but the problem is every time the content is too small, i would like to have backround image with original size of image but it is not possible because the content is too small so each time i have to adjust div height according to backround image i would like it to be auto matically, i bassically want it to be also 100% like the width i tried but didn't work here is my code

section1 {
  /*height: 1200px;*/
  height: 100vh;
  width: 100%;
  background-image:url('http://i01.appmifile.com/webfile/globalimg/18/A6B66FF2-5E69-5E44-BABF-68A04D25A393.jpg');
  background-attachment: fixed;
  background-color: #ffff;
  opacity: 0.5;
  background-repeat: no-repeat;
}
.section2 {
  height: 2376px;
  width: 100%;
  background-image:url('http://localhost/microcictest1/img/bh5.png');
  background-attachment: fixed;
  background-color: #ffff;
  opacity: 0.5;
  background-repeat: no-repeat;

Recommended Answers

All 4 Replies

add background-size: cover to your CSS blocks

so i deleted height:px ;

to my div section1 section2 to section6 and i put backround-seze:cover then all backrounds disapeared;

Your content in those divs dictate the height now and should show the background image. Do you have content in them?

hi thaks a lot i changed height:100vh; so the height is equal to viewport height 100% and backround-size:cover and i get what i wanted

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.