CODEWITHSUNDEEP
csstwitter-bootstrap
wobsoriano
wobsoriano

Reputation: 13442

CSS Static Background banner

I bought a theme in envatomarket and here is the link. Now I have a problem with the background banner. Here is what it looks like:

enter image description here

As you can see, the background of the banner is like a collage of pictures and it is cropped according to the size of screen but the original image is here. Since it is bootstrap, the image will resize according to the size of the screen. But what if I want to show the full image in the background as it is the link? Here are the codes:

HTML:

<div class="wrapper">
 <section class="banner-bg">
 //more html
 </section>
</div>

CSS:

.wrapper {
max-width:100%;
}

.banner-bg { 
background:url(../images/main-bg.jpg) no-repeat top center;
position: relative;
text-align: center;
}

Is there a way that whatever the size of the screen is, the full image will still be visible and not like of the screenshot above? Thank you.

Upvotes: 0

Views: 251

Answers (1)

CHoltzman
CHoltzman

Reputation: 111

Try adding:

background-size:100 100;

Upvotes: 1

Related Questions