CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
StuBlackett
StuBlackett

Reputation: 3857

Background Image width to 75% of the screen

I'm using this image

As a background to a section on my page. I'd ideally like the white to stop at 75% of the screen (This will cover the content in the left grid).

Is this possible to do? I've just tried the following CSS :

background: rgba(0, 0, 0, 0) url("../img/page-bg.jpg") repeat-y scroll left center / auto 75%;

But had no such luck.

Can this be achieved. I'm using the Bootstrap 3 grid and have columns :

lg-9 (Content) & lg-3 (Right side navigation menu)

Cheers

Upvotes: 0

Views: 1445

Answers (1)

Super User
Super User

Reputation: 9642

You are applying 75% on height. Just use 75% auto instead of auto 75%

background: #000  url("../img/page-bg.jpg") repeat-y left center;
background-size: 75% auto;


div {
  width:300px;
  height: 600px;
  float: left;
  background: #000 url(https://dummyimage.com/300x300/cccccc/ff0000.png&text=Sample-Text) repeat-y left center;
  background-size: 75% auto;
}
<div>

</div>

Upvotes: 1

Related Questions