CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Melda S
Melda S

Reputation: 141

Adding background image as a new section to a Bootstrap Site

Been struggling with trying to add a background image to my Bootstrap site. I am trying to sandwich it between two existing sections.

When inspecting many homepages with background images, they have the class but also the style code in the HTML as well as the CSS.

This is the type of thing I am trying to add, excluding the slider http://themesquared.com/flathost (div class is jumbotron masthead) http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg

To then some overlay text to the background image, do I need in this order: Container, Row Class, Background Image Class,Overlay Text Class with col positions

Is both the style needed in CSS and HTML with background images?

<div class="solution5">
<div class="container">
<div class="row">
<div class="col-12">
<div class="col-6 push-1"><a href="/link1">
<h1>Link text</h1><h2>2nd text block</h2>
<a href="/link2" class="Link2">Up to 40% off</a>
<a href="/link3" class="Link3">Discover more</a>
<a href="/link4" class="col-3 push-1"><ul class="Link4"><li>Free Bag</li>     <li>Free Delivery</li></ul></a>
</div>
</div>
</div>
</div>
</div>

.solution5 {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
z-index: 20;
background-image: url(http://example.com/img/solution5.jpg);
background-color: rgba(0, 0, 0, 0);
background-size: cover;
background-position: 50% 0%;
background-repeat: no-repeat;

Upvotes: 1

Views: 5974

Answers (1)

davidkonrad
davidkonrad

Reputation: 85528

You mean like this :

.solution5 {
  background: url('http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg');
  background-size: cover;
}

demo -> http://jsfiddle.net/mmcgaweb/

regarding background-size: cover; from MDN :

cover : A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

Upvotes: 1

Related Questions