CODEWITHSUNDEEP
htmlcss
wawanopoulos
wawanopoulos

Reputation: 9802

Html / CSS : image taking half of the screen

I would like to create a webpage with a big image taking half on the screen like this :

enter image description here

How can i do this with CSS ?

Upvotes: 3

Views: 22446

Answers (2)

Rayhan
Rayhan

Reputation: 165

The answer at the top forgot something :

background-repeat: no-repeat;

Since you don't want two image but only one. Final code :

#leftHalf {
   background: url(bg-1.jpg);
   background-repeat: no-repeat;
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

Upvotes: 1

Fizor
Fizor

Reputation: 1530

Try something like this? (2 divs)

#leftHalf {
   background: url(bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

#rightHalf {

   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

Cheers.

Upvotes: 9

Related Questions